We Keep Coding

How can i implement chart.js destroy in my draw function

I have a doughnut Chart that I would like to update with a new dataset each time I select a different option in my dropdown menu but because my code is in a draw() function, the chart constantly tries to draw itself over and over again which is why I keep getting the error message: Canvas is already in use. Chart with ID '0' must be destroyed before the canvas with ID 'myChart' can be reused.
How would I be able to fix this? The variable named stats is wat I'm trying to update my chart's data with.
var config = {
type: 'doughnut',
data: {
labels: legend,
datasets: [{
backgroundColor: ['rgb(204,0,0)', 'rgb(241,194,50)', 'rgb(41,134,204)', 'rgb(106,168,79)', 'rgb(255,62,153)'],
data: stats,
}]
},
plugins: [hoverLabel],
options: {
radius: this.radius,
hoverOffset: 30,
responsive: true,
maintainAspectRatio: false,
plugins: {
title: {
display: true,
text: "Top 5 causes of death in " + country,
color: 'rgb(0,0,0)',
align: 'center',
padding: 15,
font: {
size: 25
}
},
legend: {
position: 'right',
title: {
display: true,
color: 'rgb(0,0,0)',
text: 'Legend',
font: {
weight: 'bold',
size: 20
},
},
labels: {
color: 'rgb(0,0,0)',
usePointStyle: true,
padding: 15,
font: {
size: 15,
weight: 'bold'
}
}
}
}
}
};
let mychart = new Chart('myChart', config);
Doughnut Chart

You have 2 options, either fully recreate the chart by destroying it first:
const config = {}; // Fill with your config opbject
let chart = Chart.getChart('myChart'); // Pass the canvas ID
if (chart) {
chart.destroy();
}
chart = new Chart('myChart', config);
or by updatingt the current chart instance:
const config = {}; // Fill with your config opbject
let chart = Chart.getChart('myChart'); // Pass the canvas ID
if (chart) {
chart.data.labels = legend;
chart.data.datasets[0].data = stats;
chart.update();
} else {
new Chart('myChart', config)
}

Create summary table from column chart in Google Charts

I'm creating a column chart in Google Charts, and I want to also create a table chart showing summary data based on the column values, viz. average, minimum, maximum, total.
I've declared these as global variables (initialised as 0) outside the drawchart function, and I've assigned values within the drawchart function (without var):
function drawPower() {
$.get("costs_daily.csv", function(csvString) {
// transform the CSV string into a 2-dimensional array
var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
// this new DataTable object holds all the data
var data = new google.visualization.arrayToDataTable(arrayData);
/// get min, max cost
var range = data.getColumnRange(3);
var n_rows = data.getNumberOfRows();
function getSum(data, row) {
var total = 0;
for (i = 0; i < n_rows; i++)
total = total + data.getValue(i, row);
return total;
}
totCost = getSum(data, 3);
aveCost = totCost / n_rows;
minCost = range.min;
maxCost = range.max;
var options = {
title: 'Costs for last 30 days',
titleTextStyle: {color: 'grey', fontSize: 16},
hAxis: {title: 'Date', titleTextStyle: {bold: false, italic: false, color: 'grey'}, slantedTextAngle: 90, textStyle: {fontSize: 12}},
legend: {position: 'top'},
vAxes: {
0: {title: 'Cost (p)', titleTextStyle: {bold: false, italic: false, color: 'grey'}},
},
focusTarget: 'category',
intervals: {color:'#000000',
textStyle: { color: 'none'}},
series: {
0: {color: '#44AA99', type: 'bars'},
1: {color: '#DDCC77', type: 'bars'},
2: {
color: 'transparent',
type: 'line',
lineWidth: 0,
pointSize: 0,
enableInteractivity: false,
visibleInLegend: false
}
},
interpolateNulls: true,
bar: { groupWidth: '75%' },
isStacked: true,
};
var formatter = new google.visualization.NumberFormat(
{prefix: '£', fractionDigits: 2}
);
formatter.format(data,1);
formatter.format(data,2);
formatter.format(data,3);
var chart = new google.visualization.ComboChart(document.getElementById('power_div'));
chart.draw(data, options);
},'text');
}
I've then created a separate function to draw a table with these values:
function drawTable() {
statsData = [
['Stat', 'Cost'],
['Average', aveCost],
['Minimum', minCost],
['Maximum', maxCost],
['Total', totCost]
];
var stats = new google.visualization.arrayToDataTable(statsData);
var options = {
showRowNumber: false,
width: '100%',
height: '100%'
};
var formatter = new google.visualization.NumberFormat(
{prefix: '£', fractionDigits: 2}
);
formatter.format(stats,1);
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(stats, options);
}
but the values remain at their initialised values (zero). Is there a way to pass the calculated values from the chart function to the table function?

