Develop Reference

Google Charts: how to deal with monthly data

I'm trying to use Google Charts to present monthly data in a stacked column chart.
I'd like to use Date values for the x-axis, since Google Charts is smart about labels and gridlines. But you can only specify exact days in a Javascript Date, not a whole month.
In my first attempt, I simply always used the first day of the month. But then the January bar straddles the year gridline (e.g. January 2020 is on the gridline separating 2019 and 2020) which just looks funny.
My second attempt uses day 15 for every month. That looks a bit better.
google.charts.load('current', {'packages':['corechart'], 'language': 'nl'});
google.charts.setOnLoadCallback(drawChart2);
function drawChart2() {
var data = google.visualization.arrayToDataTable([["","Appels","Peren","Bananen","dec?"],[new Date(2018, 0, 15),5217,4162,3014,0],[new Date(2018, 1, 15),4691,3582,2552,0],[new Date(2018, 2, 15),5427,4651,4160,0],[new Date(2018, 3, 15),4272,3571,3765,0],[new Date(2018, 4, 15),4409,3266,3020,0],[new Date(2018, 5, 15),4566,3566,3131,0],[new Date(2018, 6, 15),4628,3329,3742,0],[new Date(2018, 7, 15),4175,3309,3390,0],[new Date(2018, 8, 15),4794,3695,3047,0],[new Date(2018, 9, 15),5075,3976,2856,0],[new Date(2018, 10, 15),7568,6737,3056,0],[new Date(2018, 11, 15),7978,7551,4634,0],[new Date(2019, 0, 15),5300,5101,3730,0],[new Date(2019, 1, 15),4526,4310,3342,0],[new Date(2019, 2, 15),5399,5053,4335,0],[new Date(2019, 3, 15),4380,4187,4045,0],[new Date(2019, 4, 15),4940,4560,3854,0],[new Date(2019, 5, 15),4819,4529,3617,0],[new Date(2019, 6, 15),5158,4723,4783,0],[new Date(2019, 7, 15),4813,4290,3673,0],[new Date(2019, 8, 15),5935,5147,3504,0],[new Date(2019, 9, 15),5886,5362,3620,0],[new Date(2019, 10, 15),8565,7706,5652,0],[new Date(2019, 11, 15),9373,8416,4719,0],[new Date(2020, 0, 15),6054,6173,4367,0],[new Date(2020, 1, 15),5691,5458,4340,0],[new Date(2020, 2, 15),14864,6467,8200,0],[new Date(2020, 3, 15),21182,9031,7064,0],[new Date(2020, 4, 15),16590,9828,6981,0],[new Date(2020, 5, 15),13621,10060,7240,0],[new Date(2020, 6, 15),9966,7411,6878,0],[new Date(2020, 7, 15),9771,6948,6265,0],[new Date(2020, 8, 15),11033,7584,4794,0],[new Date(2020, 9, 15),13606,8981,5241,0],[new Date(2020, 10, 15),24279,11658,5889,0],[new Date(2020, 11, 15),2615,1523,439,49463]]);
var options = {'title':'Consumptie per maand',
'titleTextStyle': { 'fontSize': 15 },
'width':640,
'height':240,
'legend': { 'position':'bottom' },
'series': {"0":{"color":"66aabb"},"1":{"color":"66ddee"},"3":{"color":"e8f8ff"},"2":{"color":"bbeeff"}},
'chartArea': { 'width': '90%', 'left': 60, 'right': 20 },
'bar': { 'groupWidth': '80%' },
'isStacked':true};
var chart = new google.visualization.ColumnChart(document.getElementById('chart2'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div style="display: inline-block; width: 640px; height: 240px;" id="chart2"></div>
However, the tooltips now show the exact date, e.g. “15 jan. 2020”. I can't find a way to customize that (except by using custom HTML tooltips, which would be a bit of a hassle – and that don't look as pretty as the default tooltips).
Is there a better way to deal with monthly data in Google Charts?
(Of course, I can just use string values (e.g. 'jan. 2020'), but then I lost the smart x-axis labels and gridlines that using Date values provides.

you can use the DateFormat class, to format the date values.
by default, the tooltip will display the formatted value.
create the date format using a format pattern...
var formatMonth = new google.visualization.DateFormat({
pattern: 'MMM yyyy'
});
then use the format method to format the data table column...
format(dataTable, columnIndex)
formatMonth.format(data, 0);
see following working snippet...
google.charts.load('current', {
packages: ['corechart'],
language: 'nl'
}).then(function () {
var data = google.visualization.arrayToDataTable([["","Appels","Peren","Bananen","dec?"],[new Date(2018, 0, 15),5217,4162,3014,0],[new Date(2018, 1, 15),4691,3582,2552,0],[new Date(2018, 2, 15),5427,4651,4160,0],[new Date(2018, 3, 15),4272,3571,3765,0],[new Date(2018, 4, 15),4409,3266,3020,0],[new Date(2018, 5, 15),4566,3566,3131,0],[new Date(2018, 6, 15),4628,3329,3742,0],[new Date(2018, 7, 15),4175,3309,3390,0],[new Date(2018, 8, 15),4794,3695,3047,0],[new Date(2018, 9, 15),5075,3976,2856,0],[new Date(2018, 10, 15),7568,6737,3056,0],[new Date(2018, 11, 15),7978,7551,4634,0],[new Date(2019, 0, 15),5300,5101,3730,0],[new Date(2019, 1, 15),4526,4310,3342,0],[new Date(2019, 2, 15),5399,5053,4335,0],[new Date(2019, 3, 15),4380,4187,4045,0],[new Date(2019, 4, 15),4940,4560,3854,0],[new Date(2019, 5, 15),4819,4529,3617,0],[new Date(2019, 6, 15),5158,4723,4783,0],[new Date(2019, 7, 15),4813,4290,3673,0],[new Date(2019, 8, 15),5935,5147,3504,0],[new Date(2019, 9, 15),5886,5362,3620,0],[new Date(2019, 10, 15),8565,7706,5652,0],[new Date(2019, 11, 15),9373,8416,4719,0],[new Date(2020, 0, 15),6054,6173,4367,0],[new Date(2020, 1, 15),5691,5458,4340,0],[new Date(2020, 2, 15),14864,6467,8200,0],[new Date(2020, 3, 15),21182,9031,7064,0],[new Date(2020, 4, 15),16590,9828,6981,0],[new Date(2020, 5, 15),13621,10060,7240,0],[new Date(2020, 6, 15),9966,7411,6878,0],[new Date(2020, 7, 15),9771,6948,6265,0],[new Date(2020, 8, 15),11033,7584,4794,0],[new Date(2020, 9, 15),13606,8981,5241,0],[new Date(2020, 10, 15),24279,11658,5889,0],[new Date(2020, 11, 15),2615,1523,439,49463]]);
var formatMonth = new google.visualization.DateFormat({
pattern: 'MMM yyyy'
});
formatMonth.format(data, 0);
var options = {'title':'Consumptie per maand',
'titleTextStyle': { 'fontSize': 15 },
'width':640,
'height':240,
'legend': { 'position':'bottom' },
'series': {"0":{"color":"66aabb"},"1":{"color":"66ddee"},"3":{"color":"e8f8ff"},"2":{"color":"bbeeff"}},
'chartArea': { 'width': '90%', 'left': 60, 'right': 20 },
'bar': { 'groupWidth': '80%' },
'isStacked':true};
var chart = new google.visualization.ColumnChart(document.getElementById('chart2'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart2"></div>
NOTE: formatting the data table sets the formatted value of each cell of the data table column.
you can also provide the formatted value directly in the data by using object notation.
if you wanted, you could load the data table rows as follows...
[{v: new Date(2018, 0, 15), f: 'jan 2018'},5217,4162,3014,0]
where v: is the value, and f: is the formatted value...

How to fill a Google chart with PHP from a TXT data file?

I have a DATAS.TXT file automatically filled-in with TIME and TEMPERATURE datas.
TIME is already formatted as per Google Charts requirements:
new Date(Year, Month, Day, Hours, Minutes)
TIME datas and TEMPERATURES datas are separated by a SPACE character and each line terminates with \r.
The DATAS.TXT file shows something like this:
new Date(2017, 01, 01, 05, 15) 20.5
new Date(2017, 01, 01, 18, 50) 21.7
new Date(2017, 01, 19, 12, 35) 22.4
etc ...
From this DATA file I would like to generate a Google Chart like this example:
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {'packages':['annotatedtimeline']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Date');
data.addColumn('number', 'Temperatures');
data.addRows([
[new Date(2001, 0, 1, 0), 0.0],
[new Date(2001, 0, 1, 1), 4.8],
[new Date(2001, 0, 1, 2), 4.6],
[new Date(2001, 0, 1, 3), 2.6],
[new Date(2001, 0, 1, 4), 3.6],
// ...
// Rest of year data here...
// ...
[new Date(2001, 11, 31, 20), 9.4],
[new Date(2001, 11, 31, 21), 7.0],
[new Date(2001, 11, 31, 22), 8.5],
[new Date(2001, 11, 31, 23), 2.2]
]);
var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
chart.draw(data, {displayAnnotations: true});
}
</script>
My question is, how can I fill-in data.addRows([ ... ] contents with the datas issued from my DATAS.TXT file?
I need a function that could pick-up TIMES, detect the space character insertion, pick-up the associated TEMPERATURE data and detect the \r character.
I'm not confortable with PHP, any help will be highly appreciated.

Flot Javascript - drawing a 24 hour bar chart with values every hour

I want to create using Flot Charts a 24 hour bar graph that has a value for every hour. From my understanding Flot uses epoch time for hour values. However wen running the following code the chart doesn't show any values and no error.
//Data for 12am and 5pm respectively in epoch time
var data = [[43200000, 20], [61200000, 50]];
var dataset = [
{
label: "amount",
data: data,
color: "#FF0000",
bars: {
show: true,
align: "center",
barWidth: 2 * 60 * 60 * 600,
lineWidth:1
}
}
];
var options = {
yaxis: {},
xaxis: {
mode: "time",
//timeformat: "%H",
tickSize: [1, "hour"], // tick every hour
min: (new Date(0, 0, 0, 00, 00, 00, 00)).getTime(),
max: (new Date(0, 0, 0, 24, 00, 00, 00)).getTime()
}
};
$.plot($("#flot-placeholder"), dataset, options);
How can I populate values on the graph?

Epoch time starts on 1970-1-1 (see here). Change your min/max values to
min: (new Date(1970, 0, 1, 00, 00, 00, 00)).getTime(),
max: (new Date(1970, 0, 1, 24, 00, 00, 00)).getTime()
and it works with your data. See this fiddle.
But if you only care about hours and not the date, consider using categories mode, see this fiddle.

FadeIn/FadeOut effects for multiple date sliders

I'm using jQDateRangeSlider in my project to enable users to choose flight dates. Here is an example: jsfiddle.net.
In case I'm using multiple sliders without any effects it works perfect. But when I'm trying to enable fadeIn/fadeOut for this elements it works wrong. I've reproduced this issue here.
HTML:
<button id="text">Show second slider</button>
<div id="first">
<div id="slider1"></div>
</div>
<div id="second" style="display:none;">
<div id="slider2"></div>
</div>
JS:
var el = document.getElementById("text");
el.onclick = function(){$('#first').fadeOut('slow', function(){$('#second').fadeIn('slow');});};
$("#slider1").dateRangeSlider({
bounds: {
min: new Date(2012, 0, 1),
max: new Date(2012, 11, 31, 12, 59, 59)
},
defaultValues: {
min: new Date(2012, 1, 10),
max: new Date(2012, 4, 22)
}
});
$("#slider2").dateRangeSlider({
bounds: {
min: new Date(2012, 0, 1),
max: new Date(2012, 11, 31, 12, 59, 59)
},
defaultValues: {
min: new Date(2012, 1, 10),
max: new Date(2012, 4, 22)
}
});
Second slider doesn't want to appear in a proper format with a ruler. Any ideas?

Wrong dates on Google Chart API Line Graph

So I am trying to map Tide times on a line graph using Google's Chart API.
However, the points plotted on the Graph don't correspond to the correct date and time values.
The data is in the form date time (x-axis) and height of tide (y-axis).
I'm not sure if I am creating the date time value correctly, or it the API is just doing something weird.
For instance, the last date in the tideTimes array is for the 1st of November, but the Graph is showing data points for December, you can see this behaviour in image below. I added the code below to allow you to recreate these errors.
If anyone could tell me what I am doing wrong, it would be greatly appreciated.
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawWeekChart);
function drawWeekChart() {
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Date');
data.addColumn('number', 'Wave Height (Meters)');
var tideTimes = [
[new Date(2012, 10, 29, 05, 44, 00, 00), 9.12],
[new Date(2012, 10, 29, 11, 47, 00, 00), 1.62],
[new Date(2012, 10, 29, 18, 01, 00, 00), 9.23],
[new Date(2012, 10, 30, 00, 01, 00, 00), 1.55],
[new Date(2012, 10, 30, 06, 16, 00, 00), 9.20],
[new Date(2012, 10, 30, 12, 16, 00, 00), 1.58],
[new Date(2012, 10, 30, 18, 33, 00, 00), 9.21],
[new Date(2012, 10, 31, 00, 29, 00, 00), 1.54],
[new Date(2012, 10, 31, 06, 46, 00, 00), 9.21],
[new Date(2012, 10, 31, 12, 45, 00, 00), 1.60],
[new Date(2012, 10, 31, 19, 04, 00, 00), 9.12],
[new Date(2012, 11, 01, 00, 58, 00, 00), 1.59]
// new Date( YYYY, MM, DD, HH, MM, SS, MS), height]
];
data.addRows(tideTimes);
var options = {
title: 'Tide Times',
smoothLine: true,
width: 984,
height: 600
};
var chart = new google.visualization.LineChart(document.getElementById('tide_chart_week'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="tide_chart_week" stye="float:left; height:800px; background:blue;"></div>
</body>
</html>

Month must be a integer b/w 0-11.
Check the Date() constructor docs [0]
month Integer value representing the month, beginning with 0 for
January to 11 for December.
Just change your tideTimes variable accordingly
var tideTimes = [
[new Date(2012, 9, 29, 05, 44, 00, 00), 9.12], // october
//.....
[new Date(2012, 10, 01, 00, 58, 00, 00), 1.59] // november
];
Also, you might want to change your chart's horizontal axis format to show friendlier dates
var options = {
/*.. current options ..*/
hAxis: {format:'MMM d, y'}
};
Here's an example: http://jsfiddle.net/jaimem/F4Gzr/1/
[0] https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Date

As jm pointed out, in ECMAScript months are zero based so:
new Date(2012, 10, 31, 19, 04, 00, 00)
is 31 November 2012, which creates a date for 1 December 2012 (since November only has 30 days) and:
new Date(2012, 11, 01, 00, 58, 00, 00)
is also 1 December, 2012.

<div id="tide_chart_week" stye="float:left; height:800px; background:blue;"></div>
Note the use of stye instead of style !