Efficiently Detect Missing Dates In Array And Inject A Null (highcharts And Jquery)

I'm using highcharts.js to visualize data series from a database. There's lots of data series and they can potantially change from the database they are collected from with ajax.

Solution 1:

I wrote this loop.

In my case my data is always keyed to a date (12am) and it moves either in intervals of 1 day, 1 week or 1 month. Its designed to work on an already prepared array of points ({x,y}). Thats what dataPoints is, these are mapped to finalDataPoints which also gets the nulls. finalDataPoints is what is ultimately used as the series data. This is using momentjs, forwardUnit is the interval (d, w, or M).

It assumes that the data points are already ordered from earliest x to foremost x.

dataPoints.forEach(function (point, index) {
    var plotDate = moment(point.x);
    finalDataPoints.push(point);

    var nextPoint = dataPoints[index+1];
    if (!nextPoint) {
        return;
    }

    var nextDate = moment(nextPoint.x);
    while (plotDate.add(1, forwardUnit).isBefore(nextDate)) {
        finalDataPoints.push({x: plotDate.toDate(), y: null});
    }
});

Solution 2:

Personally, object with property names as dates may be a bit problematic, I think. Instead I would create an array of data. Then simple loop to fill gaps shouldn't be very slow. Example: http://jsfiddle.net/4mxtvotv/ (note: I'm changing format to array, as suggested).

var origData = {
        "2015-05-19T00:00:00": 20,
        "2015-05-20T00:00:00": 30,
        "2015-05-21T00:00:00": 50,
        "2015-06-21T00:00:00": 50,
        "2015-06-22T00:00:00": 50
};

// let's change to array format
var data = (function () {
    var d = [];
    for (var k in origData) {
        d.push([k, origData[k]]);
    }
    return d;
})();
var interval = 'Date'; //or Hour or Month or Year etc.

function fillData(data, interval) {
    var d = [],
        now = new Date(data[0][0]), // first x-point
        len = data.length,
        last = new Date(data[len - 1][0]), // last x-point
        iterator = 0,
        y;

    while (now <= last) { // loop over all items
        y = null;
        if (now.getTime() == new Date(data[iterator][0]).getTime()) { //compare times 
            y = data[iterator][1]; // get y-value 
            iterator++; // jump to next date in the data
        }
        d.push([now.getTime(), y]); // set point
        now["set" + interval](now.getDate() + 1); // jump to the next period
    }
    return d;
}

var chart = new Highcharts.StockChart({
    chart: {
        renderTo: 'container'
    },
    series: [{
        data: fillData(data, interval)
    }]
}); 

Second note: I'm using Date.setDay() or Date.setMonth(), of course if your data is UTC-based, then should be: now["setUTC" + interval].