Animate Google Chart from JSON - javascript

All of the examples on how to animate don't cover if the chart is created by JSON data. They all use static data. (See Transition Animation.)
This is my code that gets my data via JSON.
<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
$.post('/Weight/WeightAreaChartData', {}, function (data) {
var tdata = new google.visualization.arrayToDataTable(data);
var options = {
title: 'Weight Lost & Gained This Month',
hAxis: { title: 'Day of Month', titleTextStyle: { color: '#1E4A08'} },
vAxis: { title: 'Lbs.', titleTextStyle: { color: '#1E4A08' } },
chartArea: { left: 50, top: 30, width: "75%" },
colors: ['#FF8100'],
animation:{
duration: 1000,
easing: 'in'
},
};
var chart = new google.visualization.AreaChart(
document.getElementById('chart_div')
);
chart.draw(tdata, options);
});
}
</script>
I have a button that redraws the chart successfully. However, it doesn't animate. How can I make the chart animate? Thank you for your help.
$('#myBtn').click(function () {
drawChart();
});


Maybe cause you're creating the chart everytime?
Try to make chart a global variable and try again


As eluded to by #FelipeFonseca, you're overwriting the chart each time #myBtn is clicked. Try doing this instead:
(function (global, undef) {
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
var options = {
title: 'Weight Lost & Gained This Month',
hAxis: { title: 'Day of Month', titleTextStyle: { color: '#1E4A08'} },
vAxis: { title: 'Lbs.', titleTextStyle: { color: '#1E4A08' } },
chartArea: { left: 50, top: 30, width: "75%" },
colors: ['#FF8100'],
animation:{
duration: 1000,
easing: 'in'
}
};
var chart;
function drawChart() {
$.post('/Weight/WeightAreaChartData', {}, function (data) {
var tdata = new google.visualization.arrayToDataTable(data);
if (!chart) {
chart = new google.visualization.AreaChart(
document.getElementById('chart_div')
);
}
chart.draw(tdata, options);
});
}
})(this);

Related

Google Donut Chart

