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 create ticks charts in anycharts

I learn AnyCharts library and i need to create a tick chart (Its specificity is that it shows every change in price. Thanks to this, it is possible to observe the quotations of a given instrument in the most accurate way. If, for example, the transaction price is 1 point higher than the previous transaction, then the tick chart will immediately jump one point higher on the chart, but if the transaction has a price higher than the previous transaction by three points, then the tick chart will also "shoot" three points higher.) in case when i have a date something like this:
var data =[ [new Date(2018, 11, 24, 10, 33, 31, 0),511.53, 514.98, 505.79, 506.40],
[new Date(2018, 11, 24, 10, 33, 31, 1),211.53, 414.98, 405.79, 406.40],
[new Date(2018, 11, 24, 10, 33, 31, 1),512.53, 514.88, 505.69, 207.34],
[new Date(2018, 11, 24, 10, 33, 31, 3),511.22, 515.30, 505.49, 106.47],
[new Date(2018, 11, 24, 10, 33, 31, 4),511.53, 514.98, 505.79, 506.40],
[new Date(2018, 11, 24, 10, 34, 32, 4),111.53, 114.98, 105.79, 106.40],
[new Date(2018, 11, 24, 10, 34, 32, 5),511.53, 514.98, 505.79, 506.40]]
I want to show a every single point - without compression points from the same time (I'm afraid that's all I can do).
My goal is chart like this:

For this purpose, the Stock chart with Step Line series is the best choice. Check the article, it describes how to create and adjust such a chart.

Anychart does not display dates and times on x axis when data is spaced at hourly intervals

There are plenty of Anychart HTML examples available for download of line charts with a date-time x axis. All the examples I've seen have data spaced at intervals of weeks or months. When I modify the sample code such that the data spans only a few hours, nothing is printed on the x axis.
For instance, I've downloaded the example at https://playground.anychart.com/docs/v8/samples/AGST_DateTime_Axes_02, which uses the following data:
var series = chart.line([
{value: 1.172, x: Date.UTC(2003, 09, 14)},
{value: 1.916, x: Date.UTC(2004, 09, 13)},
{value: 5.57, x: Date.UTC(2005, 09, 13)},
{value: 15.0, x: Date.UTC(2006, 09, 13)},
{value: 144, x: Date.UTC(2007, 09, 13)}
]);
This works fine for me, with Jan 2004, Jul 2004 etc displayed on the x axis.
However, when I change this data to the following:
var series = chart.line([
{value: 1.172, x: Date.UTC(2003, 09, 13, 9, 40, 0)},
{value: 1.916, x: Date.UTC(2003, 09, 13, 10, 41, 0)},
{value: 5.57, x: Date.UTC(2003, 09, 13, 11, 41, 0)},
{value: 15.0, x: Date.UTC(2003, 09, 13, 12, 40, 0)},
{value: 144, x: Date.UTC(2003, 09, 13, 13, 39, 0)}
]);
The chart is displayed, but nothing is displayed on the x axis.

It's a kind of misconfiguration. In the sample you mentioned, line 18 is the following:
dateTimeTicks.interval(0, 6);
It means to show ticks every 6 hours on the xAxis. But in your second case, the whole range of data is less than 6 hours (between 9 and 13 hours), so that's why you see no ticks.
To avoid it, just remove that line or adjust intervals according to your data range. Here is the result.
You can learn more about this function in the API Reference.

fail to make xAxis on Highstock chart to go before

I have a jsFiddle here to show my problem,
I want my chart to start on xAxis two month before than it has data on it,
how can I show from two month before?
'xAxis': {
'min': Date.UTC(2013, 4, 24, 16, 44, 10),
'startOnTick' : false,
'startOfWeek': 6,
'dateTimeLabelFormats': {
'week': '%a,<br/>%e. %b'
}
},

start the data from the date you want to show in chart.
if there is no data give the y value as null
in your case you want the min for xAxis to be Date.UTC(2012, 1, 24, 16, 44, 10)
so start data from
data: [
[Date.UTC(2012, 1, 24, 16, 44, 10), null],
[Date.UTC(2013, 6, 24, 16, 44, 10), 336000.],
[Date.UTC(2013, 6, 27, 13, 57, 36), 393500.]
]
this will make the xAxis plot from the day you want.
I've updated your fiddle here

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 !