<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div">
Vattenförbrukning 24 tim
<div class="gauge" id="chart_1"></div>
Reservoar
<div class="gauge" id="chart_2"></div>
Badtemperatur
<div class="gauge" id="chart_3"></div>
</div>
.gauge {
vertical-align: top;
}
var channel_id = 48270;
var api_key = '3OTEZ94NP952PHF7';
var chart;
var p3 =21.5;
function displayData1(point) {
data.setValue(0, 0, gauge_name);
data.setValue(0, 1, point);
chart.draw(data, options);
}
function loadData() {
$.getJSON('https://api.thingspeak.com/channels/' + channel_id + '/feed/last.json?api_key=' + api_key, function(data) {
var p1 = data.field2;
if (p1) {displayData1(p1)}
})
}
google.charts.load('current', {
packages: ['gauge']
}).then(function () {
var data1 = google.visualization.arrayToDataTable([
['Label', 'Value'],
['m3', p1]
]);
var data2 = google.visualization.arrayToDataTable([
['Label', 'Value'],
['%', p2]
]);
var data3 = google.visualization.arrayToDataTable([
['Label', 'Value'],
['°C', p3]
]);
var options1 = {
width: 133, height: 120,
greenFrom: 0, greenTo:18,
yellowFrom: 18, yellowTo: 22,
redFrom: 22, redTo: 30,
majorTicks: ['0', '5', '10', '15', '20', '25', '30'],
minorTicks: 5, max: 30
};
var options2 = {
width: 133, height: 120,
majorTicks: ['0', '20','40', '60', '80', '100'],
minorTicks: 5, min: 0, max: 100
};
var options3 = {
width: 133, height: 120,
majorTicks: ['5', '10','15', '20', '25'],
minorTicks: 5, min: 5, max: 25,
};
var chart1 = new google.visualization.Gauge(document.getElementById('chart_1'));
var chart2 = new google.visualization.Gauge(document.getElementById('chart_2'));
var chart3 = new google.visualization.Gauge(document.getElementById('chart_3'));
loadData();
setInterval(loadData, 15000);
chart1.draw(data1, options1);
chart2.draw(data2, options2);
chart3.draw(data3, options3);
/*setInterval(function() {
data1.setValue(0, 1, 40 + Math.round(60 * Math.random()));
chart1.draw(data1, options1);
}, 15000);
setInterval(function() {
data2.setValue(0, 1, 40 + Math.round(60 * Math.random()));
chartOut.draw(data2, options2);
}, 15000);
setInterval(function() {
data3.setValue(0, 1, 60 + Math.round(20 * Math.random()));
chart3.draw(data3, options3);
}, 15000);*/
});