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...

Fullcalendar event property acceptance

I am working on a calendar where I would like to display a bit more information about my events.
Below I show you the list of events I'm using:
export default [
{
id: 13,
title: 'Sport Event',
start: new Date(2019, 5, 20, 19, 30, 0),
end: new Date(2019, 5, 20, 22, 0, 0),
recurrence: "weekly"
},
{
id: 14,
title: 'Flight to France',
start: new Date(2019, 5, 17, 13, 30, 0),
end: new Date(2019, 5, 17, 15, 0, 0),
recurrence: "once"
},{
id: 16,
title: 'Party',
start: new Date(2019, 5, 17, 15, 0, 0),
end: new Date(2019, 5, 17, 17, 0, 0),
matchRef: 'match/122123123332',
recurrence: "once"
},{
id: 15,
title: 'Birthday',
start: new Date(2019, 5, 17, 20, 30, 0),
end: new Date(2019, 5, 18, 0, 0, 0),
recurrence: "monthly"
}
]
Since I'm already displaying the title, start and end, I would like to display the value of recurrence property in my events. I'm working with ReactJS. This seems really simple to implement, while I'm new with Fullcalendar-react, so I'm sorry in advance.
Thank you!

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.

How to set min of selected range for a date slider?

I'm using jQDateRangeSlider in my project to enable users to choose flight dates.
Here is an example: jsfiddle.net. There are two types of bounds:
Total bounds
bounds: {
min: new Date(2012, 0, 1),
max: new Date(2012, 11, 31, 12, 59, 59)
}
default selected range
defaultValues: {
min: new Date(2012, 1, 10),
max: new Date(2012, 4, 22)
}
Let's say I want to represent full year as total range(Jan - Dec). Users can select flight date(left label) and back date(right label) throughout the year. How can I set min for right slider lable no less than value in left label? Back flight date shouldn't be less than 1st date. Or in another words: how to disable all dates which is less than 1st selected date? According to documentation there is no standart solution to do it. Any suggestions?

Try
$("#slider").dateRangeSlider({
range: {min: new Date(2012, 0, 1)}, //use minimum range
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)
}
});
Fiddle http://jsfiddle.net/code_snips/Q4YKN/1/

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 !