Search code examples
javascriptdygraphs

Is it possible to highlight 2 series at once in Dygraphs?

I've got a whole set of graphs I produce from a financial model: each one has, say, 5-10 data series on it.

I now want to compare the outputs of two different models: they produce exactly equivalent data series, just with (probably) different numbers in them. I can see three ways of displaying a comparison:

  1. have a graph just showing 2 series, one from each model. Allow the user to select which series to show. This is pretty easy to do, but has the disadvantage that it doesn't show any relationships there might be between series coming from the same model.

  2. Have side by side graphs, one for each model. The highlighting is synchronized, so that the series highlighted on one is highlighted on the other, and the same x value is also highlighted. It seems that this is possible (see this question). This has the disadvantage that the two versions of the series you are most interested in at the moment (the one that is highlighted) are on different charts, so are more difficult to compare.

  3. Have a graph showing all the series from both models. Use the same colors for the series, but have model 1 solid line and model 2 dotted line, say. When you highlight one series, its pair is also highlighted (presumably using the highlight callback). But is it possible to highlight two series at once? This would definitely be my preferred option, if it's possible.

So, is it possible to highlight two series at once? Or, alternatively, is there a better way to show the comparison?

Solution

  • It's not possible to highlight two series at once (in the sense of highlightSeriesOpts), but you can do something similar. When the selected series changes, call:

    g.updateOptions({series: { otherSeriesName: { strokeWidth: 2 } })

    Or however you want to indicate highlighting. You can do this using highlightCallback and unhighlightCallback.