Google Gauge in GridPanel

  1. #1

    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
    <%@ 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 somebody

    Regards
    Richardt
    Attached Thumbnails Click image for larger version. 

Name:	gauge.PNG 
Views:	163 
Size:	24.9 KB 
ID:	6180  
    Last edited by Richardt; May 08, 2013 at 11:37 AM.
  2. #2
    @Richardt , thank you for sharing!

Similar Threads

  1. [CLOSED] Gauge chart issues
    By advBackOffice in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: May 02, 2013, 4:23 PM
  2. [CLOSED] Meter Gauge
    By xeo4.it in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 08, 2013, 2:21 PM
  3. Can i create chart gauge in v.1
    By yazid in forum 1.x Help
    Replies: 0
    Last Post: Sep 08, 2012, 5:52 AM
  4. how to use the charts(gauge and dashboard)
    By Darkizza in forum 2.x Help
    Replies: 1
    Last Post: May 11, 2012, 11:51 AM
  5. Google gauge and Ext.Net
    By UserClarion in forum 1.x Help
    Replies: 2
    Last Post: Dec 22, 2011, 2:13 PM

Posting Permissions