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: 400px; height: 120px;"></div>
<div>Hello</div>
<div id="debug"></div>
JavaScript
google.setOnLoadCallback(drawChart);
function drawChart() {
//http://data.sparkfun.com/streams/JxDAyjDWXMCJWRX53yA4
var public_key = 'JxDAyjDWXMCJWRX53yA4';
var jsonData = $.ajax({
url: 'https://data.sparkfun.com/output/' + public_key + '.json',
data: {
page: 1
},
dataType: 'jsonp'
}).done(function (results) {
/* var Sdata = new google.visualization.DataTable();
Sdata.addColumn('datetime', 'Time');
Sdata.addColumn('number', 'Celsius Outside');
Sdata.addColumn('number', 'Fahrenheit Outside');
Sdata.addColumn('number', 'Celsius Inside');
Sdata.addColumn('number', 'Fahrenheit Inside');
Sdata.addColumn('number', 'Humidity Inside');
$.each(results, function (i, row) {
Sdata.addRow([
(new Date(row.timestamp)),
parseFloat(row.outside_celsius),
parseFloat(row.outside_fahrenheit),
parseFloat(row.inside_celsius),
parseFloat(row.inside_fahrenheit),
parseFloat(row.inside_humidity)]);
}); */
var outsideC = parseFloat(results[0].outside_celsius);
var outsideF = parseFloat(results[0].outside_fahrenheit);
var insideC = parseFloat(results[0].inside_celsius);
var insideF = parseFloat(results[0].inside_fahrenheit);
var humidity = parseFloat(results[0].inside_humidity);
// 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: 400,
height: 120,
redFrom: 90,
redTo: 100,
yellowFrom: 75,
...