CODEWITHSUNDEEP
javascriptdygraphs
MechaMarinara
MechaMarinara

Reputation: 620

Dygraph Independent Series without union?

So I'm aware that you can define independent series in Dygraph with an array like so:

[
  [1, null, 3],
  [2, 3, 7],
  [3, null, 7],
]

I get data from a few different data streams. Lets say D1 and D2. I load in D1 and then D2 and add their data one row at a time. I don't really have a way to union D1 and D2 into a single array. I just add rows one at a time as they arrive like so:

[
  [1, null, 3],
  [2, 3, 7],
  [3, null, 7],
  [3, 15, null],
]

So you can see that there are two rows now with 3 as the x value. This all displays on the graph just fine. The problem comes in when you mouse over points on the graph. Only the first row beginning with 3 will show a legend value. The second row with x=3 never shows a legend value.

Here is a demo of what this does:

http://jsfiddle.net/cryptdemon/6WWtz/

And here is a sample where the two x=3 rows are unioned which works properly showing the values for both series:

http://jsfiddle.net/cryptdemon/AYzH2/

Is there any way to get both series to display values with non unioned rows? I'm graphing time stamped data from two separate sources that are loaded in a big json array of just {timestamp, deviceid, value}. Can you guys think of any workarounds for this or am I missing something?

Upvotes: 0

Views: 663

Answers (2)

MechaMarinara
MechaMarinara

Reputation: 620

Well what I decided to do was use Google's visualization library to union the rows. I'm already using google's data tables for Dygraph so, it was easy enough to use another chunk of their API:

https://developers.google.com/chart/interactive/docs/reference#google_visualization_data_group

Here's what I came up with:

var tblCols = Array(numColumnsInTable);

/**
* This is used to union table rows as an aggregator
* function for the google table group
*/
var union = function(values){
    for(var i = 0; i<values.length; i++){
      //our rows are all mutually exclusive
      //except for the x value, so we just
      //look for a value that isn't null
      if(values[i] != null){
        return values[i];
      }
    }
    return null;
  }
}

for(var i=0; i<tblCols.length; i++){
  tblCols[i] = {
    'column' : i+1, 
    'aggregation' : union, 
    'type': 'number'
  }
}

var groupedTable = google.visualization.data.group(
    originalTable, 
    [0], //group by 0th column
    tblCols //columns to put in new table
);

chart.updateOptions({'file': groupedTable});

Upvotes: 0

danvk
danvk

Reputation: 16955

Nope. You'll have to union the data yourself. It's not too hard an algorithm to write. Good luck!

Upvotes: 1

Related Questions