How to set PointIntervals per month in HighChart

Question

I used HighCharts to plot number of users created on a monthly basis. I managed to show month in x-axis and i set pointInterval as below

pointInterval :24 * 3600 * 1000 * 31

But this was given blindly and it won't plot points correctly. I need to plot points 1st of every month. But the above interval helps to bind points on monthly basis not at the 1st day of month. This example describes my issue. Tooltip gives the clear idea. Here is my code

series: [{
        type: 'area',
        name: 'CDP Created',
        pointInterval: 24 * 3600 * 1000 * 31,
        pointStart: Date.UTC(2005, 0, 01),          
        dataGrouping: {
            enabled: false
        },
        data: [0, 0, 0, 0, 0, 0, 0, 148.5, 216.4, 194.1, 95.6, 54.4]

    }]

Is there anyway to set pointInterval depends on month. Because if i simply given pointInterval as above it will calculate every 31 days. This creates problem when the month has 28 or 30 days. How to acheive it. Also adjusting the width of the container div makes x-axis values not displaying properly. Thanks in advance

Answer 1

Unfortunately it's not possible - pointInterval just increments by given number, so irregular value is not possible. However, you can set directly x-value, see: http://jsfiddle.net/kUBdb/2/

The good thing about JS is that

Date.UTC(2007, 10, 10) == Date.UTC(2005,34, 10)

returns true, so you can freely increment month by one.

Answer 2

You can populate the xaxis value (by month) dynamically and push together with yxais data. The code would be like:

var s = {name: 'serial name', data: []}, 
    serialData = [], categories = [];
var flatData = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120], 
    startDate = Date.UTC(2000, 1, 1);
// Set the xaxis value as first day of month
for (var i = 0; i < flatData.length; i++) {
    var d = new Date();
    d.setTime(startDate);
    d.setMonth(d.getMonth() + i);
    categories.push(d.getTime());
}
for (var i = 0; i < flatData.length; i++) {
    s.data.push([categories[i], flatData[i]]);
}
serialData.push(s);

$('#canvas').highcharts({
    ......
    xAxis: { 
        type: 'datetime', 
    }
    serial: serialData
});

Then the xaxis labels would be 'by month'. Here is the example: JSFiddle.

The idea is imported from here: HighCharts Demo.

Answer 3

You can manually generate date tags and add them to the data list like this:

series: [{
        data: [["Jan 1, 2005", 0], ["Feb 1, 2005", 0], ..., ["Dec 1, 2005", 54.4]],
        pointInterval: 24 * 3600 * 1000 * 31,
        pointStart: Date.UTC(2005, 0, 01)         
    }]

This way, you can use the pointInterval as is (for approximate view on x-Axis), and use the tag on the chart dots (for the exact data).

If you zoom into the chart you will see slight overlap between the dots and the x-Axis ticks, but if you don't need perfect alignment this should do the trick.

To generate the date tags (e.g. "Jan 1, 2005") I would do something like this:

var data = [0, 0, 0, 0, 0, 0, 0, 148.5, 216.4, 194.1, 95.6, 54.4];
var date = new Date("January 1, 2005");
var monthNameList = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

for (i = 0; x < data.length; i++)
{
   var stringDate = monthNameList[date.getMonth()] + " 1, " + date.getFullYear();
    resultList.push(stringDate);
    date.setMonth(date.getMonth() + 1);
}

Then add each item to the data.

Edited: I think the first answer above is a very neat way to generate date tags. (Check the JSFiddle)