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 can I specify the position of the columns relative to the X-axis labels in a column chart using Highcharts?

I have some time series data with well-defined intervals. Here's what the raw data look like:
[((datetime.datetime(1997, 10, 20, 0, 0),
datetime.datetime(1997, 10, 20, 23, 59, 59)),
1),
((datetime.datetime(1997, 10, 21, 0, 0),
datetime.datetime(1997, 10, 21, 23, 59, 59)),
0),
((datetime.datetime(1997, 10, 22, 0, 0),
datetime.datetime(1997, 10, 22, 23, 59, 59)),
0),
((datetime.datetime(1997, 10, 23, 0, 0),
datetime.datetime(1997, 10, 23, 23, 59, 59)),
1),
((datetime.datetime(1997, 10, 24, 0, 0),
datetime.datetime(1997, 10, 24, 23, 59, 59)),
3),
((datetime.datetime(1997, 10, 25, 0, 0),
datetime.datetime(1997, 10, 25, 23, 59, 59)),
0),
((datetime.datetime(1997, 10, 26, 0, 0),
datetime.datetime(1997, 10, 26, 23, 59, 59)),
0),
((datetime.datetime(1997, 10, 27, 0, 0),
datetime.datetime(1997, 10, 27, 23, 59, 59)),
0),
((datetime.datetime(1997, 10, 28, 0, 0),
datetime.datetime(1997, 10, 28, 23, 59, 59)),
1),
((datetime.datetime(1997, 10, 29, 0, 0),
datetime.datetime(1997, 10, 29, 23, 59, 59)),
4),
((datetime.datetime(1997, 10, 30, 0, 0),
datetime.datetime(1997, 10, 30, 23, 59, 59)),
6),
((datetime.datetime(1997, 10, 31, 0, 0),
datetime.datetime(1997, 10, 31, 23, 59, 59)),
0),
((datetime.datetime(1997, 11, 1, 0, 0),
datetime.datetime(1997, 11, 1, 23, 59, 59)),
0),
((datetime.datetime(1997, 11, 2, 0, 0),
datetime.datetime(1997, 11, 2, 23, 59, 59)),
0),
((datetime.datetime(1997, 11, 3, 0, 0),
datetime.datetime(1997, 11, 3, 23, 59, 59)),
2),
((datetime.datetime(1997, 11, 4, 0, 0),
datetime.datetime(1997, 11, 4, 23, 59, 59)),
0)]
You can see that there are tuples that define the exact start and end of each interval. I want to draw a Highcharts column chart that exactly mimics the data above. https://jsfiddle.net/kvh4zt2k/ is what I currently have:
The problem is that this doesn't mimic my data exactly. Notice how the columns are centered on each X-axis label. In order to display my intervals exactly, I want the X-axis labels to be exactly on the left edge of each column. Here's a crappy photoshop that illustrates how the columns should be aligned relative to the X-axis labels:
I've scoured the API docs and tried a bunch of things without success. How can I do this?

Set pointPlacement: "between", see: http://jsfiddle.net/kvh4zt2k/1/
API reference.

Highcharts, stacked column range with date in y-axis

