I try to add a trendline to my Google LineChart. It just doesn't show up, without any hints why not in my browsers console.
Just copied the option setting from Googles examples. The table data are getting loaded via ajax, I disabled it and added a static string instead for the example.
I thought that I may have do define a series, but I can't really understand what a series is, and how do define one; my inital thought was that it's getting recognised automatically.
My code:
/* global google */
google.charts.load('current', {'packages': ['gauge', 'corechart', 'line']});
google.charts.setOnLoadCallback(drawAll);
function drawAll() {
drawTrendlines();
}
var temp_line;
function drawTrendlines() {
var line_data = jsonString;
function ajaxLines() {
console.log("updated lines");
temp_line.setDataTable(jsonString);
temp_line.draw();
setTimeout(ajaxLines, 60 * 1000);
}
var data = new google.visualization.DataTable(line_data);
var options = {
lineWidth: 3,
trendlines: { 0: {} },
height: 400,
hAxis: {
title: 'Zeit',
titleTextStyle: {
color: '#cccccc'
},
baselineColor: '#cccccc'
},
vAxis: {
title: 'Temperatur',
minValue: 20,
maxValue: 29,
titleTextStyle: {
color: '#cccccc'
},
baselineColor: '#cccccc'
},
colors: ['#AB0D06', '#007329'],
curveType: 'function',
backgroundColor: '#000'
};
temp_line = new google.visualization.ChartWrapper({
chartType: 'LineChart',
dataDataTable: data,
options: options,
containerId: 'temp_line'
});
temp_line.draw();
ajaxLines();
}
//Those data will be loaded via ajax when running on server
var jsonString = '{"cols":[{"label":"Mins","type":"string"},{"label":"Temp","type":"number"}],"rows":[{"c":[{"v":"02.02, 18:18"},{"v":"27.3","f":"27.3\u00b0"}]},{"c":[{"v":"02.02, 18:22"},{"v":"27.3","f":"27.3\u00b0"}]},{"c":[{"v":"02.02, 18:26"},{"v":"27.4","f":"27.4\u00b0"}]},{"c":[{"v":"02.02, 18:30"},{"v":"27.0","f":"27.0\u00b0"}]},{"c":[{"v":"02.02, 18:34"},{"v":"26.9","f":"26.9\u00b0"}]},{"c":[{"v":"02.02, 18:38"},{"v":"26.9","f":"26.9\u00b0"}]},{"c":[{"v":"02.02, 23:34"},{"v":"24.2","f":"24.2\u00b0"}]},{"c":[{"v":"02.02, 23:38"},{"v":"24.4","f":"24.4\u00b0"}]},{"c":[{"v":"02.02, 23:42"},{"v":"24.7","f":"24.7\u00b0"}]},{"c":[{"v":"02.02, 23:46"},{"v":"24.8","f":"24.8\u00b0"}]},{"c":[{"v":"02.02, 23:50"},{"v":"24.9","f":"24.9\u00b0"}]},{"c":[{"v":"02.02, 23:54"},{"v":"25.0","f":"25.0\u00b0"}]},{"c":[{"v":"02.02, 23:58"},{"v":"25.1","f":"25.1\u00b0"}]},{"c":[{"v":"03.02, 0:02"},{"v":"25.2","f":"25.2\u00b0"}]},{"c":[{"v":"03.02, 0:06"},{"v":"25.3","f":"25.3\u00b0"}]},{"c":[{"v":"03.02, 0:10"},{"v":"25.3","f":"25.3\u00b0"}]},{"c":[{"v":"03.02, 0:14"},{"v":"25.3","f":"25.3\u00b0"}]},{"c":[{"v":"03.02, 0:18"},{"v":"25.3","f":"25.3\u00b0"}]},{"c":[{"v":"03.02, 0:22"},{"v":"25.3","f":"25.3\u00b0"}]},{"c":[{"v":"03.02, 0:26"},{"v":"25.3","f":"25.3\u00b0"}]},{"c":[{"v":"03.02, 0:30"},{"v":"25.3","f":"25.3\u00b0"}]},{"c":[{"v":"03.02, 0:34"},{"v":"25.3","f":"25.3\u00b0"}]},{"c":[{"v":"03.02, 0:38"},{"v":"25.4","f":"25.4\u00b0"}]},{"c":[{"v":"03.02, 0:42"},{"v":"25.4","f":"25.4\u00b0"}]},{"c":[{"v":"03.02, 0:46"},{"v":"25.5","f":"25.5\u00b0"}]},{"c":[{"v":"03.02, 0:50"},{"v":"25.5","f":"25.5\u00b0"}]},{"c":[{"v":"03.02, 0:54"},{"v":"25.5","f":"25.5\u00b0"}]},{"c":[{"v":"03.02, 0:58"},{"v":"25.5","f":"25.5\u00b0"}]},{"c":[{"v":"03.02, 1:02"},{"v":"25.5","f":"25.5\u00b0"}]},{"c":[{"v":"03.02, 1:06"},{"v":"25.5","f":"25.5\u00b0"}]},{"c":[{"v":"03.02, 1:10"},{"v":"25.5","f":"25.5\u00b0"}]},{"c":[{"v":"03.02, 1:14"},{"v":"25.5","f":"25.5\u00b0"}]},{"c":[{"v":"03.02, 1:18"},{"v":"25.4","f":"25.4\u00b0"}]},{"c":[{"v":"03.02, 1:22"},{"v":"25.5","f":"25.5\u00b0"}]},{"c":[{"v":"03.02, 1:26"},{"v":"25.5","f":"25.5\u00b0"}]},{"c":[{"v":"03.02, 1:30"},{"v":"25.5","f":"25.5\u00b0"}]},{"c":[{"v":"03.02, 1:34"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 1:38"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 1:42"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 1:46"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 1:50"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 1:54"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 1:58"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 2:02"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 2:06"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 2:10"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 2:14"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 2:18"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 2:22"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 2:26"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 2:30"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 2:34"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 2:38"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 2:42"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 2:46"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 2:50"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 2:54"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 2:58"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 3:02"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 3:06"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 3:10"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 3:14"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 3:18"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 3:22"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 3:26"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 3:30"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 3:34"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 3:38"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 3:42"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 3:46"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 3:50"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 3:54"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 3:58"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 4:02"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 4:06"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 4:10"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 4:14"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 4:18"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 4:22"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 4:26"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 4:30"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 4:34"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 4:38"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 4:42"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 4:46"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 4:50"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 4:54"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 4:58"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 5:02"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 5:06"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 5:10"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 5:14"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 5:18"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 5:22"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 5:26"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 5:30"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 5:34"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 5:38"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 5:42"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 5:46"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 5:50"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 5:54"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 5:58"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 6:02"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 6:06"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 6:10"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 6:14"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 6:18"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 6:22"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 6:26"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 6:30"},{"v":"25.8","f":"25.8\u00b0"}]},{"c":[{"v":"03.02, 6:34"},{"v":"25.8","f":"25.8\u00b0"}]},{"c":[{"v":"03.02, 6:38"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 6:42"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 6:46"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 6:50"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 6:54"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 6:58"},{"v":"25.8","f":"25.8\u00b0"}]},{"c":[{"v":"03.02, 7:02"},{"v":"25.8","f":"25.8\u00b0"}]},{"c":[{"v":"03.02, 7:06"},{"v":"25.8","f":"25.8\u00b0"}]},{"c":[{"v":"03.02, 7:10"},{"v":"25.8","f":"25.8\u00b0"}]},{"c":[{"v":"03.02, 7:14"},{"v":"25.8","f":"25.8\u00b0"}]},{"c":[{"v":"03.02, 7:18"},{"v":"25.8","f":"25.8\u00b0"}]},{"c":[{"v":"03.02, 7:22"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 7:26"},{"v":"25.8","f":"25.8\u00b0"}]},{"c":[{"v":"03.02, 7:30"},{"v":"25.8","f":"25.8\u00b0"}]},{"c":[{"v":"03.02, 7:34"},{"v":"25.8","f":"25.8\u00b0"}]},{"c":[{"v":"03.02, 7:38"},{"v":"25.8","f":"25.8\u00b0"}]},{"c":[{"v":"03.02, 7:42"},{"v":"25.8","f":"25.8\u00b0"}]},{"c":[{"v":"03.02, 7:46"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 7:50"},{"v":"25.8","f":"25.8\u00b0"}]},{"c":[{"v":"03.02, 7:54"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 7:58"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 8:02"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 8:06"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 8:10"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 8:14"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 8:18"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 8:22"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 8:26"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 8:30"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 8:34"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 8:38"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 8:42"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 8:46"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 8:50"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 8:54"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 8:58"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 9:02"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 9:06"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 9:10"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 9:14"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 9:18"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 9:22"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 9:26"},{"v":"26.0","f":"26.0\u00b0"}]},{"c":[{"v":"03.02, 9:30"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 9:34"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 9:38"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 9:42"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 9:46"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 9:50"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 9:54"},{"v":"26.0","f":"26.0\u00b0"}]},{"c":[{"v":"03.02, 9:58"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 10:02"},{"v":"26.0","f":"26.0\u00b0"}]},{"c":[{"v":"03.02, 10:06"},{"v":"26.0","f":"26.0\u00b0"}]},{"c":[{"v":"03.02, 10:10"},{"v":"26.0","f":"26.0\u00b0"}]},{"c":[{"v":"03.02, 10:14"},{"v":"26.0","f":"26.0\u00b0"}]},{"c":[{"v":"03.02, 10:18"},{"v":"26.0","f":"26.0\u00b0"}]},{"c":[{"v":"03.02, 10:22"},{"v":"26.0","f":"26.0\u00b0"}]},{"c":[{"v":"03.02, 10:26"},{"v":"26.0","f":"26.0\u00b0"}]},{"c":[{"v":"03.02, 10:30"},{"v":"26.1","f":"26.1\u00b0"}]},{"c":[{"v":"03.02, 10:34"},{"v":"26.0","f":"26.0\u00b0"}]},{"c":[{"v":"03.02, 10:38"},{"v":"26.0","f":"26.0\u00b0"}]},{"c":[{"v":"03.02, 10:42"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 10:46"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 10:50"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 10:54"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 10:58"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 11:02"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 11:06"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 11:10"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 11:14"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 11:18"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 11:22"},{"v":"26.0","f":"26.0\u00b0"}]},{"c":[{"v":"03.02, 11:26"},{"v":"26.1","f":"26.1\u00b0"}]},{"c":[{"v":"03.02, 11:30"},{"v":"26.2","f":"26.2\u00b0"}]},{"c":[{"v":"03.02, 11:34"},{"v":"26.3","f":"26.3\u00b0"}]},{"c":[{"v":"03.02, 11:38"},{"v":"26.3","f":"26.3\u00b0"}]},{"c":[{"v":"03.02, 11:42"},{"v":"26.3","f":"26.3\u00b0"}]},{"c":[{"v":"03.02, 11:46"},{"v":"26.4","f":"26.4\u00b0"}]},{"c":[{"v":"03.02, 11:50"},{"v":"26.5","f":"26.5\u00b0"}]},{"c":[{"v":"03.02, 11:54"},{"v":"26.5","f":"26.5\u00b0"}]},{"c":[{"v":"03.02, 11:58"},{"v":"26.5","f":"26.5\u00b0"}]},{"c":[{"v":"03.02, 12:02"},{"v":"26.6","f":"26.6\u00b0"}]},{"c":[{"v":"03.02, 12:06"},{"v":"26.6","f":"26.6\u00b0"}]},{"c":[{"v":"03.02, 12:10"},{"v":"26.6","f":"26.6\u00b0"}]},{"c":[{"v":"03.02, 12:14"},{"v":"26.6","f":"26.6\u00b0"}]},{"c":[{"v":"03.02, 12:18"},{"v":"26.6","f":"26.6\u00b0"}]},{"c":[{"v":"03.02, 12:22"},{"v":"26.6","f":"26.6\u00b0"}]},{"c":[{"v":"03.02, 12:26"},{"v":"26.7","f":"26.7\u00b0"}]},{"c":[{"v":"03.02, 12:30"},{"v":"26.7","f":"26.7\u00b0"}]}]}';
body {
background-color: black;
}
.gauge {
display: inline-block;
margin-top:20px;
}
#gauges {
max-width:900px;
margin:auto;
text-align:center;
}
#lines {
margin:auto;
position:relative;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="lines">
<div id="temp_line"></div>
</div>
Thank you in advance.
trendlines are only supported by a continuous x-axis (number, date, etc...)
not a discrete axis (string values)
see following working snippet,
a data view is used to convert the first column to a real date
google.charts.load('current', {
packages: ['gauge', 'corechart', 'line']
}).then(drawTrendlines);
var temp_line;
function drawTrendlines() {
var line_data = jsonString;
function ajaxLines() {
temp_line.setDataTable(view);
temp_line.draw();
setTimeout(ajaxLines, 60 * 1000);
}
var data = new google.visualization.DataTable(line_data);
var view = new google.visualization.DataView(data);
view.setColumns([{
calc: function (dt, row) {
var today = new Date();
var value = dt.getValue(row, 0).replace(' ', '').split(',');
var valueDate = value[0].split('.');
var valueTime = value[1].split(':');
var newValue = new Date(today.getFullYear(), valueDate[1], valueDate[0], valueTime[0], valueTime[1]);
return newValue;
},
label: data.getColumnLabel(0),
type: 'date'
}, 1]);
var options = {
lineWidth: 3,
trendlines: { 0: {} },
height: 400,
hAxis: {
title: 'Zeit',
titleTextStyle: {
color: '#cccccc'
},
baselineColor: '#cccccc'
},
vAxis: {
title: 'Temperatur',
minValue: 20,
maxValue: 29,
titleTextStyle: {
color: '#cccccc'
},
baselineColor: '#cccccc'
},
colors: ['#AB0D06', '#007329'],
curveType: 'function',
//backgroundColor: '#000'
};
temp_line = new google.visualization.ChartWrapper({
chartType: 'LineChart',
dataDataTable: view,
options: options,
containerId: 'temp_line'
});
temp_line.draw();
ajaxLines();
}
var jsonString = '{"cols":[{"label":"Mins","type":"string"},{"label":"Temp","type":"number"}],"rows":[{"c":[{"v":"02.02, 18:18"},{"v":"27.3","f":"27.3\u00b0"}]},{"c":[{"v":"02.02, 18:22"},{"v":"27.3","f":"27.3\u00b0"}]},{"c":[{"v":"02.02, 18:26"},{"v":"27.4","f":"27.4\u00b0"}]},{"c":[{"v":"02.02, 18:30"},{"v":"27.0","f":"27.0\u00b0"}]},{"c":[{"v":"02.02, 18:34"},{"v":"26.9","f":"26.9\u00b0"}]},{"c":[{"v":"02.02, 18:38"},{"v":"26.9","f":"26.9\u00b0"}]},{"c":[{"v":"02.02, 23:34"},{"v":"24.2","f":"24.2\u00b0"}]},{"c":[{"v":"02.02, 23:38"},{"v":"24.4","f":"24.4\u00b0"}]},{"c":[{"v":"02.02, 23:42"},{"v":"24.7","f":"24.7\u00b0"}]},{"c":[{"v":"02.02, 23:46"},{"v":"24.8","f":"24.8\u00b0"}]},{"c":[{"v":"02.02, 23:50"},{"v":"24.9","f":"24.9\u00b0"}]},{"c":[{"v":"02.02, 23:54"},{"v":"25.0","f":"25.0\u00b0"}]},{"c":[{"v":"02.02, 23:58"},{"v":"25.1","f":"25.1\u00b0"}]},{"c":[{"v":"03.02, 0:02"},{"v":"25.2","f":"25.2\u00b0"}]},{"c":[{"v":"03.02, 0:06"},{"v":"25.3","f":"25.3\u00b0"}]},{"c":[{"v":"03.02, 0:10"},{"v":"25.3","f":"25.3\u00b0"}]},{"c":[{"v":"03.02, 0:14"},{"v":"25.3","f":"25.3\u00b0"}]},{"c":[{"v":"03.02, 0:18"},{"v":"25.3","f":"25.3\u00b0"}]},{"c":[{"v":"03.02, 0:22"},{"v":"25.3","f":"25.3\u00b0"}]},{"c":[{"v":"03.02, 0:26"},{"v":"25.3","f":"25.3\u00b0"}]},{"c":[{"v":"03.02, 0:30"},{"v":"25.3","f":"25.3\u00b0"}]},{"c":[{"v":"03.02, 0:34"},{"v":"25.3","f":"25.3\u00b0"}]},{"c":[{"v":"03.02, 0:38"},{"v":"25.4","f":"25.4\u00b0"}]},{"c":[{"v":"03.02, 0:42"},{"v":"25.4","f":"25.4\u00b0"}]},{"c":[{"v":"03.02, 0:46"},{"v":"25.5","f":"25.5\u00b0"}]},{"c":[{"v":"03.02, 0:50"},{"v":"25.5","f":"25.5\u00b0"}]},{"c":[{"v":"03.02, 0:54"},{"v":"25.5","f":"25.5\u00b0"}]},{"c":[{"v":"03.02, 0:58"},{"v":"25.5","f":"25.5\u00b0"}]},{"c":[{"v":"03.02, 1:02"},{"v":"25.5","f":"25.5\u00b0"}]},{"c":[{"v":"03.02, 1:06"},{"v":"25.5","f":"25.5\u00b0"}]},{"c":[{"v":"03.02, 1:10"},{"v":"25.5","f":"25.5\u00b0"}]},{"c":[{"v":"03.02, 1:14"},{"v":"25.5","f":"25.5\u00b0"}]},{"c":[{"v":"03.02, 1:18"},{"v":"25.4","f":"25.4\u00b0"}]},{"c":[{"v":"03.02, 1:22"},{"v":"25.5","f":"25.5\u00b0"}]},{"c":[{"v":"03.02, 1:26"},{"v":"25.5","f":"25.5\u00b0"}]},{"c":[{"v":"03.02, 1:30"},{"v":"25.5","f":"25.5\u00b0"}]},{"c":[{"v":"03.02, 1:34"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 1:38"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 1:42"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 1:46"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 1:50"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 1:54"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 1:58"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 2:02"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 2:06"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 2:10"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 2:14"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 2:18"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 2:22"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 2:26"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 2:30"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 2:34"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 2:38"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 2:42"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 2:46"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 2:50"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 2:54"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 2:58"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 3:02"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 3:06"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 3:10"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 3:14"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 3:18"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 3:22"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 3:26"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 3:30"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 3:34"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 3:38"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 3:42"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 3:46"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 3:50"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 3:54"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 3:58"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 4:02"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 4:06"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 4:10"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 4:14"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 4:18"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 4:22"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 4:26"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 4:30"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 4:34"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 4:38"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 4:42"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 4:46"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 4:50"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 4:54"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 4:58"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 5:02"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 5:06"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 5:10"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 5:14"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 5:18"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 5:22"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 5:26"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 5:30"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 5:34"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 5:38"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 5:42"},{"v":"25.6","f":"25.6\u00b0"}]},{"c":[{"v":"03.02, 5:46"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 5:50"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 5:54"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 5:58"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 6:02"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 6:06"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 6:10"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 6:14"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 6:18"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 6:22"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 6:26"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 6:30"},{"v":"25.8","f":"25.8\u00b0"}]},{"c":[{"v":"03.02, 6:34"},{"v":"25.8","f":"25.8\u00b0"}]},{"c":[{"v":"03.02, 6:38"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 6:42"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 6:46"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 6:50"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 6:54"},{"v":"25.7","f":"25.7\u00b0"}]},{"c":[{"v":"03.02, 6:58"},{"v":"25.8","f":"25.8\u00b0"}]},{"c":[{"v":"03.02, 7:02"},{"v":"25.8","f":"25.8\u00b0"}]},{"c":[{"v":"03.02, 7:06"},{"v":"25.8","f":"25.8\u00b0"}]},{"c":[{"v":"03.02, 7:10"},{"v":"25.8","f":"25.8\u00b0"}]},{"c":[{"v":"03.02, 7:14"},{"v":"25.8","f":"25.8\u00b0"}]},{"c":[{"v":"03.02, 7:18"},{"v":"25.8","f":"25.8\u00b0"}]},{"c":[{"v":"03.02, 7:22"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 7:26"},{"v":"25.8","f":"25.8\u00b0"}]},{"c":[{"v":"03.02, 7:30"},{"v":"25.8","f":"25.8\u00b0"}]},{"c":[{"v":"03.02, 7:34"},{"v":"25.8","f":"25.8\u00b0"}]},{"c":[{"v":"03.02, 7:38"},{"v":"25.8","f":"25.8\u00b0"}]},{"c":[{"v":"03.02, 7:42"},{"v":"25.8","f":"25.8\u00b0"}]},{"c":[{"v":"03.02, 7:46"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 7:50"},{"v":"25.8","f":"25.8\u00b0"}]},{"c":[{"v":"03.02, 7:54"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 7:58"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 8:02"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 8:06"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 8:10"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 8:14"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 8:18"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 8:22"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 8:26"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 8:30"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 8:34"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 8:38"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 8:42"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 8:46"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 8:50"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 8:54"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 8:58"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 9:02"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 9:06"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 9:10"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 9:14"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 9:18"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 9:22"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 9:26"},{"v":"26.0","f":"26.0\u00b0"}]},{"c":[{"v":"03.02, 9:30"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 9:34"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 9:38"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 9:42"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 9:46"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 9:50"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 9:54"},{"v":"26.0","f":"26.0\u00b0"}]},{"c":[{"v":"03.02, 9:58"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 10:02"},{"v":"26.0","f":"26.0\u00b0"}]},{"c":[{"v":"03.02, 10:06"},{"v":"26.0","f":"26.0\u00b0"}]},{"c":[{"v":"03.02, 10:10"},{"v":"26.0","f":"26.0\u00b0"}]},{"c":[{"v":"03.02, 10:14"},{"v":"26.0","f":"26.0\u00b0"}]},{"c":[{"v":"03.02, 10:18"},{"v":"26.0","f":"26.0\u00b0"}]},{"c":[{"v":"03.02, 10:22"},{"v":"26.0","f":"26.0\u00b0"}]},{"c":[{"v":"03.02, 10:26"},{"v":"26.0","f":"26.0\u00b0"}]},{"c":[{"v":"03.02, 10:30"},{"v":"26.1","f":"26.1\u00b0"}]},{"c":[{"v":"03.02, 10:34"},{"v":"26.0","f":"26.0\u00b0"}]},{"c":[{"v":"03.02, 10:38"},{"v":"26.0","f":"26.0\u00b0"}]},{"c":[{"v":"03.02, 10:42"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 10:46"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 10:50"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 10:54"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 10:58"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 11:02"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 11:06"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 11:10"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 11:14"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 11:18"},{"v":"25.9","f":"25.9\u00b0"}]},{"c":[{"v":"03.02, 11:22"},{"v":"26.0","f":"26.0\u00b0"}]},{"c":[{"v":"03.02, 11:26"},{"v":"26.1","f":"26.1\u00b0"}]},{"c":[{"v":"03.02, 11:30"},{"v":"26.2","f":"26.2\u00b0"}]},{"c":[{"v":"03.02, 11:34"},{"v":"26.3","f":"26.3\u00b0"}]},{"c":[{"v":"03.02, 11:38"},{"v":"26.3","f":"26.3\u00b0"}]},{"c":[{"v":"03.02, 11:42"},{"v":"26.3","f":"26.3\u00b0"}]},{"c":[{"v":"03.02, 11:46"},{"v":"26.4","f":"26.4\u00b0"}]},{"c":[{"v":"03.02, 11:50"},{"v":"26.5","f":"26.5\u00b0"}]},{"c":[{"v":"03.02, 11:54"},{"v":"26.5","f":"26.5\u00b0"}]},{"c":[{"v":"03.02, 11:58"},{"v":"26.5","f":"26.5\u00b0"}]},{"c":[{"v":"03.02, 12:02"},{"v":"26.6","f":"26.6\u00b0"}]},{"c":[{"v":"03.02, 12:06"},{"v":"26.6","f":"26.6\u00b0"}]},{"c":[{"v":"03.02, 12:10"},{"v":"26.6","f":"26.6\u00b0"}]},{"c":[{"v":"03.02, 12:14"},{"v":"26.6","f":"26.6\u00b0"}]},{"c":[{"v":"03.02, 12:18"},{"v":"26.6","f":"26.6\u00b0"}]},{"c":[{"v":"03.02, 12:22"},{"v":"26.6","f":"26.6\u00b0"}]},{"c":[{"v":"03.02, 12:26"},{"v":"26.7","f":"26.7\u00b0"}]},{"c":[{"v":"03.02, 12:30"},{"v":"26.7","f":"26.7\u00b0"}]}]}';
body {
background-color: black;
}
.gauge {
display: inline-block;
margin-top:20px;
}
#gauges {
max-width:900px;
margin:auto;
text-align:center;
}
#lines {
margin:auto;
position:relative;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="lines">
<div id="temp_line"></div>
</div>