[Javascript] google API 表格套用＠Morris' Blog

2013-10-26 20:12:11| 人氣2,735| 回應0 | 上一篇 | 下一篇

[Javascript] google API 表格套用

推薦 0 收藏 0 轉貼0 訂閱站台

參考下列兩個網址後，內用範例程式碼。

https://google-developers.appspot.com/chart/interactive/docs/gallery
https://developers.google.com/chart/interactive/docs/reference#DataTable_setValue

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript" src="sample_soap_commu.js"></script>
        <script type='text/javascript' src='https://www.google.com/jsapi'></script>
        <link rel="stylesheet" href="Mcss.css" type="text/css" />
        <script type='text/javascript'>
              google.load('visualization', '1', {packages:['gauge']});
              google.setOnLoadCallback(drawGaugeChart);
              var gaugeData;
              var gaugeChart;
              var gaugeOptions;
              function drawGaugeChart() {
                gaugeData = google.visualization.arrayToDataTable([
                      ['Label', 'Value'],
                      ['CPU Temp', 50]
                ]);

                gaugeOptions = {
                      width: 800, height: 240,
                      redFrom: 90, redTo: 100,
                      yellowFrom:75, yellowTo: 90,
                      minorTicks: 5
                };

                gaugeChart = new google.visualization.Gauge(document.getElementById('googleAPIBlock1'));
                gaugeChart.draw(gaugeData, gaugeOptions);
              }
              google.load("visualization", "1", {packages:["corechart"]});
              google.setOnLoadCallback(drawCoreChart);
              var coreChart;
              var coreOptions;
              var coreData;
              var coreDataArr = new Array(100);
              coreDataArr[0] = ['Timestamp', 'CPU1'];
              for(var i = 1; i < 100; i++) {
                  coreDataArr[i] = ['', 1];
              }
              function drawCoreChart() {
                coreData = google.visualization.arrayToDataTable(coreDataArr);
                coreOptions = {
                      title: 'CPU temperature monitoring',
                      hAxis: {title: '', titleTextStyle: {color: '#333333'}},
                      vAxis: {minValue: 0},
                      fontName : 'georgia'
                };
                coreChart = new google.visualization.AreaChart(document.getElementById('googleAPIBlock2'));
                coreChart.draw(coreData, coreOptions);
              }

              var myClock = setInterval(function(){myTimer()}, 1000);
            function myTimer() {
                var lastData = gaugeData.getValue(0, 1);
                var updateData = lastData;
                if(Math.random() < 0.5)
                    updateData += Math.random()*10;
                else
                    updateData -= Math.random()*6;
                if(updateData > 100)
                    updateData -= 20;
                gaugeData.setValue(0, 1, Math.floor(updateData));
                gaugeChart.draw(gaugeData, gaugeOptions);
                for(var i = 0; i < coreData.getNumberOfRows()-1; i++) {
                    coreData.setValue(i, 1, coreData.getValue(i+1, 1));
                }
                coreData.setValue(coreData.getNumberOfRows()-1, 1, Math.floor(updateData));
                coreChart.draw(coreData, coreOptions);
                //https://developers.google.com/chart/interactive/docs/reference#DataTable_setValue
            }
        </script>
    </head>
    <body>
        <div id='googleAPIBlock1'></div>
        <div id='googleAPIBlock2' style="width: 450px; height: 250px;"></div>
        
    </body>
</html>

我要檢舉

台長： Morris

您可能對以下文章有興趣

[Javascript][簡易] 去除註解

[Javascript] 縮放表單

[Javascript] AJAX - Web service 練習

[Javascript] SQL & Website

人氣(2,735) | 回應(0)| 推薦 (0)| 收藏 (0)| 轉寄
全站分類: 教育學習(進修、留學、學術研究、教育概況) | 個人分類: [學習]JavaScript |
此分類下一篇:[Javascript] SQL & Website
此分類上一篇:[Javascript] AJAX - Web service 練習

回應(0)