The highcharts is rendering the chart when the series data is hardcoded and when the data is passed through a variable from backend, it doesn't generate a chart.
series: [{
name: 'T1',
stack: 'Tasks',
color: 'blue',
data: [ { x: 0,
low: Date.UTC(2015, 2, 13, 11, 42, 02),
high: Date.UTC(2015, 2, 13, 14, 15, 53)},
{ x: 1,
low: Date.UTC(2015, 2, 13, 11, 42, 02),
high: Date.UTC(2015, 2, 13, 11, 42, 02)},
{ x: 2,
low: Date.UTC(2015, 2, 13, 11, 42, 02),
high: Date.UTC(2015, 2, 13, 15, 54, 23)},
{ x: 3,
low: Date.UTC(2015, 2, 13, 11, 42, 02),
high: Date.UTC(2015, 2, 13, 14, 17, 08)},
{ x: 4,
low: Date.UTC(2015, 2, 13, 11, 42, 02),
high: Date.UTC(2015, 2, 13, 17, 23, 13)} ]
}, {
name: 'T2',
stack: 'Tasks',
color: 'green',
data: [ { x: 0,
low: Date.UTC(2015, 2, 13, 14, 15, 53),
high: Date.UTC(2015, 2, 13, 14, 17, 08)},
{ x: 1,
low: Date.UTC(2015, 2, 13, 11, 42, 02),
high: Date.UTC(2015, 2, 13, 13, 23, 02)},
{ x: 3,
low: Date.UTC(2015, 2, 13, 14, 17, 08),
high: Date.UTC(2015, 2, 13, 14, 24, 55)} ]
}, {
name: 'T3',
stack: 'Tasks',
color: 'red',
data: []
}]
When the value is coming from backend, the code is
series: [{
name: 'T1',
stack: 'Tasks',
color: 'blue',
data: (function(){
var data = [];
var temp = {};
for(i in msg.T1){
temp.x = msg.T1[i].x;
// temp.low = new Date(msg.T1[i].low) or Date.UTC(new Date(msg.T1[i].low);
// temp.high = new Date(msg.T1[i].high);
temp.low = parseInt(i);
temp.high = parseInt(i)+2;
data.push(temp);
}
return data;
}())
}, {
name: 'T2',
stack: 'Tasks',
color: 'green',
data: (function(){
var data = [];
var temp = {};
for(i in msg.T2){
temp.x = msg.T2[i].x;
// temp.low = new Date(msg.T2[i].low);
// temp.high = new Date(msg.T2[i].high);
temp.low = parseInt(i);
temp.high = parseInt(i)+2;
data.push(temp);
}
return data;
}())
}, {
name: 'T3',
stack: 'Tasks',
color: 'red',
data: (function(){
var data = [];
var temp = {};
for(i in msg.T3){
temp.x = msg.T3[i].x;
// temp.low = new Date(msg.T3[i].low);
// temp.high = new Date(msg.T3[i].high);
temp.low = parseInt(i);
temp.high = parseInt(i)+2;
data.push(temp);
}
return data;
}())
}]
});
The second code, despite throwing no error, does not render the chart.
What is wrong in the data format

The problem is fixed, issue was that the value of x in temp.x, the data object passed to series, should be integer only, no Strings or any other data types are allowed. Fixing that fixed the chart

getting the event from variable

i m studing the jquery calendar from github: https://github.com/themouette/jquery-week-calendar
I pull the data from database by using code behind C#, and stored it at hiddenfield, then javascript read the hiddenfield field value as string.
i will skip how i get the value from database, in this question, i hardcode the events into sampleEvents var.
Working Javascript:
var eventData = {
events: [
{'id':1, 'start': new Date(2015, 3, 27, 12), 'end': new Date(2015, 3, 27, 13, 35),'title':'Lunch with Mike'},
{'id':2, 'start': new Date(2015, 3, 28, 10), 'end': new Date(2015, 3, 28, 14, 45),'title':'Dev Meeting'}
]};
Not Working Javascript:
var sampleEvents = "{'id':1, 'start': new Date(2015, 3, 27, 12), 'end': new Date(2015, 3, 27, 13, 35),'title':'Lunch with Mike'},{'id':2, 'start': new Date(2015, 3, 28, 10), 'end': new Date(2015, 3, 28, 14, 45),'title':'Dev Meeting'}";
var eventData = {
events: [
sampleEvents
]};
Error message:
Uncaught TypeError: Cannot read property 'getTime' of undefined
Not Working Javascript 2:
var sampleEvents = "[{'id': 1,'start': new Date(2015, 3, 27, 12),'end': new Date(2015, 3, 27, 13, 35),'title': 'Lunch with Mike'},{'id': 2,'start': new Date(2015, 3, 28, 10),'end': new Date(2015, 3, 28, 14, 45),'title': 'Dev Meeting'}]";
var array = JSON.parse(sampleEvents);
var eventData = {
events:
sampleEvents
};
Error Messsage:
Uncaught SyntaxError: Unexpected token '
Can anyone tell me, what did i missed?

Because your created sampleEvents is string not array.
event is accepting array not a string.
To use array try this:
var sampleEvents = [
{
'id':1,
'start': new Date(2015, 3, 27, 12),
'end': new Date(2015, 3, 27, 13, 35),
'title':'Lunch with Mike'
},
{
'id':2,
'start': new Date(2015, 3, 28, 10),
'end': new Date(2015, 3, 28, 14, 45),
'title':'Dev Meeting'
}
];
To Use String try this:
var sampleEvents = '['+
'{"id":1, "start": "'+new Date(2015, 3, 27, 12)+'", "end": "'+new Date(2015, 3, 27, 13, 35)+'","title":"Lunch with Mike"},'+
'{"id":2, "start": "'+new Date(2015, 3, 28, 10)+'", "end": "'+new Date(2015, 3, 28, 14, 45)+'","title":"Dev Meeting"}'+
']';
var sampleEventsArray = JSON.parse(sampleEvents);

How to show time values in stacked column using High stock

