I'm trying to build a graphing system whereby line plots which are within a range, are dotted lines and those either exceeding or not reaching the range are drawn in solid lines. That is, in the following array [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], if my range is [4,7] I would have 2 sets of points: my data which is in range (dotted line): [null, null, null, 4, 5, 6, 7, null, null, null]; and my data which is out of range (solid line) [1, 2, 3, null, null, null, null, 8, 9, 10].
I thought I would do this by rending two line plots for each dataset. One with a dotted style and one with a solid style. To achieve this, I tried a POC to create a gap in my line plots.
I thought I might do this by deleting elements in the data series before sending it to be rendered (http://jsfiddle.net/drewsonne/tczooff2/):
var random = new Rickshaw.Fixtures.RandomData(150);
for (var i = 0; i < 150; i++) {
random.addData(seriesData);
}
// Create empty part of graph
for (var i = 70; i < 100; i++) {
delete seriesData[0][i];
}
But I seem to get an straight interpolated line in my graph where the removed elements are.
Is it possible to render a partial line in RickshawJS, or any other method which would achieve my range styling?
I appreciate I may even have to break the plots up into contiguous lines. This would require 3 different plots for my above example. If I do this, I still need to draw a partial plot. Any empty elements in a data set error out in rickshawjs.
EDIT: Solution was to change my above code to remove the 'y' value only, while retaining the 'x' value:
// Create empty part of graph
for (var j = 10; j < 100; j++) {
seriesData[0][j].y = null;
}
Don't know of it helps but I only found that you can end the line prematurely by setting a value to zero:
seriesData[0][75] = 0;
results in red line being drawn only half the normal way.
Looks like gaps are supported only in some types of graphs: http://code.shutterstock.com/rickshaw/examples/gaps.html