not sure where drawTable is called from now,
but yes, you can pass the values from the chart function to the table function.
create the statsData in the chart function,
then pass it to the table function.
and remove where ever the table function is currently being called.
totCost = getSum(data, 3);
aveCost = totCost / n_rows;
minCost = range.min;
maxCost = range.max;
statsData = [
['Stat', 'Cost'],
['Average', aveCost],
['Minimum', minCost],
['Maximum', maxCost],
['Total', totCost]
];
drawTable(statsData);
...
function drawTable(statsData) {
...
see following snippet...
function drawPower() {
$.get("costs_daily.csv", function(csvString) {
// transform the CSV string into a 2-dimensional array
var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
// this new DataTable object holds all the data
var data = new google.visualization.arrayToDataTable(arrayData);
/// get min, max cost
var range = data.getColumnRange(3);
var n_rows = data.getNumberOfRows();
function getSum(data, row) {
var total = 0;
for (i = 0; i < n_rows; i++)
total = total + data.getValue(i, row);
return total;
}
totCost = getSum(data, 3);
aveCost = totCost / n_rows;
minCost = range.min;
maxCost = range.max;
statsData = [
['Stat', 'Cost'],
['Average', aveCost],
['Minimum', minCost],
['Maximum', maxCost],
['Total', totCost]
];
drawTable(statsData);
var options = {
title: 'Costs for last 30 days',
titleTextStyle: {color: 'grey', fontSize: 16},
hAxis: {title: 'Date', titleTextStyle: {bold: false, italic: false, color: 'grey'}, slantedTextAngle: 90, textStyle: {fontSize: 12}},
legend: {position: 'top'},
vAxes: {
0: {title: 'Cost (p)', titleTextStyle: {bold: false, italic: false, color: 'grey'}},
},
focusTarget: 'category',
intervals: {color:'#000000',
textStyle: { color: 'none'}},
series: {
0: {color: '#44AA99', type: 'bars'},
1: {color: '#DDCC77', type: 'bars'},
2: {
color: 'transparent',
type: 'line',
lineWidth: 0,
pointSize: 0,
enableInteractivity: false,
visibleInLegend: false
}
},
interpolateNulls: true,
bar: { groupWidth: '75%' },
isStacked: true,
};
var formatter = new google.visualization.NumberFormat(
{prefix: '£', fractionDigits: 2}
);
formatter.format(data,1);
formatter.format(data,2);
formatter.format(data,3);
var chart = new google.visualization.ComboChart(document.getElementById('power_div'));
chart.draw(data, options);
},'text');
}
function drawTable(statsData) {
var stats = new google.visualization.arrayToDataTable(statsData);
var options = {
showRowNumber: false,
width: '100%',
height: '100%'
};
var formatter = new google.visualization.NumberFormat(
{prefix: '£', fractionDigits: 2}
);
formatter.format(stats,1);
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(stats, options);
}

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 Charts - custom tooltip value for Pie Chart

I am trying to present formatted data for the tooltip value of a Pie Chart. My data consists of a name and size (size is number of bytes).
The default tooltip does not let me use a custom formatter for the size value. If I use string I lose the Percentage value and Name of legend in the tooltip. Is there a way to do this?
I want to maintain the Legend Color, Name and Percentage, but have the value formatted to a more readable form
Current Wrong
Desired
var entries = [{name: 'Test1', size: 1234}, {name: 'Test2', size: 324563425}, {name: 'Test3', size: 321453452345}, {name: 'Test4', size: 789078}]
var drawChart = function(entries, elementId) {
var options = {
width: "100%",
height: 148,
fontSize: 8,
tooltip: { textStyle: { bold: true, color: '#000000', fontSize: 13 }, showColorCode: true, isHtml: true, ignoreBounds: true, text: 'both', trigger: 'selection' },
legend: { position: 'right', textStyle: { fontSize: 10 } },
chartArea: { left: 5, top: 10, right: 5, bottom: 10, height: "148", width: "100%" },
sliceVisibilityThreshold: 0,
pieSliceText: 'none',
//pieHole: 0.4,
};
var chart = new google.visualization.PieChart(document.getElementById(elementId));
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Size');
data.addColumn({ type: 'string', role: 'tooltip' });
data.addRows(entries.length);
var i = 0;
$.each(entries, function () {
data.setCell(i, 0, this.name);
data.setCell(i, 1, this.size);
// How to make this display correctly?
// If it stays like this i lose percentage and legend name from tooltip
data.setCell(i, 2, formatBytes(this.size));
i++;
});
chart.draw(data, options);
}
var formatBytes = function (bytes, precision) {
if (isNaN(parseFloat(bytes)) || !isFinite(bytes)) return '-';
if (typeof precision === 'undefined') precision = 1;
var units = ['bytes', 'kB', 'MB', 'GB', 'TB', 'PB'],
number = Math.floor(Math.log(bytes) / Math.log(1024));
return (bytes / Math.pow(1024, Math.floor(number))).toFixed(precision) + ' ' + units[number];
};

provide the formatted value in the last argument of setCell
the tooltip will show the formatted value by default
see following working snippet...
google.charts.load('current', {
callback: function () {
drawChart([{name: 'Test1', size: 1234}, {name: 'Test2', size: 324563425}, {name: 'Test3', size: 321453452345}, {name: 'Test4', size: 789078}], 'chart_div');
},
packages: ['corechart']
});
var drawChart = function(entries, elementId) {
var options = {
width: "100%",
height: 148,
fontSize: 8,
tooltip: { textStyle: { bold: true, color: '#000000', fontSize: 13 }, showColorCode: true, isHtml: true, ignoreBounds: true, text: 'both', trigger: 'selection' },
legend: { position: 'right', textStyle: { fontSize: 10 } },
chartArea: { left: 5, top: 10, right: 5, bottom: 10, height: "148", width: "100%" },
sliceVisibilityThreshold: 0,
pieSliceText: 'none',
//pieHole: 0.4,
};
var chart = new google.visualization.PieChart(document.getElementById(elementId));
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Size');
data.addRows(entries.length);
var i = 0;
$.each(entries, function () {
data.setCell(i, 0, this.name);
data.setCell(i, 1, this.size, formatBytes(this.size, 1));
i++;
});
chart.draw(data, options);
}
var formatBytes = function(bytes, precision) {
if (isNaN(parseFloat(bytes)) || !isFinite(bytes)) return '-';
if (typeof precision === 'undefined') precision = 1;
var units = ['bytes', 'kB', 'MB', 'GB', 'TB', 'PB'],
number = Math.floor(Math.log(bytes) / Math.log(1024));
return (bytes / Math.pow(1024, Math.floor(number))).toFixed(precision) + ' ' + units[number];
};
<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="chart_div"></div>

Annotation Google Chart API

i'm trying to use Google Chart API for building an Waterfall chart. I noticed that Candlestick/Waterfall charts are not supporting the annotations.
See this jsfiddle sample
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Category');
data.addColumn('number', 'MinimumLevel');
data.addColumn('number', 'MinimumLevel1');
data.addColumn('number', 'MaximumLevel');
data.addColumn('number', 'MaximumLevel1');
data.addColumn({type: 'number', role: 'tooltip'});
data.addColumn({type: 'string', role: 'style'});
data.addColumn({type: 'number', role: 'annotation'});
data.addRow(['Category 1', 0 , 0, 5, 5, 5,'gray',5]);
data.addRow(['Category 2', 5 , 5, 10, 10, 10,'red',10]);
data.addRow(['Category 3', 10 , 10, 15, 15, 15,'blue',15]);
data.addRow(['Category 4', 15 , 15, 10, 10, 10,'yellow',10]);
data.addRow(['Category 5', 10 , 10, 5, 5, 5,'gray',5]);
var options = {
legend: 'none',
bar: { groupWidth: '60%' } // Remove space between bars.
};
var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
I would like to put the value of the 5th column at the top of every candlestick.
It should look like this :
Is there a way to do this?
Thanks

I add annotations to candlestick charts by adding annotations to a hidden scatter plot. You can set exactly where you want the annotations to sit by changing the plot.
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Low');
data.addColumn('number', 'Open');
data.addColumn('number', 'Close');
data.addColumn('number', 'High');
data.addColumn('number'); //scatter plot for annotations
data.addColumn({ type: 'string', role: 'annotation' }); // annotation role col.
data.addColumn({ type: 'string', role: 'annotationText' }); // annotationText col.
var high, low, open, close = 160;
for (var i = 0; i < 10; i++) {
open = close;
close += ~~(Math.random() * 10) * Math.pow(-1, ~~(Math.random() * 2));
high = Math.max(open, close) + ~~(Math.random() * 10);
low = Math.min(open, close) - ~~(Math.random() * 10);
annotation = '$' + close;
annotation_text = 'Close price: $' + close;
data.addRow([new Date(2014, 0, i + 1), low, open, close, high, high, annotation, annotation_text]);
}
var view = new google.visualization.DataView(data);
var chart = new google.visualization.ComboChart(document.querySelector('#chart_div'));
chart.draw(view, {
height: 400,
width: 600,
explorer: {},
chartArea: {
left: '7%',
width: '70%'
},
series: {
0: {
color: 'black',
type: 'candlesticks',
},
1: {
type: 'scatter',
pointSize: 0,
targetAxisIndex: 0,
},
},
candlestick: {
color: '#a52714',
fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red
risingColor: { strokeWidth: 0, fill: '#0f9d58' } // green
},
});
}
<script type="text/javascript"src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>

