Search code examples
javascriptdygraphs

Dygraphs library: Access to non-visible data in highlightCallback function possible?

This is a question regarding the Dygraphs library.

When using the "visibility" method in order to suppress the rendering of certain variables of a multivariate time series, only the visible highlighted points get passed to the "highlightCallback" function (third parameter, named "points" in the documentation). It would be convenient if the user had access to all points in the callback function, i.e., highlighted visible points and points that were highlighted if the corresponding variables were to be set visible.

My question: Is there a functionality/work around to gain access to the coordinates of non-visible highlighted points within the (un)highlightCallback function?

In order to clarify the problem, here a quick example:

Let's assume we have the following multivariate time series

"time_index", "var1", "var2"\n
"1", "5.1", "0.3"\n
"2", "5.5", "0.2"\n
"3", "5.8", "0.1"

and a Dygraph object g using this dataset. We set

g.updateOptions({visibility: [true, false]});

and, therefore, the time series corresponding to var1 is drawn whereas var2 is hidden. Now assume that we want to draw a vertical line of length var2 for each highlighted point of the time series var1, i.e.,

  • a line from (1,5.1) to (1,5.4)=(1,5.1+0.3) when point (1,5.1) is highlighted
  • a line from (2,5.5) to (2,5.7)=(2,5.5+0.2) when point (2,5.5) is highlighted
  • a line from (3,5.8) to (3,5.9)=(3,5.8+0.1) when point (3,5.8) is highlighted

This would be done by using the highlightCallback function.

g.updateOptions({
highlightCallback: function(event, x, points, row, seriesName) {
draw_line(points[0],[points[0].xval,points[0].yval+points[1].yval]); 
//draw_line(point_start,point_end)
}
});

Unfortunately, I have not found a way to access the data of the invisible time series var2 (i.e., points[1].yval, here used to determine the length of the vertical line) in the highlightCallback function.

Thank you for your help!

Solution

  • dygraphs does expose a general data access API which you can use from a highlightCallback:

    g.numRows()
g.numColumns()
g.getValue(row, column)

    http://dygraphs.com/jsdoc/symbols/Dygraph.html#getValue

    The "row" parameter to the highlightCallback corresponds to the first parameter to g.getValue().

    Here's an example showing how this works: http://jsfiddle.net/eM2Mg/7/