Is it possible to show interpolated data using dygraphs?

Question

I have been working for the last months with dygraphs. It is a incredible library and I have got great results but I´m having some problems to find the way of interpolating data from different signals to be shown in the same chart.

The data I received from different sensors have not the same timestamp for the different samples, so for the most of the points of the x axe timestamps I have only the value of one signal. The chart is plotted perfectly, but I would like to see the interpolated value of the rest of the signals in that x point I am pointing over. Below I have the chart I get.

Reading on the dygraph documentation I have seen that when you have independent series, it is possible to see at least the value "undefined" for the signals without data in that point of the x axe.

The csv I use to plot the data is shown below. It has the same structure indicated in the dygraph documentation but I don´t get this undefined label neither.

TIME,LH_Fuel_Qty,L_Left_Sensor_NP 1488801288048,,1.4411650490795007 1488801288064,0.478965502446834, 1488801288133,,0.6372882768113235 1488801288139,1.131315227899919, 1488801288190,1.847605177130475, 1488801288207,,0.49655791428536067 1488801288258,0.45488168748987334, 1488801288288,,1.3756073145270766 1488801288322,0.5636921255908185, 1488801288358,,1.1193344122758362

Thanks in advance.

Answer 1

This is an approach that does not add any data to your csv data and still provides interpolated values for all the columns as you move your mouse around. It adds a listener to the mousemove event within dygraph and interpolates the closest points for all of the data. At the moment I have simply shown it in an extra DIV that is after the graph but you can display it however you like:

function findNextValueIndex(data, column, start) {
  var rows = data.length;

  for (var i = start; i < rows; i++) {
    if (data[i][column] != null) return (i);
  }
  return (-1);
}

function findPrevValueIndex(data, column, start) {

  for (var i = start; i >= 0; i--) {
    if (data[i][column] != null) return (i);
  }
  return (-1);
}

function interpolate(t0, t1, tmid, v0, v1) {
  return (v0 + (tmid - t0) / (t1 - t0) * (v1 - v0));
}

function showValues(headers, colors, vals) {
  var el = document.getElementById("info");
  var str = "";
  for (j = 1; j < headers.length; j++) {
    str += '<p style="color:' + colors[j] + '";>' + headers[j] + ": " + vals[j] + "</p>";
  }
  el.innerHTML = str;
  document.getElementById("hiddenDiv").style.display = "none";
}

function movecustom(event, dygraph, point) {
  var time = dygraph.lastx_;
  var row = dygraph.lastRow_;
  var vals = [];
  var headers = [];
  var colors = [];
  var cols = dygraph.rawData_[0].length;
  
  // draw a line on the chart showing the selected location
  var canvas = dygraph.canvas_;
  var ctx = canvas.getContext("2d");

  ctx.beginPath();
  ctx.lineWidth = 1;
  ctx.strokeStyle = "rgba(0,200,200,0.1)";
  ctx.moveTo( dygraph.selPoints_[0].canvasx, 0);
  ctx.lineTo( dygraph.selPoints_[0].canvasx, 1000);
  ctx.stroke();
  
  
  for (var j = 1; j < cols; j++) {
    colors[j] = dygraph.colors_[j - 1];
    if (dygraph.rawData_[row][j] == null) {
      var prev = findPrevValueIndex(dygraph.rawData_, j, row - 1);
      var next = findNextValueIndex(dygraph.rawData_, j, row + 1);
      if (prev < 0)
        vals[j] = dygraph.rawData_[next][j];
      else if (next < 0)
        vals[j] = dygraph.rawData_[prev][j];
      else {
        vals[j] = interpolate(dygraph.rawData_[prev][0], dygraph.rawData_[next][0], time, dygraph.rawData_[prev][j], dygraph.rawData_[next][j]);
      }
    } else {
      vals[j] = dygraph.rawData_[row][j];
    }
  }

  headers = Object.keys(dygraph.setIndexByName_);

  showValues(headers, colors, vals);
}