just so happens, i ran into the same problem this week
so I added my own annotations, during the 'animationfinish' event
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages:['corechart']
});
function drawChart() {
var dataChart = new google.visualization.DataTable({"cols":[{"label":"Category","type":"string"},{"label":"Bottom 1","type":"number"},{"label":"Bottom 2","type":"number"},{"label":"Top 1","type":"number"},{"label":"Top 2","type":"number"},{"role":"style","type":"string","p":{"role":"style"}}],"rows":[{"c":[{"v":"Budget"},{"v":0},{"v":0},{"v":22707893.613},{"v":22707893.613},{"v":"#007fff"}]},{"c":[{"v":"Contract Labor"},{"v":22707893.613},{"v":22707893.613},{"v":22534350.429},{"v":22534350.429},{"v":"#1e8449"}]},{"c":[{"v":"Contract Non Labor"},{"v":22534350.429},{"v":22534350.429},{"v":22930956.493},{"v":22930956.493},{"v":"#922b21"}]},{"c":[{"v":"Materials and Equipment"},{"v":22930956.493},{"v":22930956.493},{"v":22800059.612},{"v":22800059.612},{"v":"#1e8449"}]},{"c":[{"v":"Other"},{"v":22800059.612},{"v":22800059.612},{"v":21993391.103},{"v":21993391.103},{"v":"#1e8449"}]},{"c":[{"v":"Labor"},{"v":21993391.103},{"v":21993391.103},{"v":21546003.177999996},{"v":21546003.177999996},{"v":"#1e8449"}]},{"c":[{"v":"Travel"},{"v":21546003.177999996},{"v":21546003.177999996},{"v":21533258.930999994},{"v":21533258.930999994},{"v":"#1e8449"}]},{"c":[{"v":"Training"},{"v":21533258.930999994},{"v":21533258.930999994},{"v":21550964.529999994},{"v":21550964.529999994},{"v":"#922b21"}]},{"c":[{"v":"Actual"},{"v":0},{"v":0},{"v":21550964.52999999},{"v":21550964.52999999},{"v":"#007fff"}]}]});
var waterFallChart = new google.visualization.ChartWrapper({
chartType: 'CandlestickChart',
containerId: 'chart_div',
dataTable: dataChart,
options: {
animation: {
duration: 1500,
easing: 'inAndOut',
startup: true
},
backgroundColor: 'transparent',
bar: {
groupWidth: '85%'
},
chartArea: {
backgroundColor: 'transparent',
height: 210,
left: 60,
top: 24,
width: '100%'
},
hAxis: {
slantedText: false,
textStyle: {
color: '#616161',
fontSize: 9
}
},
height: 272,
legend: 'none',
tooltip: {
isHtml: true,
trigger: 'both'
},
vAxis: {
format: 'short',
gridlines: {
count: -1
},
textStyle: {
color: '#616161'
},
viewWindow: {
max: 24000000,
min: 16000000
}
},
width: '100%'
}
});
google.visualization.events.addOneTimeListener(waterFallChart, 'ready', function () {
google.visualization.events.addListener(waterFallChart.getChart(), 'animationfinish', function () {
var annotation;
var chartLayout;
var container;
var numberFormatShort;
var positionY;
var positionX;
var rowBalance;
var rowBottom;
var rowFormattedValue;
var rowIndex;
var rowTop;
var rowValue;
var rowWidth;
container = document.getElementById(waterFallChart.getContainerId());
chartLayout = waterFallChart.getChart().getChartLayoutInterface();
numberFormatShort = new google.visualization.NumberFormat({
pattern: 'short'
});
rowIndex = 0;
Array.prototype.forEach.call(container.getElementsByTagName('rect'), function(rect) {
switch (rect.getAttribute('fill')) {
// use colors to identify bars
case '#922b21':
case '#1e8449':
case '#007fff':
rowWidth = parseFloat(rect.getAttribute('width'));
if (rowWidth > 2) {
rowBottom = waterFallChart.getDataTable().getValue(rowIndex, 1);
rowTop = waterFallChart.getDataTable().getValue(rowIndex, 3);
rowValue = rowTop - rowBottom;
rowBalance = Math.max(rowBottom, rowTop);
positionY = chartLayout.getYLocation(rowBalance) - 6;
positionX = parseFloat(rect.getAttribute('x'));
rowFormattedValue = numberFormatShort.formatValue(rowValue);
if (rowValue < 0) {
rowFormattedValue = rowFormattedValue.replace('-', '');
rowFormattedValue = '(' + rowFormattedValue + ')';
}
annotation = container.getElementsByTagName('svg')[0].appendChild(container.getElementsByTagName('text')[0].cloneNode(true));
$(annotation).text(rowFormattedValue);
annotation.setAttribute('x', (positionX + (rowWidth / 2)));
annotation.setAttribute('y', positionY);
annotation.setAttribute('font-weight', 'bold');
rowIndex++;
}
break;
}
});
});
});
$(window).resize(function() {
waterFallChart.draw();
});
waterFallChart.draw();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>