CODEWITHSUNDEEP
javascripthighcharts
Satheesh
Satheesh

Reputation: 902

How to set PointIntervals per month in HighChart

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

Upvotes: 7

Views: 15778

Answers (4)

Paweł Fus
Paweł Fus

Reputation: 45079

In v4.1.0 series.pointIntervalUnit was introduced. Use that option to define irregular intervals between points (e.g. day, month, year).

Old Answer (Highcharts < 4.1.0):

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.

Upvotes: 0

Robbie
Robbie

Reputation: 1486

The other answers to this are out of date.

Now all you need to do is add the pointIntervalUnit property. You can combine this with pointInterval to draw irregular intervals :

Highcharts.chart('container', {

...

plotOptions: {
    series: {
        pointStart: Date.UTC(2015, 0, 1),
        pointIntervalUnit: 'month'
    }
},
...

See: https://api.highcharts.com/highcharts/plotOptions.series.pointInterval

Also: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-pointintervalunit/

Upvotes: 2

BoVut
BoVut

Reputation: 103

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)

Upvotes: 0

Joy
Joy

Reputation: 9550

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.

Upvotes: 0

Related Questions