May 08, 2013, 11:34 AM
Google Gauge in GridPanel
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
vb - server side
Regards
Richardt
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.addRows(1);
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;
}
</script>
</head>
<body>
<form id="form1" runat="server" >
<div>
<ext:Store ID="Store1" runat="server" UseIdConfirmation="true"
AutoDataBind="True">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="company" />
<ext:RecordField Name="amount" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
<ext:ViewPort ID="ViewPort1" runat="server" Style="z-index: 1; left: 0px; top: 300px;
position: absolute; height: 350px; width: 1023px">
<Body>
<ext:BorderLayout ID="BorderLayout1" runat="server">
<Center>
<ext:GridPanel ID="GridPanel1" runat="server" StoreID="Store1" Title="Grid Gauge"
TrackMouseOver="true" Border="false">
<ColumnModel ID="ctl12" runat="server">
<Columns>
<ext:RowNumbererColumn />
<ext:Column ColumnID="company" DataIndex="company" Header="company">
</ext:Column>
<ext:Column Sortable="false" ColumnID="label" DataIndex="amount" MenuDisabled="true"
Header="amount" Width="200">
<Renderer Fn="ScheduleRenderer" />
</ext:Column>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
</SelectionModel>
<BottomBar>
<ext:PagingToolbar ID="PagingToolBar1" runat="server" PageSize="10" StoreID="Store1"
DisplayInfo="true" DisplayMsg="Displaying Job Description {0} - {1} of {2}" />
</BottomBar>
<SaveMask ShowMask="true" />
<LoadMask ShowMask="true" />
</ext:GridPanel>
</Center>
</ext:BorderLayout>
</Body>
</ext:ViewPort>
<ext:ScriptManager ID="ScriptManager1" runat="server" Style="z-index: 1; left: 0px;
top: 100px; position: absolute; height: 96px; width: 233px">
</ext:ScriptManager>
</div>
</form>
</body>
</html>
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
Me.Store1.DataBind()
End If
End Sub
Private ReadOnly Property Data() As Object()
Get
Return New Object() {New Object() {"Comp1", 5000}, New Object() {"Comp2", 3000}, New Object() {"Comp3", 6000}}
End Get
End Property
Hope this helps somebodyRegards
Richardt
Last edited by Richardt; May 08, 2013 at 11:37 AM.