I have this Google chart and I cannot get the lower part (where date and time is) to show hours from 00 to 23, it always shows it with AM/PM.
I mean the area that is always visible, the other value that apepars on tooltip was formated OK, but not that lower part.
What am I doing wrong ?
I tried by that dateformatter code (it only seems to affect the tooltip date value).
And by this (not doing anything):
hAxis: {
format: 'dd/MM/yyyy HH:mm',
gridlines: {count: 15}
},
The jsfiddle
<script>
google.charts.load('current', {'packages':['line', 'corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var chartDiv = document.getElementById('chart_div');
var data = new google.visualization.DataTable();
data.addColumn('datetime');
data.addColumn('number', "Temp");
data.addColumn('number', "Humidity");
data.addRows([
[new Date(2020, 11, 04, 15, 00), 25.50, 62.76],
[new Date(2020, 11, 04, 15, 10), 25.58, 62.63],
[new Date(2020, 11, 04, 15, 20), 25.60, 62.47],
[new Date(2020, 11, 04, 15, 30), 25.60, 62.38],
[new Date(2020, 11, 04, 15, 40), 25.62, 62.16],
[new Date(2020, 11, 04, 15, 50), 25.60, 62.00],
[new Date(2020, 11, 04, 16, 00), 25.60, 61.79],
[new Date(2020, 11, 04, 16, 10), 25.77, 61.72],
[new Date(2020, 11, 04, 16, 20), 25.97, 60.93],
[new Date(2020, 11, 04, 16, 30), 26.07, 60.38],
]);
// give date a certain format
var dateFormatter = new google.visualization.DateFormat({pattern: 'dd/MM/yyyy HH:mm'});
dateFormatter.format(data, 0);
var materialOptions = {
// trying to format date/time on lower line, not working :/
hAxis: {
format: 'dd/MM/yyyy HH:mm',
gridlines: {count: 15}
},
legend: {position: 'none'},
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {axis: 'Temp'},
1: {axis: 'Humidity'},
},
axes: {
y: {
Temp: {label: 'Temps (Celsius)', range: {max: 15, min: 40 }},
Humidity: {label: 'Humidity (%)', /*range: {max: 30, min: 90 }*/},
},
},
colors: ['#B00000', '#1bdec4']
};
function drawMaterialChart() {
var materialChart = new google.charts.Line(chartDiv);
materialChart.draw(data, materialOptions);
}
drawMaterialChart();
}
</script>
when drawing a material chart,
need to convert the options using static method --> google.charts.Line.convertOptions
materialChart.draw(data, google.charts.Line.convertOptions(materialOptions));
this will ensure the supported options are included properly,
see following working snippet...
google.charts.load('current', {
'packages': ['line', 'corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var chartDiv = document.getElementById('chart_div');
var data = new google.visualization.DataTable();
data.addColumn('datetime');
data.addColumn('number', "Temp");
data.addColumn('number', "Humidity");
data.addRows([
[new Date(2020, 11, 04, 15, 00), 25.50, 62.76],
[new Date(2020, 11, 04, 15, 10), 25.58, 62.63],
[new Date(2020, 11, 04, 15, 20), 25.60, 62.47],
]);
// give date a certain format
var dateFormatter = new google.visualization.DateFormat({
pattern: 'dd/MM/yyyy HH:mm'
});
dateFormatter.format(data, 0);
var materialOptions = {
// trying to format date/time on lower line, not working :/
hAxis: {
format: 'dd/MM/yyyy HH:mm',
gridlines: {
count: 15
}
},
legend: {
position: 'none'
},
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {
axis: 'Temp'
},
1: {
axis: 'Humidity'
},
},
axes: {
y: {
Temp: {
label: 'Temps (Celsius)',
range: {
max: 15,
min: 40
}
},
Humidity: {
label: 'Humidity (%)',
range: {max: 30, min: 90 }
},
},
},
colors: ['#B00000', '#1bdec4']
};
function drawMaterialChart() {
var materialChart = new google.charts.Line(chartDiv);
materialChart.draw(data, google.charts.Line.convertOptions(materialOptions));
}
drawMaterialChart();
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div id="chart_div" style="width: 100%; height: 500px;"></div>
</body>
</html>
note: there are several options that are not supported by material charts,
see Tracking Issue for Material Chart Feature Parity
In order to reduce the number of fetches from database, I fetch all my data at once, and then tailor it with different views for more charts. In this case I have data table with ten columns (from 0 to 9) and want to show column 0 as X axis, 1 as AreaChart and additional two columns as lines on Combo Chart. Everithing works if I take columns up to 4. If I take e.g. column 7 with view.setColumns Google gives error message "Invalid column index 7. Should be an integer in the range [0-4]." Why indexes only 0-4 !!!???
Here it is how it looks like:
google.charts.load('current',{callback:init,'packages':['corechart'],'language':'hr'});
function init()
{
var data = new google.visualization.DataTable();
data.addColumn('date','Datum');
data.addColumn('number','Vrijednost');
data.addColumn('number','Relativna promjena');
data.addColumn('number','Kontinuiranost promjene');
data.addColumn('number','Prosjek obični u preth. 5 dana');
data.addColumn('number','Prosjek težinski u preth. 5 dana');
data.addColumn('number','Trend prema preth. 5 dana');
data.addColumn('number','Prosjek obični u preth. 10 dana');
data.addColumn('number','Prosjek težinski u preth. 10 dana');
data.addColumn('number','Trend prema preth. 10 dana');
data.addRows([
[new Date('2017-07-07'),11.92850,-0.13,-1,-3,-2.33333,11.96977,-5.5,-4,11.93431],
[new Date('2017-07-10'),11.94040,0.1,0,-3,-2.33333,11.9698,-5.5,-4,11.93224],
[new Date('2017-07-11'),11.96360,0.19,1,-3,-2.33333,11.95871,-5.5,-4,11.94423],
[new Date('2017-07-12'),11.95520,-0.07,0,-3,-2.33333,11.94968,-5.5,-4,11.96142],
[new Date('2017-07-13'),11.93310,-0.18,-1,-3,-2.33333,11.96335,-5.5,-4,11.97571],
[new Date('2017-07-14'),11.94130,0.07,0,-3,-2.33333,11.95136,-5.5,-4,11.97237],
[new Date('2017-07-17'),11.89760,-0.37,-1,-3,-2.33333,11.93811,-5.5,-4,11.96705],
[new Date('2017-07-18'),11.91230,0.12,0,-3,-2.33333,11.89439,-5.5,-4,11.93777],
[new Date('2017-07-19'),11.93750,0.21,1,-3,-2.33333,11.89151,-5.5,-4,11.91419],
[new Date('2017-07-20'),11.96080,0.2,2,-3,-2.33333,11.9183,-5.5,-4,11.9194],
[new Date('2017-07-21'),12.01040,0.41,3,-3,-2.33333,11.95357,-5.5,-4,11.93201],
[new Date('2017-07-24'),12.03320,0.19,4,-3,-2.33333,12.02595,-5.5,-4,11.95908],
[new Date('2017-07-25'),12.06780,0.29,5,-3,-2.33333,12.06525,-5.5,-4,11.99299],
[new Date('2017-07-26'),12.06780,0,5,-3,-2.33333,12.10184,-5.5,-4,12.04073],
[new Date('2017-07-27'),12.09690,0.24,6,-3,-2.33333,12.10942,-5.5,-4,12.07929],
[new Date('2017-07-28'),12.11120,0.12,7,-3,-2.33333,12.1175,-5.5,-4,12.11609],
[new Date('2017-07-31'),12.11100,-0,0,-3,-2.33333,12.13091,-5.5,-4,12.14988],
[new Date('2017-08-01'),12.14890,0.31,1,-3,-2.33333,12.12988,-5.5,-4,12.16061],
[new Date('2017-08-02'),12.06400,-0.7,0,-3,-2.33333,12.16005,-5.5,-4,12.17619],
[new Date('2017-08-03'),12.10260,0.32,1,-3,-2.33333,12.09797,-5.5,-4,12.14875]]);
var ComboOpt = {
height: 400,
annotations: {textStyle: {fontName: 'Tahoma', fontSize: 9}, highContrast: true},
animation:{ duration: 500, easing: 'out', startup: true },
vAxis: {textStyle: {fontName: 'Tahoma', fontSize: 9}},
hAxis: {textStyle: {fontName: 'Tahoma', fontSize: 9}, gridlines: {count: 30}, showTextEvery: 7},
chartArea: {width: '80%', height: '80%'},
legend: {position: 'bottom'},
series: {0: {type: 'area', color: "blue", pointsVisible: true},
1: {type: 'line'},
2: {type: 'line'}}
};
var view1a = new google.visualization.DataView(data);
view1a.setColumns([0,1,{sourceColumn:1,role:'annotation'},3,4]);
var chart1a = new google.visualization.ComboChart(document.getElementById('Chart1a'));
chart1a.draw(view1a,ComboOpt);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="Chart1a"></div>
there is a bug when using a DataView with animation.startup: true
an easy fix, while keeping animation on startup,
is to convert the view back to a data table --> view1a.toDataTable()
which can be done when drawing the chart...
chart1a.draw(view1a.toDataTable(),ComboOpt);
see following working snippet...
google.charts.load('current',{callback:init,'packages':['corechart'],'language':'hr'});
function init()
{
var data = new google.visualization.DataTable();
data.addColumn('date','Datum');
data.addColumn('number','Vrijednost');
data.addColumn('number','Relativna promjena');
data.addColumn('number','Kontinuiranost promjene');
data.addColumn('number','Prosjek obični u preth. 5 dana');
data.addColumn('number','Prosjek težinski u preth. 5 dana');
data.addColumn('number','Trend prema preth. 5 dana');
data.addColumn('number','Prosjek obični u preth. 10 dana');
data.addColumn('number','Prosjek težinski u preth. 10 dana');
data.addColumn('number','Trend prema preth. 10 dana');
data.addRows([
[new Date('2017-07-07'),11.92850,-0.13,-1,-3,-2.33333,11.96977,-5.5,-4,11.93431],
[new Date('2017-07-10'),11.94040,0.1,0,-3,-2.33333,11.9698,-5.5,-4,11.93224],
[new Date('2017-07-11'),11.96360,0.19,1,-3,-2.33333,11.95871,-5.5,-4,11.94423],
[new Date('2017-07-12'),11.95520,-0.07,0,-3,-2.33333,11.94968,-5.5,-4,11.96142],
[new Date('2017-07-13'),11.93310,-0.18,-1,-3,-2.33333,11.96335,-5.5,-4,11.97571],
[new Date('2017-07-14'),11.94130,0.07,0,-3,-2.33333,11.95136,-5.5,-4,11.97237],
[new Date('2017-07-17'),11.89760,-0.37,-1,-3,-2.33333,11.93811,-5.5,-4,11.96705],
[new Date('2017-07-18'),11.91230,0.12,0,-3,-2.33333,11.89439,-5.5,-4,11.93777],
[new Date('2017-07-19'),11.93750,0.21,1,-3,-2.33333,11.89151,-5.5,-4,11.91419],
[new Date('2017-07-20'),11.96080,0.2,2,-3,-2.33333,11.9183,-5.5,-4,11.9194],
[new Date('2017-07-21'),12.01040,0.41,3,-3,-2.33333,11.95357,-5.5,-4,11.93201],
[new Date('2017-07-24'),12.03320,0.19,4,-3,-2.33333,12.02595,-5.5,-4,11.95908],
[new Date('2017-07-25'),12.06780,0.29,5,-3,-2.33333,12.06525,-5.5,-4,11.99299],
[new Date('2017-07-26'),12.06780,0,5,-3,-2.33333,12.10184,-5.5,-4,12.04073],
[new Date('2017-07-27'),12.09690,0.24,6,-3,-2.33333,12.10942,-5.5,-4,12.07929],
[new Date('2017-07-28'),12.11120,0.12,7,-3,-2.33333,12.1175,-5.5,-4,12.11609],
[new Date('2017-07-31'),12.11100,-0,0,-3,-2.33333,12.13091,-5.5,-4,12.14988],
[new Date('2017-08-01'),12.14890,0.31,1,-3,-2.33333,12.12988,-5.5,-4,12.16061],
[new Date('2017-08-02'),12.06400,-0.7,0,-3,-2.33333,12.16005,-5.5,-4,12.17619],
[new Date('2017-08-03'),12.10260,0.32,1,-3,-2.33333,12.09797,-5.5,-4,12.14875]]);
var ComboOpt = {
height: 400,
annotations: {textStyle: {fontName: 'Tahoma', fontSize: 9}, highContrast: true},
animation:{ duration: 500, easing: 'out', startup: true },
vAxis: {textStyle: {fontName: 'Tahoma', fontSize: 9}},
hAxis: {textStyle: {fontName: 'Tahoma', fontSize: 9}, gridlines: {count: 30}, showTextEvery: 7},
chartArea: {width: '80%', height: '80%'},
legend: {position: 'bottom'},
series: {0: {type: 'area', color: "blue", pointsVisible: true},
1: {type: 'line'},
2: {type: 'line'}}
};
var view1a = new google.visualization.DataView(data);
view1a.setColumns([0,1,{sourceColumn:1,role:'annotation'},3,7]);
var chart1a = new google.visualization.ComboChart(document.getElementById('Chart1a'));
chart1a.draw(view1a.toDataTable(),ComboOpt);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="Chart1a"></div>
I am trying to put a trendline on a barchart. When I add the trendline to the options, no trendline appears. Is there a way make a trendline on a barchart like this?
<script type="text/javascript">
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2014', 1000, 400],
['2015', 1170, 460],
['2016', 660, 1120],
['2017', 1030, 540]
]);
var options = {
trendlines: {
0: {
color: 'green',
visibleInLegend: true,
}
},
chart: {
title: 'Last 7 Days',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
bars: 'vertical',
vAxis: {format: 'decimal'},
height: 400,
colors: ['#1b9e77', '#d95f02', '#7570b3']
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
</script>
1. trendlines.* are listed among the several options that don't work on Material charts
Material chart --> packages: ['bar'] -- google.charts.Bar
however, there is a way to make a trendline on a barchart, using...
Core chart --> packages: ['corechart'] -- google.visualization.ColumnChart
you can use the following config option to get the chart close to the look & feel of Material
theme: 'material'
2. for trendlines.* to work on a Core chart, it must be built on a Continuous axis
meaning the axis values cannot be strings
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages:['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
[new Date(2014, 0, 1), 1000, 400],
[new Date(2015, 0, 1), 1170, 460],
[new Date(2016, 0, 1), 660, 1120],
[new Date(2017, 0, 1), 1030, 540]
]);
var options = {
colors: ['#1b9e77', '#d95f02'],
hAxis: {
format: 'yyyy',
ticks: [new Date(2014, 0, 1), new Date(2015, 0, 1), new Date(2016, 0, 1), new Date(2017, 0, 1)]
},
height: 400,
theme: 'material',
title: 'Last 7 Days',
trendlines: {
0: {
color: 'green',
visibleInLegend: true
}
},
vAxis: {
format: 'decimal'
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I need to add multiple trendlines to my google line chart but I just can't figure out how to do it with more than one line.
Here is my code example with a single line based on a date and value to build the chart:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
function drawMultipleTrendlineChart() {
var chart;
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Sales value');
data.addRow([new Date(2013, 3, 11), 10]);
data.addRow([new Date(2013, 4, 02), 650]);
data.addRow([new Date(2013, 5, 03), 55]);
data.addRow([new Date(2013, 6, 04), 95]);
data.addRow([new Date(2013, 7, 05), 400]);
data.addRow([new Date(2013, 8, 06), 600]);
data.addRow([new Date(2014, 0, 07), 800]);
data.addRow([new Date(2014, 1, 08), 900]);
data.addRow([new Date(2014, 2, 09), 3127]);
var formatter = new google.visualization.NumberFormat({
fractionDigits: 2,
prefix: 'R$:'
});
formatter.format(data, 1);
var dateFormatter = new google.visualization.NumberFormat({
pattern: 'MMM yyyy'
});
dateFormatter.format(data, 0);
var chartHeight = 400;
var chartWidth = 600;
var chartOptions = {
tooltip:{isHtml: true},
trendlines: {
0: {color: 'red'}
},
title: 'Trendlines with multiple lines',
isStacked: true,
width: chartWidth,
height: chartHeight,
colors: ['#0000D8'],
hAxis: {
title: 'example title',
slantedText: false,
slantedTextAngle: 45,
textStyle: {
fontSize: 10
},
format: 'dd-MM-yyyy'
},
chartArea: {
left: 100,
top: 20,
width: (chartWidth - 10),
height: (chartHeight - 90)
}
};
chart = new google.visualization.LineChart(document.getElementById('multipleTrendChart'));
chart.draw(data, chartOptions);
}
google.load('visualization', '1', {packages:['corechart'], callback: drawMultipleTrendlineChart});
</script>
</head>
<body>
<div id="multipleTrendChart"></div>
</body>
I wan't to do it like this image:Image_example
jsfiddle example: http://jsfiddle.net/w3ez9gwb/
Just add more columns of your data:
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Sales value A');
data.addColumn('number', 'Sales value B');
data.addRows([
[new Date(2013, 3, 11), 100, 10],
[new Date(2013, 4, 02), 50, 650],
[new Date(2013, 5, 03), 70, 55],
[new Date(2013, 6, 04), 80, 95],
[new Date(2013, 7, 05), 50, 400],
[new Date(2013, 8, 06), 10, 600],
[new Date(2014, 0, 07), 20, 800],
[new Date(2014, 1, 08), 300, 900],
[new Date(2014, 2, 09), 100, 312]
]);
Then add the trendlines to your chart options like so:
var chartOptions = {
tooltip: {
isHtml: true
},
trendlines: {
0: {
color: 'red'
},
1: {
color: 'yellow'
},
},
...
};
Full example: JSFiddle