Difference between two series
serieLineDifference, using camel-casing) allows you to color the area between two series,
serieBottom. Different styles can be applied whether
serieTop is above (positive) or below (negative)
serieBottom. The only requirement for this plugin is that the x values of each serie is monotoneously increasing (decreasing will not work).
Let us take the following example:
This code should display the following graph:
Now, we have the data and the smoothed data, and we want to highlight when gas imports are higher than the 10 years average, and when they are lower. A nice way to do that is to color the area between the two series in green when it’s higher, and in red when it’s lower. The plugin
serielinedifference allows you to do that in a few lines of code.
Note that you could do it yourself by adding a polyline shape and calculate the path yourself, but jsGraph does all of that for you.
You need to enable the plugin by feeding the following options to the graph constructor:
and to call the following lines after the graph has been drawn:
You can observe in the previous example that by default, negative zones are colored in red with an opacity of 20% and the positive zones in green, with the same opacity. Those rendering options can be changed either:
- in the plugin constructor
- by fetching the
Shapeobjects of the zones and modifying them
Applying the style of the zones in the constructor options is the easiest way to proceed and takes the following format:
These options are the only one available for styling the polylines from the constructor. Moreover, they will be applied once to the shapes upon creation, not every time they are redrawn. If you change their style after the initialization of the graph, the original style will not be recovered.
jsGraph uses the
polyline shape to draw the zones between the two line series. They both can be retrieved using the methods
For further styling of those shapes, read the documentation of the
Shape object or the
The real force of the
serieLineDifference plugin is its handling of datasets that contain gaps. In this case, the zone will stop as close as possible to the gap and resume after the first point of the next piece of the dataset can be found:
A final word of warning, though. This feature is quite new and though it seems to work fine, you might find it buggy in some specific edge cases. In that case, I’d appreciate if you could report it on the github where the project is hosted. Thanks in advance !