I ran into the problem of implementing graphics via google chart, it is necessary to make a three sectional diagram, please tell me how to do it better.
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Effort', 'Amount given'],
['My all', 100],
['My alsl', 100],
['My alsl', 100],
]);
var options = {
pieHole: 0.85,
tooltip: { trigger: 'none' },
pieSliceText: 'none',
pieSliceTextStyle: {
color: 'transparent',
},
legend: 'none',
slices: {
0: { color: '#f9b231' },
1: { color: '#7e430f' },
2: { color: '#f8d597' }
}
};
var chart = new google.visualization.PieChart(document.getElementById('donut_single'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="donut_single" style="width: 900px; height: 500px;"></div>

Google Chart is showing no trendline, doesn't show an error

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>

Google chart only loads on refresh of page

Am a beginner using google charts/js. My google chart below loads fine, however there are times when the chart area loads blank html, and when I refresh the page it displays correctly.
I'm not sure why this is. It seems to do this on all browsers. This seems to indicate it could be with Mozilla, but the problem persists...
<script type="text/javascript">
google.charts.load('current', {
packages: ['corechart']
}).then(function drawChart() {
<?php
$imei = $bboxx_imei;
$result = shell_exec('Daily_Data_Retriever_ishackweb.py ' . $imei.' '. $end.' '.$start); #imei=sys.arg[1] end=sys.arg[2] start=sys.arg[3]
?>
var jsonData = <?php echo $result; ?> //{"Charge Current, (A)":{"2017-11-16T00:00:00.000Z":0.001373312,"2017-11-16T00:01:00.000Z":0.001373312,"2017-11-16T00:02:00.000Z":0.001373312,"2017-11-16T00:03:00.000Z":0.001373312,"2017-11-16T00:04:00.000Z":0.001373312},"Battery Voltage, (V)":{"2017-11-16T00:00:00.000Z":12.9267109178,"2017-11-16T00:01:00.000Z":12.9267109178,"2017-11-16T00:02:00.000Z":12.9267109178,"2017-11-16T00:03:00.000Z":12.9267109178,"2017-11-16T00:04:00.000Z":12.9267109178}};
var chartCols = ['Datetime'];
Object.keys(jsonData).forEach(function (column) {
chartCols.push(column);
});
// build list of date
var dateValues = [];
Object.keys(jsonData).forEach(function (column) {
Object.keys(jsonData[column]).forEach(function (dateValue) {
if (dateValues.indexOf(dateValue) === -1) {
dateValues.push(dateValue);
}
});
});
// build chart data
var chartData = [chartCols];
dateValues.forEach(function (dateValue) {
var row = [new Date(dateValue)];
Object.keys(jsonData).forEach(function (column) {
row.push(jsonData[column][dateValue] || null);
});
chartData.push(row);
});
var data = google.visualization.arrayToDataTable(chartData);
var options = {
chartArea: {width:'90%', height:'85%'},
//title: 'Battery Voltage and Panel Charge',
curveType: 'function',
legend: { position: 'bottom' },
vAxes: {0: {viewWindowMode:'explicit',
viewWindow:{
max:16,
min:11
},
gridlines: {color: 'transparent'},
},
1: {viewWindowMode:'explicit',
viewWindow:{
max:5,
min:0
},
},
},
series: {0: {targetAxisIndex:1},
1: {targetAxisIndex:0},
},
};
var chart = new google.visualization.LineChart(document.getElementById('line_chart'));
chart.draw(data, options);
$(window).resize(function(){
drawChart()
});
});
</script>

when using a function inline / anonymously, although you can provide a name,
you will not be able to call that same function again, by it's name
google.charts.load('current', {
packages: ['corechart']
}).then(function drawChart() { // <-- cannot call this again, no name needed
...
instead, declare the function separately, then pass a reference where needed,
using the name of the function
google.charts.load('current', {
packages: ['corechart']
}).then(drawChart);
$(window).resize(drawChart);
function drawChart() {
...
}
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(drawChart);
$(window).resize(drawChart);
function drawChart() {
var jsonData = {"Charge Current, (A)":{"2017-11-16T00:00:00.000Z":0.001373312,"2017-11-16T00:01:00.000Z":0.001373312,"2017-11-16T00:02:00.000Z":0.001373312,"2017-11-16T00:03:00.000Z":0.001373312,"2017-11-16T00:04:00.000Z":0.001373312},"Battery Voltage, (V)":{"2017-11-16T00:00:00.000Z":12.9267109178,"2017-11-16T00:01:00.000Z":12.9267109178,"2017-11-16T00:02:00.000Z":12.9267109178,"2017-11-16T00:03:00.000Z":12.9267109178,"2017-11-16T00:04:00.000Z":12.9267109178}};
var chartCols = ['Datetime'];
Object.keys(jsonData).forEach(function (column) {
chartCols.push(column);
});
// build list of date
var dateValues = [];
Object.keys(jsonData).forEach(function (column) {
Object.keys(jsonData[column]).forEach(function (dateValue) {
if (dateValues.indexOf(dateValue) === -1) {
dateValues.push(dateValue);
}
});
});
// build chart data
var chartData = [chartCols];
dateValues.forEach(function (dateValue) {
var row = [new Date(dateValue)];
Object.keys(jsonData).forEach(function (column) {
row.push(jsonData[column][dateValue] || null);
});
chartData.push(row);
});
var data = google.visualization.arrayToDataTable(chartData);
var options = {
chartArea: {width:'90%', height:'85%'},
//title: 'Battery Voltage and Panel Charge',
curveType: 'function',
legend: { position: 'bottom' },
vAxes: {
0: {
viewWindowMode:'explicit',
viewWindow:{
max:16,
min:11
},
gridlines: {color: 'transparent'},
},
1: {
viewWindowMode:'explicit',
viewWindow:{
max:5,
min:0
},
},
},
series: {
0: {targetAxisIndex:1},
1: {targetAxisIndex:0},
},
};
var chart = new google.visualization.LineChart(document.getElementById('line_chart'));
chart.draw(data, options);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="line_chart"></div>

Javascript charts as input

I have a requirement as below.
I need to input time series data (day data) using a graph. The data is usually like below but the profile can be changed depending upon the situation.
Right now the data is being manually entered in textboxes which makes it very difficult.
I am wondering whether there are solutions that let user draw on a chart and generate the data in the back. In other words, the user picks certain points and the profile is drawn.

see following working snippet, click on the chart to add a data point...
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable({
"cols": [
{"label": "x", "type": "number"},
{"label": "y", "type": "number"}
]
});
var axisMax = 10;
var ticks = [];
for (var i = 0; i <= axisMax; i = i + 0.5) {
ticks.push(i);
}
var options = {
chartArea: {
bottom: 64,
height: '100%',
left: 64,
top: 24,
width: '100%'
},
hAxis: {
format: '0.0',
textStyle: {
fontSize: 9
},
ticks: ticks,
title: data.getColumnLabel(0),
viewWindow: {
min: 0,
max: axisMax
}
},
height: 600,
legend: {
position: 'top'
},
pointSize: 4,
vAxis: {
format: '0.0',
textStyle: {
fontSize: 9
},
ticks: ticks,
title: data.getColumnLabel(1),
viewWindow: {
min: 0,
max: axisMax
}
}
};
var tableDiv = document.getElementById('table_div');
var table = new google.visualization.Table(tableDiv);
var chartDiv = document.getElementById('chart_div');
var chart = new google.visualization.LineChart(chartDiv);
var chartLayout = null;
google.visualization.events.addListener(chart, 'ready', function () {
chartLayout = chart.getChartLayoutInterface();
});
google.visualization.events.addListener(chart, 'click', function (sender) {
data.addRow([
chartLayout.getHAxisValue(sender.x),
chartLayout.getVAxisValue(sender.y)
]);
drawChart();
});
function drawChart() {
chart.draw(data, options);
table.draw(data);
}
window.addEventListener('resize', drawChart, false);
drawChart();
},
packages:['corechart', 'table']
});
div {
text-align: center;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<div id="table_div"></div>

Turning Google trend visual query into Google GEOchart

I'm trying to pass some data from the Google trends to a Google chart but i'm getting the Incompatible data table: Error: Table contains more columns than expected (Expecting 2 columns) error
I just assumed it would work automatically from one I query it into a chart rather than get an error. The code i'm getting an error with is:
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
var findTitle = $(".input-wrapper input").val();
function drawChart() {
console.log(findTitle);
var query = new google.visualization.Query('https://www.google.com/trends/fetchComponent?hl=en-US&q=battlefield%201&cid=GEO_MAP_0_0&export=3&w=500&h=300&gprop=youtube&date=today%201-m');
query.send(function (response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' - ' + response.getDetailedMessage());
return;
}
data = response.getDataTable();
var view = new google.visualization.DataView(data);
view.setColumns([{
calc: function (data, row) {
return data.getFormattedValue(row, 0);
},
type: 'string',
label: data.getColumnLabel(0)
}, 1]);
var chart = new google.visualization.GeoChart(document.getElementById('chart_region_top'));
chart.draw(view, {
chartArea: {
height: '80%',
width: '100%'
},
});
chart.draw(data, {
width: 1000,
height: 500,
title: 'Tag: Battlefield 1',
colors: ['#ff0000'],
backgroundColor: '#2D2D2D',
legendTextStyle: { color: '#FFF', position: 'bottom' },
titleTextStyle: { color: '#FFF' },
hAxis: {
textStyle: {color: '#FFF'},
gridlines: {color: '#FFF'}
},
vAxis: {
textStyle: {color: '#FFF'},
gridlines: {color: '#FFF'}
}
});
});
}
Any help into why i'm getting this error and a solution is greatly appreciated :)

since the GeoChart expects two columns,
use a DataView to extract the first two columns from the DataTable
also, need to load 'geochart' package, see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages: ['geochart']
});
function drawChart() {
var query = new google.visualization.Query('https://www.google.com/trends/fetchComponent?hl=en-US&q=battlefield%201&cid=GEO_MAP_0_0&export=3&w=500&h=300&gprop=youtube&date=today%201-m');
query.send(function (response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' - ' + response.getDetailedMessage());
return;
}
var view = new google.visualization.DataView(response.getDataTable());
view.setColumns([0, 1]);
var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(view, {
legend: 'none'
});
});
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Categories