D3js: Interpolating Missing Time Value As Null In Time Series Data

I am trying to plot a time series data using D3 and running into issues with missing timestamps and width adjustment in it. The data usually comes after every 5 minutes but for som

Solution 1:

I've done something similar by grouping the data together based on some fixed timespan, I think in your case it would be 15 minutes. Something like this:

function group_data_missing (arr) {
    // Group the data into buckets so that missing data is handled properlyvar timespan;
    //this gives 15 minutes in milliseconds
    timespan = 15 * 60 * 1000;
    var dg = [];
    vargroup = [arr[0]];
    for (var i=1; i<arr.length; i++) {
      if (arr[i].date.getTime() - arr[i-1].date.getTime() > timespan) {
        dg.push(group);
        group = [];
      } else { 
        group.push(arr[i]);
      }
    }
    dg.push(group);
    return dg;
  }

This will create an array of arrays, each one being a line segment that is continuous up to 15 minutes. Then just plot each one separately.

Alternatively, if you have a continuous range of dates with some of the actual values that are null, you can use the .defined method on the line definition.

Solution 2:

In order to achieve what you want, you'll have to separate the data.

d3's line function interprets a list of data as coordinates for a single line, no matter the distance between 2 points. Thus, if you would like to show a gap between 2 lines (which actually represent 2 separate lines), you will need to draw them separately.

See a fork of your fiddle with working example.