Phant Guage With Seth
An example of a Google Gauge Chart.
HTML
<script src="https://www.google.com/jsapi"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['gauge']}]}"></script>
<div id="chart_div" style="width: 600px; height: 200px;"></div>
<div>Last Updated:</div>
<div id="Updated"></div>
JavaScript
google.setOnLoadCallback(drawChart);
function drawChart() {
//http://data.sparkfun.com/streams/JxDAyjDWXMCJWRX53yA4
var public_key = 'v0yJoRRXKYcrpLdjzDqZ';
var jsonData = $.ajax({
url: 'https://data.sparkfun.com/output/' + public_key + '.json',
data: {
page: 1
},
dataType: 'jsonp'
}).done(function (results) {
var humidity = parseFloat(results[0].humidity);
var lastUpdate = results[0].timestamp;
var dateUpdate = lastUpdate.slice(0,10);
var timeUpdate = lastUpdate.slice(11,19);
// var outsideCelsius = -0.68 ;
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
//['Outside C', outsideC],
//['Outside F', outsideF],
//['Inside C', insideC],
//['Inside F', insideF],
['Humidity', humidity]
]);
var options = {
width: 600,
height: 200,
greenFrom:62,
greenTo: 70,
yellowFrom: 70,
yellowTo: 75,
redFrom: 75,
redTo: 80,
minorTicks: 5
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
//data.stringify(obj);
chart.draw(data, options);
setInterval(function () {
// data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
chart.draw(data, options);
}, 10000);
setInterval(function () {
// data.setValue(1, 1, 40 + Math.round(60 * Math.random()));
chart.draw(data, options);
}, 10000);
setInterval(function () {
// data.setValue(2, 1, 60 + Math.round(20 * Math.random()));
chart.draw(data, options);
}, 10000);
// Used...