Scribd Logo
Upload

Welcome to Scribd!

  • 40 views

    Google Gauge

    Uploaded by

    willhaigh
    This document contains code to display a gauge chart using the Google Visualization API. It loads gauge chart code from Google, defines data for three metrics (memory, CPU, network usage) and draws the chart in a div container on the page. It then uses intervals to periodically update the chart values and redraw the chart.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    Google Gauge

    Uploaded by

    willhaigh
    40 views2 pages
    This document contains code to display a gauge chart using the Google Visualization API. It loads gauge chart code from Google, defines data for three metrics (memory, CPU, network usage) and draws the chart in a div container on the page. It then uses intervals to periodically update the chart values and redraw the chart.

    Original Description:

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document contains code to display a gauge chart using the Google Visualization API. It loads gauge chart code from Google, defines data for three metrics (memory, CPU, network usage) and draws the chart in a div container on the page. It then uses intervals to periodically update the chart values and redraw the chart.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    40 views2 pages

    Google Gauge

    Uploaded by

    willhaigh
    This document contains code to display a gauge chart using the Google Visualization API. It loads gauge chart code from Google, defines data for three metrics (memory, CPU, network usage) and draws the chart in a div container on the page. It then uses intervals to periodically update the chart values and redraw the chart.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    of 2

    <div id ="subtitle">Number of Events</div>

    <script type="text/javascript">CODESITE_docEarlyProcessing();</script>
    <script type="text/javascript" src="http://www.google.com/jsapi?autoload={'modul
    es':[{'name':'visualization','version':'1.0','packages':['gauge']}]}"></script>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"~CCC
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    </head>
    <body onload="load()" onunload="GUnload()">
    <div id="chart_div" style="width: 400px; height: 120px;"></div>
    <script type="text/javascript">
    function Timer(){this.t={};this.tick=function(a,b){this.t[a]=[(new Date).getTi
    me(),b]};this.tick("start")}var loadTimer=new Timer;window.jstiming={Timer:Timer
    ,load:loadTimer};if(window.external&&window.external.pageT)window.jstiming.pt=wi
    ndow.external.pageT;if(window.jstiming)window.jstiming.report=function(g,d){var
    c="";if(window.jstiming.pt){c+="&srt="+window.jstiming.pt;delete window.jstiming
    .pt}if(window.external&&window.external.tran)c+="&tran="+window.external.tran;va
    r a=g.t,h=a.start;delete a.start;var i=[],e=[];for(var b in a){if(b.indexOf("_")
    ==0)continue;var f=a[b][1];if(f)a[f][0]&&e.push(b+"."+(a[b][0]-a[f][0]));else h&
    &i.push(b+"."+(a[b][0]-h[0]))}if(d)for(var j in d)c+="&"+j+"="+d[j];(new Image).
    src=["http://csi.gstatic.com/csi?v=3","&s=gviz&action=",g.name,e.length?"&it="+e
    .join(",")+c:c,"&rt=",i.join(",")].join("")};
    </script>
    <script type="text/javascript">
    var csi_timer = new window.jstiming.Timer();
    csi_timer.name = 'docs_gauge';
    google.setOnLoadCallback(drawChart);
    function drawChart() {
    csi_timer.tick('load');

    var data = new google.visualization.DataTable();


    data.addColumn('string', 'Label');
    data.addColumn('number', 'Value');
    data.addRows(3);
    data.setValue(0, 0, 'Memory');
    data.setValue(0, 1, <%=@processorusage%>);
    data.setValue(1, 0, 'CPU');
    data.setValue(1, 1, 55);
    data.setValue(2, 0, 'Network');
    data.setValue(2, 1, 68);
    csi_timer.tick('data');
    var chart = new google.visualization.Gauge(document.getElementById('chart_div'
    ));
    csi_timer.tick('new');
    var options = {width: 400, height: 120, redFrom: 90, redTo: 100,
    yellowFrom:75, yellowTo: 90, minorTicks: 5, min:0, max:10000};
    chart.draw(data, options);
    csi_timer.tick('draw');
    window.jstiming.report(csi_timer);
    setInterval(function() {
    data.setValue(0, 1, <%=@processorusage%>);
    chart.draw(data, options);
    },5000);
    setInterval(function() {
    data.setValue(1, 1, 40 + Math.round(60 * Math.random()));
    chart.draw(data, options);
    }, 5000);
    setInterval(function() {
    data.setValue(2, 1, 60 + Math.round(20 * Math.random()));
    chart.draw(data, options);
    }, 26000);
    }
    </script>
    <div id="map"></div>
    </body>
    </html>

    You might also like