We Keep Coding

Why my Chart.js doesn't update and display in html? ASP.NET MVC using SignalR

I am new and I want to update and display my chart.js in HTML with data got from my database using sinalr script. I used alert and it has value but still nothing in my chart. Can you check and show me what's the problem in my code. Thank you so much.
SignalR script :
<script type="text/javascript">
$(function () {
//Proxy created on the fly
var cus = $.connection.cusHub;
//Declare a function on the job hub so the server can invoke
cus.client.displayValue = function () {
getData();
};
//Start the connection
$.connection.hub.start();
getData();
});
function getData() {
var $tbl = $('#tblValue');
$.ajax({
url: $("#Get").val(),
type: 'GET',
datatype: 'json',
success: function (data) {
$tbl.empty();
$.each(data.listCus, function (i, model) {
$tbl.append
(
//'<tr>' +
//'<td>' + model.DeviceID + '</td>' +
//'<td>' + model.Value + '</td>' +
//'</tr>'
model.Value
);
});
}
});
}
</script>
Display in HTML by tag ID :
<h2 id="tblValue" class="number" onchange="UpdateChart()"> </h2>
Chart.js code :
<script>
var ctx = document.getElementById("percent-chart2");
var myVar = setInterval(GetValue, 5000);
function GetValue() {
const vals = parseFloat(document.getElementById("tblValue").innerHTML);
//alert(vals);
return vals;
}
const my_val = GetValue();
if (ctx) {
ctx.height = 209;
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
datasets: [
{
label: "My First dataset",
data: [my_val, my_val, my_val],
//data: [vals, vals, vals],
backgroundColor: [
'#00b5e9',
'#fa4251',
'#006400'
],
hoverBackgroundColor: [
'#00b5e9',
'#fa4251',
'#006400'
],
borderWidth: [
0, 0, 0
],
hoverBorderColor: [
'transparent',
'transparent',
'transparent'
]
}
],
labels: [
'STATION 1',
'STATION 2',
'STATION 3'
]
},
options: {
maintainAspectRatio: false,
responsive: true,
cutoutPercentage: 87,
animation: {
animateScale: true,
animateRotate: true
},
legend: {
display: false,
position: 'bottom',
labels: {
fontSize: 14,
fontFamily: "Poppins,sans-serif"
}
},
tooltips: {
titleFontFamily: "Poppins",
xPadding: 15,
yPadding: 10,
caretPadding: 0,
bodyFontSize: 16,
}
}
});
}
function UpdateChart() {
var updateValues = [my_val, my_val, my_val];
myChart.data.datasets[0].data = updateValues;
myChart.update();
}
</script>

Create a Google Chart in javascript with JSON data

I need a column chart data with JSON, in order to automate this chart, but i dont no how do this.
So this is my JS Code:
function drawChart() {
const container = document.querySelector('#chart');
let chart = new google.visualization.ColumnChart(container);
//Informações data.json
let dataRequest = new Request("./datas/data.json");
fetch(dataRequest)
.then(function(resp) {
return resp.json();
})
.then(function(data) {
console.log(data);
});
// Informações gráficos
let data = new google.visualization.arrayToDataTable([
["Volume", "Valor"],
["DA", 67],
["CIF", 23],
["Expurgo", 45]
]);
const options = {
titlePosition: 'none',
colors: ['#ed4a0e', '#15466e'],
backgroundColor: 'transparent',
animation: {
startup: true,
duration: 1000,
easing: 'out',
},
hAxis: { textStyle: { color: 'white' }, titleTextStyle: { color: 'white', fontSize: 15 } },
vAxis: { textStyle: { color: 'white' }, titleTextStyle: { color: 'white', fontSize: 15 } },
chartArea: { width: 250, height: 200 },
legend: {
textStyle: { color: '#ffffff', fontSize: 13 }
}
};
chart.draw(data, options)
};
My json:
[
["Volume", "Valor"],
["DA", 67],
["CIF", 23],
["Expurgo", 45]
]
I never do this before, and need a little help,if someone help whit this
(Sorry for my bad english)

Add "false" as last parameter
var data = google.visualization.arrayToDataTable([
["Volume", "Valor"],
["DA", 67],
["CIF", 23],
["Expurgo", 45]
],
false); // 'false' means that the first row contains labels, not data.

Google pie chart - legend: { position: 'labeled' } not working