window.onload = function() {

  new Dygraph(
    document.getElementById('graph'), document.getElementById('csvdata').innerHTML, {
      connectSeparatedPoints: true,
      drawPoints: true,
      labelsDiv: "hiddenDiv",
      interactionModel: {
        'mousemove': movecustom
      }
    }
  );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/dygraph/2.0.0/dygraph.js"></script>

<div id="graph" style="height:120px;"></div>

<div id="info"></div>
<div id="hiddenDiv" style="display:none"></div>

<pre id="csvdata" style="display:none">
TIME,LH_Fuel_Qty,L_Left_Sensor_NP
1488801288048,,1.4411650490795007
1488801288064,0.478965502446834,
1488801288133,,0.6372882768113235
1488801288139,1.131315227899919,
1488801288190,1.847605177130475,
1488801288207,,0.49655791428536067
1488801288258,0.45488168748987334,
1488801288288,,1.3756073145270766
1488801288322,0.5636921255908185,
1488801288358,,1.1193344122758362
</pre>

Answer 2

Does

connectSeparatedPoints: true

Not do what you need?

Answer 3

It seems that the best way to do this is to massage the data before submitting it to the dygraph call. This means the following steps: 1) parse the csv file into an array of arrays. 2) go through each line of the array to find where the holes are 3) interpolate to fill those holes 4) modify the constructed arrays to be displayed by dygraph 5) call dygraph

Not the most attractive code, but seems to work...

function findNextValueIndex(data, column, start) {
    var rows = data.length;

    for(var i=start;i<rows;i++) {
        if(data[i][column].length>0) return(i);
    }
    return(-1);
}

function interpolate(t0, t1, tmid, v0, v1) {
    return((v0 + (tmid-t0)/(t1-t0) * (v1-v0)).toString());
}

function parseCSV(string) {

    var data = [];

    // first get the number of lines:

    var lines = string.split('\n');

    // now split the first line to retrieve the headings

    var headings = lines[0].split(",");
    var cols = headings.length;

    // now get the data

    var rows=0;
    for(var i=1;i<lines.length;i++) {
        if(lines[i].length>0) {
            data[rows] = lines[i].split(",");
            rows++;
        }
    }

    // now, fill in the blanks - start by finding the first value for each column of data

    var vals = [];
    var times = [];

    for(var j=1;j<cols;j++) {
        var index = findNextValueIndex(data,j,0);
        vals[j] = parseFloat(data[index][j]);
    }

    // now put those start values at the beginning of the array 
    // there is no way to calculate the previous value of the sensor missing from the first sample 
    // so we use the first reading and duplicate it
    for(var j=1;j<cols;j++) {
        data[0][j] = vals[j].toString();
        times[j] = parseInt(data[0][0]);
    }

    // now step through the rows and interpolate the missing values
    for(var i=1;i<rows;i++) {
        for(var j=1;j<cols;j++) {
            if(data[i][j].length>0) {
                vals[j] = parseFloat(data[i][j]);
                times[j] = parseInt(data[i][0]);
            }
            else {
                var index = findNextValueIndex(data,j,i);
                if(index<0) // no more data in this column
                    data[i][j] = vals[j].toString();
                else
                    data[i][j] = interpolate(times[j],parseInt(data[index][0]),parseInt(data[i][0]),vals[j],data[index][j]);
            }
        }        
    }
    // now convert from strings to integers and floats so dygraph can handle it
    // I've also changed the time value so that it is relative to the first element
    // it will be shown in milliseconds
    var time0 = parseInt(data[0][0]);
    for(var i=0;i<rows;i++) {
        data[i][0] = parseInt(data[i][0]) - time0;
        for(var j=1;j<cols;j++) {
            data[i][j] = parseFloat(data[i][j]);           
        } 
    }
    var obj = {
        labels: headings,
        data: data
    }

    return(obj);
}

window.onload = function () {

    var data_obj = parseCSV(document.getElementById('csvdata').innerHTML);


      new Dygraph(
        document.getElementById('graph'), data_obj.data,
        {
          labels: data_obj.labels,
          connectSeparatedPoints: true,
          drawPoints: true
        }
      );
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dygraph/2.0.0/dygraph.js"></script>
<div id="graph" style="height:200px;"></div>

<pre id="csvdata" style="display:none">
TIME,LH_Fuel_Qty,L_Left_Sensor_NP
1488801288048,,1.4411650490795007
1488801288064,0.478965502446834,
1488801288133,,0.6372882768113235
1488801288139,1.131315227899919,
1488801288190,1.847605177130475,
1488801288207,,0.49655791428536067
1488801288258,0.45488168748987334,
1488801288288,,1.3756073145270766
1488801288322,0.5636921255908185,
1488801288358,,1.1193344122758362
</pre>