I'm working on a little student project (sending the temperature from a Raspberry Pi to a server) using the Google Charts API. Within the HTML-Response from my server, a gauge graph is returned. Everything works fine except one little thing: After about 10 seconds the first of the two gauges jumps to its max value (a value which is way to high and which is not part of the data set).
During another project I already had the same error (with 4 gauge graphes). The strange thing is that it always only happens to the first gauge graph.
You can see it yourself under http://141.28.105.163/records ... after about 10 seconds, the first graph jumps from about 21 to 51 or something like that.
And this is the code:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['gauge']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Min', 17],
['Max', 23]
]);
var options = {
minorTicks: 10,
min: 0,
max: 40
};
var chart = new google.visualization.Gauge(document.getElementById('temp_chart'));
setInterval(function() {
data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
chart.draw(data, options);
}, 13000);
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="temp_chart" style="width: 100%; height: 100%"></div>
</body>
</html>
Thanks, that was it. It was the whole part that I just copy&pasted from Google:
Works perfectly without it!