I am trying to created stacked columns in Highstock. in following js fiddle.
The code is
//http://jsfiddle.net/nishants/y0t130f3/2/
$(function () {
$('#container').highcharts('StockChart',{
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: [new Date(2014, 5, 30).getTime()/1000,new Date(2014, 5, 29).getTime()/1000,new Date(2014, 5, 28).getTime()/1000,new Date(2014, 5, 27).getTime()/1000,new Date(2014, 5, 26).getTime()/1000,new Date(2014, 5, 25).getTime()/1000,new Date(2014, 5, 24).getTime()/1000,new Date(2014, 5, 23).getTime()/1000,new Date(2014, 5, 22).getTime()/1000,new Date(2014, 5, 21).getTime()/1000,new Date(2014, 5, 20).getTime()/1000,new Date(2014, 5, 19).getTime()/1000,new Date(2014, 5, 18).getTime()/1000,new Date(2014, 5, 17).getTime()/1000,new Date(2014, 5, 16).getTime()/1000,new Date(2014, 5, 15).getTime()/1000,new Date(2014, 5, 14).getTime()/1000,new Date(2014, 5, 13).getTime()/1000,new Date(2014, 5, 12).getTime()/1000,new Date(2014, 5, 11).getTime()/1000 ]
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -70,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function () {
return '' + this.x + '' +
this.series.name + ': ' + this.y + '' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black, 0 0 3px black'
}
}
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2,5, 3, 4, 7, 2,5, 3, 4, 7, 2,5, 3, 4, 7, 2,]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1,2, 2, 3, 2, 1,2, 2, 3, 2, 1,2, 2, 3, 2, 1,]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5,3, 4, 4, 2, 5,3, 4, 4, 2, 5,3, 4, 4, 2, 5,]
}]
});
});
The code on x axis should be dates from 11/05/2014 to 30/05/2014 . I tried all new Date
unix time stamp and unix time stamp /1000. but nothing works. What I want to achieve is
very straight forward => How to put the dates on x axis of highstock.

Unlike HighCharts, I don't think HighStock support the xAxis.categories config.
However, you could specify the dates directly in serie.data like this:
{
name: 'John',
data: [
[new Date(2014, 5, 11).getTime(), 5],
[new Date(2014, 5, 12).getTime(), 3],
[new Date(2014, 5, 13).getTime(), 4],
...
]
}
And the dates must be in ascending order, otherwise the chart will be broken.
Another thing is you might want to set this to make columns align with date labels correctly.
plotOptions: {
column: {
...
dataGrouping: {
enabled: true,
forced: true,
units: [
['day', [1]]
]
}
}
},
Example JSFiddle: http://jsfiddle.net/1xLny72q/2/
Hope this helps.

When we make Highstock graph by series then we can't pass x-axis seprated data as per like Highchart
like in your code
xAxis: {
categories: [new Date(2014, 5, 30).getTime()/1000,new Date(2014, 5, 29).getTime()/1000,new Date(2014, 5, 28).getTime()/1000,new Date(2014, 5, 27).getTime()/1000,new Date(2014, 5, 26).getTime()/1000,new Date(2014, 5, 25).getTime()/1000,new Date(2014, 5, 24).getTime()/1000,new Date(2014, 5, 23).getTime()/1000,new Date(2014, 5, 22).getTime()/1000,new Date(2014, 5, 21).getTime()/1000,new Date(2014, 5, 20).getTime()/1000,new Date(2014, 5, 19).getTime()/1000,new Date(2014, 5, 18).getTime()/1000,new Date(2014, 5, 17).getTime()/1000,new Date(2014, 5, 16).getTime()/1000,new Date(2014, 5, 15).getTime()/1000,new Date(2014, 5, 14).getTime()/1000,new Date(2014, 5, 13).getTime()/1000,new Date(2014, 5, 12).getTime()/1000,new Date(2014, 5, 11).getTime()/1000 ]
},
its not work in HighStock
for this you need to pass these each separate value on each series like below
{
name: 'John',
data: [
[new Date(2014, 5, 11).getTime(), 5],
[new Date(2014, 5, 12).getTime(), 3],
...
]
},name: 'Jane',
data: [
[new Date(2014, 5, 11).getTime(), 2],
[new Date(2014, 5, 12).getTime(), 3],
...
])
}, {
name: 'Joe',
data: [
[new Date(2014, 5, 11).getTime(), 5],
[new Date(2014, 5, 12).getTime(), 4],
...
]}
and as per #ranTarm dates must be in ascending order and dataGrouping as mention in his comment