I am displaying pie-chart as a tootip inside a column chart using google charts.
In the pie-chart, I want to do legend: { position: 'labeled' }, but it is not displaying the bars of the Column chart, and so cannot display the Pie chart.
It is only displaying the gridlines.
My current code:
//Create Charts
function AggregateCharts(aggregateResult){
$('#hidden_div').show();
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback( function(){ drawTooltipCharts(aggregateResult) });
}
// Draw tool tip charts
function drawTooltipCharts(aggregateResult) {
//set bar chart data
primaryData=[];
if(aggregateResult){
aggregateResult.map(data=>{
if(data.Count>0 || data.High>0 || data.Medium>0)
{
//Set Options
var tooltipOptions = {
title: 'Data Title',
isStacked: true,
pieHole: 0.4,
sliceVisibilityThreshold:0,
colors: ['#c1c1c1','#0074AA','#1DB2F7','#F7941D' ],
legendTextStyle: { color: '#1DB2F7' ,fontSize: 12},
titleTextStyle: { color: '#1DB2F7', alignment: 'center',fontSize: 15},
chartArea: {width:510, height: 250} ,
legend: { position: 'labeled' },
pieStartAngle: 100,
pieSliceTextStyle: { fontSize:12 },
};
//Create chart View
var view = new google.visualization.DataTable();
view.addColumn('string', 'Criteria');
view.addColumn('number', 'Users');
var total=total;
var Count=data.Count;
var High=data.High;
var Medium=data.Medium;
//calculation part
var Countpercentage =((Count/total).toFixed(2))*100;
var Highpercentage =((High/total).toFixed(2))*100;
var Mediumpercentage =((Medium/total).toFixed(2))*100;
var NoCriteriaEndorsed= 100-(Math.floor(Countpercentage) + Math.floor(Highpercentage) + Math.floor(Mediumpercentage) );
var tooltipData=[];
tooltipData.push(["No Criteria Endorsed",NoCriteriaEndorsed]);
tooltipData.push(["50-69% Criteria Endorsed",Mediumpercentage]);
tooltipData.push(["70-99% Criteria Endorsed",Highpercentage]);
tooltipData.push(["100% Criteria Endorsed",Countpercentage]);
//Add total rows
view.addRows(tooltipData);
var hiddenDiv = document.getElementById('hidden_div');
var tooltipChart = new google.visualization.PieChart(hiddenDiv);
google.visualization.events.addListener(tooltipChart, 'ready', function() {
// Get the PNG of the chart and set is as the src of an img tag.
var tooltipImg = '<img src="' + tooltipChart.getImageURI() + '">';
// Add the new tooltip image to your data rows.
primaryData.push([data.Diagnosis,data.Count,tooltipImg,data.High,tooltipImg,data.Medium,tooltipImg]);
});
tooltipChart.draw(view, tooltipOptions);
}
})
//Create bar chart
drawBarChart(primaryData);
}
}
function drawBarChart(primaryData) {
var fromDate=$("#fromdate").val()?$("#fromdate").val():getMinDate(AggregateData)
var tooltipData = new google.visualization.DataTable();
tooltipData.addColumn('string', 'Event');
tooltipData.addColumn('number', '100% Criteria Endorsed');
// Add a new column for your tooltips.
tooltipData.addColumn({
type: 'string',
label: 'Tooltip Chart',
role: 'tooltip',
'p': {'html': true}
});
tooltipData.addColumn('number', '70-99% Criteria Endorsed');
// Add a new column for your tooltips.
tooltipData.addColumn({
type: 'string',
label: 'Tooltip Chart',
role: 'tooltip',
'p': {'html': true}
});
tooltipData.addColumn('number', '50-69% Criteria Endorsed');
// Add a new column for your tooltips.
tooltipData.addColumn({
type: 'string',
label: 'Tooltip Chart',
role: 'tooltip',
'p': {'html': true}
});
// Add your data (with the newly added tooltipImg).
tooltipData.addRows(primaryData);
var minwidth=tooltipData.getNumberOfRows() <25 ?(25*50) : tooltipData.getNumberOfRows() *50;
var primaryOptions = {
title: 'Results' ,
legend: 'none',
tooltip: {isHtml: true},
isStacked: true,
colors: ['#F7941D', '#1DB2F7', '#0074AA'],
legendTextStyle: { color: '#000000' , fontSize: 20 },
titleTextStyle: { color: '#000000', fontSize: 16, fontName: 'Calibri Light', bold: true },
width: minwidth,
bar: {groupWidth:15},
hAxis: {
textStyle: { color: "#1DB2F7" ,fontSize: 8, bold: true },
gridlines: { count: 4, color: "#1DB2F7" },
baselineColor: '#1DB2F7',
},
vAxis: {
title: 'Number of Respondents',
titleTextStyle: { color: '#000000', fontSize: 18, fontName: 'Calibri Light', bold: true},
textStyle: { color: "#1DB2F7", fontSize: 10, bold: true },
gridlines: { count: 4 , color: "#1DB2F7" },
baselineColor: '#1DB2F7' ,
},
};
var visibleDiv = document.getElementById('visible_div');
var primaryChart = new google.visualization.ColumnChart(visibleDiv);
primaryChart.draw(tooltipData, primaryOptions);
CustomOptions(primaryOptions);
var btndownloadchart = document.getElementById('downloadchart');
btndownloadchart.addEventListener('click', function () {
this.href= primaryChart.getImageURI();
}, false);
}
//Date format to display in chart legend
function dateFormat(requestDate){
var date = requestDate?new Date(requestDate):new Date();
var dateString =date.toLocaleString('en', { month: 'long' })+" "+ date.getDate() +", "+ date.getFullYear() ;
return dateString;
}
//get mindate value for aggregate if from date not selected initially..
function getMinDate(AggregateData){
if(AggregateData){
var minDate = Math.min.apply(null, AggregateData.map(function(o) { return new Date(o.CreatedDate); }))
return date = new Date(minDate)
}
return new Date()
}
function CustomOptions(primaryOptions) {
var $container = $('#visible_div');
var svg = $container.find('svg') ;
var svgWidth=$container.find('svg').width();
var $titleElemWidth = parseInt($container.find('svg').width()/8) ;
var svgMargin= ('-' +((svgWidth/15)>170?170:(svgWidth/15))+ 'px');
svg.css("margin-left", svgMargin);
var $titleElem = $container.find("text:contains(" + primaryOptions.vAxis.title +")");
$titleElem.attr('y',$titleElemWidth<320?320:$titleElemWidth);
//Hide tooltip chart
$('#hidden_div').hide();
}
]]>
When I do legend: { alignment: 'center' } in the 'tooltipOptions', the Column chart and the Pie-chart is displaying correctly.
But I want to do 'legend: { position: 'labeled' }', as the Pie-Chart slices is not displaying the percentage for small values.

Try passing the following to your options:
pieSliceTextStyle: {
color: 'white',
fontSize: '13',
top: 10,
left: 50,
position: 'start',
},

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>

Animate Google Chart from JSON

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);