View Full Version : Google Gauge in GridPanel

May 08, 2013, 11:34 AM
Here is an example of using the Google Gauge in ext.net gridpanel for anybody that is interested. I am still using version 8, but it should be easy to convert to later versions.

PS. One issue works in Chrome and Firefox but not in IE for some reason. Maybe you can get it to work in IE.

aspx page - Client Side

<%@ Register assembly="Coolite.Ext.Web" namespace="Coolite.Ext.Web" tagprefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Gauge FridPanel</title>
<ext:ScriptContainer ID="ScriptContainer1" runat="server" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">
google.load('visualization', '1', { packages: ['gauge'] });
var chart;
var gaugeData;
var gauge;
var ScheduleRenderer = function(v, p, record, rowIndex) {
var gaugeOptions;

chart = document.createElement('DIV');
gaugeData = new google.visualization.DataTable();
gaugeData.addColumn('number', 'Tank');
gaugeData.setCell(0, 0, v);
gauge = new google.visualization.Gauge(chart);
gaugeOptions = {
width: 400, height: 120,
min: 0,
max: 8000,
yellowFrom: 1000,
yellowTo: 1500,
redFrom: 0,
redTo: 1000,
minorTicks: 50
gauge.draw(gaugeData, gaugeOptions);

return chart.innerHTML;


<form id="form1" runat="server" >
<ext:Store ID="Store1" runat="server" UseIdConfirmation="true"
<ext:RecordField Name="company" />
<ext:RecordField Name="amount" />

<ext:ViewPort ID="ViewPort1" runat="server" Style="z-index: 1; left: 0px; top: 300px;
position: absolute; height: 350px; width: 1023px">
<ext:BorderLayout ID="BorderLayout1" runat="server">
<ext:GridPanel ID="GridPanel1" runat="server" StoreID="Store1" Title="Grid Gauge"
TrackMouseOver="true" Border="false">
<ColumnModel ID="ctl12" runat="server">
<ext:RowNumbererColumn />
<ext:Column ColumnID="company" DataIndex="company" Header="company">
<ext:Column Sortable="false" ColumnID="label" DataIndex="amount" MenuDisabled="true"
Header="amount" Width="200">
<Renderer Fn="ScheduleRenderer" />
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
<ext:PagingToolbar ID="PagingToolBar1" runat="server" PageSize="10" StoreID="Store1"
DisplayInfo="true" DisplayMsg="Displaying Job Description {0} - {1} of {2}" />
<SaveMask ShowMask="true" />
<LoadMask ShowMask="true" />
<ext:ScriptManager ID="ScriptManager1" runat="server" Style="z-index: 1; left: 0px;
top: 100px; position: absolute; height: 96px; width: 233px">

vb - server side

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not IsPostBack Then
Me.Store1.DataSource = Me.Data
End If
End Sub
Private ReadOnly Property Data() As Object()
Return New Object() {New Object() {"Comp1", 5000}, New Object() {"Comp2", 3000}, New Object() {"Comp3", 6000}}
End Get
End Property

Hope this helps somebody


May 13, 2013, 3:51 AM
@Richardt , thank you for sharing!