Set zero for missing data in highcharts

Question

How to set zero for missing data in highcharts, here I am getting values for 3 days, between days data is not there. Hence for those days I need to set zero

seriesData = [{
    "name": "Questions",
    "data": [
      [1503273600000,1],
      [1504656000000,1],
      [1504742400000,1]
    ]
  }]

Jsfiddle

Thank you...

Answer 1

Highcharts doesn't have a functionality out of the box for this. You need to push the missing points into the array before plotting it.

You can use a simple function like this. Given function is written in typescript, you can mould it to your use.

generateDataSet(data: number[][]): number[][] {
    const temp: number[][] = [];
    data.forEach((d: number[], index) => {
        d[0] *= 1000;
        if (index !=0) {
            if (d[0] - dayTick === data[index - 1][0]) {
                temp.push(d);
            } else {
                let lb = data[index - 1][0];
                const ub = d[0];
                while (lb != ub) {
                    lb += dayTick;
                    temp.push([lb, 0]);
                }
            }
        } else {
            temp.push(d);
        }
    });
    return temp;
}

You can definitely improve the answer as there is always scope for improvements. Till then keep coding.

Here is a working demo highcharts-jsfiddle-example.

Answer 2

You can do it like this

var data = [[1.5032736E12,1.0],[1.504656E12,1.0],[1.5047424E12,1.0]];
        var startDay = data[0][0],
            endDay = data[data.length-1][0]
            isLastDay = startDay == endDay,
            dayTick = 1000 * 60 * 60 * 24,
            temp = [];

        //Create new array with 0 values for each day
        temp.push([startDay, 0])
        while(!isLastDay) {
            startDay += dayTick;
            temp.push([startDay, 0])

            isLastDay = startDay >= endDay;
        }

        //Override all values with existing days
        for (var i = 0; i < data.length; i++)
        for(var j = 0; j < temp.length; j++) {
            if (temp[j][0] == data[i][0]) {
                temp[j][1] = data[i][1];
                break;
            }
        }

    data = temp;

Highcharts.chart('container', {
chart: {
            type: 'line'
        },
   title: {
            text: 'Survey'
        },
        yAxis: {
            title: {
                text: 'Responses'
            }
        },
        xAxis: [{
            type: "datetime",
            title: {
                text: null
            },
            dateTimeLabelFormats: {
                month: "%e.%b<br/>%a"
            }
        }],
           plotOptions: {
            series: {
                marker: {
                    enabled: false
                }
            },
            series: {
                connectNulls: true
            }
        },

    series:[{"name":"Questions","data":data}]

});

In this way you will create a new temp array which will have all days between first and last day with 0 values, and after that you just place existing values in temp array.

Here is the updated jsfiddle