2013-10-26 20:12:11Morris
[Javascript] google API 表格套用
參考下列兩個網址後，內用範例程式碼。
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>
<!-- more information
https://google-developers.appspot.com/chart/interactive/docs/gallery
-->
</body>
</html>