CODEWITHSUNDEEP
highcharts
user2070505
user2070505

Reputation: 41

I hope to display empty day to 0 in highcharts

I use line / area chart to display datetime data. see example : http://jsfiddle.net/YFERb/

$(function () {
    var chart = new Highcharts.Chart({

        chart: {
            renderTo: 'container'
        },

        xAxis: {
            type: 'datetime'
        },
        series: [{
            data: [
                [Date.UTC(2010, 0, 1), 29.9],
                [Date.UTC(2010, 0, 3), 106.4],
                [Date.UTC(2010, 0, 5), 75],
                [Date.UTC(2010, 0, 6), 129.2],
                [Date.UTC(2010, 0, 10), 176.0]
             ]
        }]

    });
});

But I want to fill empty day to 0. see example : http://jsfiddle.net/RSPNU/

so below day is filled 0. 2010.0.2, 2010.0.4, 2010.0.7, 2010.0.8, 2010.0.9

I insert 0 in empty day. But it is very heavy.

So I want to display like 2nd example except inserting 0 or null data.

If you have other way, please reply this. thank you.

Upvotes: 4

Views: 1885

Answers (2)

Paweł Fus
Paweł Fus

Reputation: 45079

In general, how Highcharts should know that you want to put 0 every day, not every hour, or maybe every second? If you know how is your data cropped you can set pointInterval and pointStart for a series. Then you can update each of the points which should have different value, see example: http://jsfiddle.net/YFERb/3/

Upvotes: 1

Ricardo Lohmann
Ricardo Lohmann

Reputation: 26320

To avoid points you can set it's value to null.
When you do it your chart will have a gap between null points, so you have to set connectNulls to true.

series: [{
    data: [
        [Date.UTC(2010, 0, 1), 29.9],
        [Date.UTC(2010, 0, 2), null],
        [Date.UTC(2010, 0, 3), 106.4],
        [Date.UTC(2010, 0, 4), null],
        [Date.UTC(2010, 0, 5), 75],
        [Date.UTC(2010, 0, 6), 129.2],
        [Date.UTC(2010, 0, 7), null],
        [Date.UTC(2010, 0, 8), null],
        [Date.UTC(2010, 0, 9), null],
        [Date.UTC(2010, 0, 10), 176.0]
     ]
}],

plotOptions: {
    series: {
        connectNulls: true
    }
}

demo

Upvotes: 1

Related Questions