Different series length

[javascriptlove]

Any way to allow different series length to display "cut" areas. A typical usage would be to display 2 charts, the first one being displayed to current date, and the other one would "predict" the future chart flow (for financial charts etc.)

[gitwrob]

I modified the short serie by adding the last element the number of times that the serie needed to have the same length than large serie. The new points are the same and the graphic doesn't paint them.

[kmulvey]

@jahggler I think this branch may help with the prediction end of things

https://github.com/kmulvey/rickshaw/blob/technicals/src/js/Rickshaw.Technicals.js

[dchester]

We now support different series lengths, and so should support this use case.

Here's an example: http://code.shutterstock.com/rickshaw/examples/inconsistent.html

[fbordignon]

Nice feature, but I can't make it work when using scaled Y axis, I get the right render, but with an exception thrown. Just to clear things Rega=Watering So it would be nice to display the Watering times and how it influences the soil moisture sensors. This example is built on top of extensions example. Thanks

Exception: Uncaught stacked series cannot have differing numbers of points: 1912 vs 30; see Rickshaw.Series.fill() Rickshaw.Graph.js:211 (anonymous function) Rickshaw.Graph.js:211 _validateStackable Rickshaw.Graph.js:205 stackData Rickshaw.Graph.js:169 Rickshaw.Graph.Renderer.Rickshaw.Class.create.domain Rickshaw.Graph.Renderer.js:32 discoverRange

Code:

var scales = [];
var scaleTemp = d3.scale.pow().domain([0, 40]);
var scaleHumidity = d3.scale.linear().domain([200, 900]);
var palette = new Rickshaw.Color.Palette( { scheme: 'classic9' } );
// instantiate our graph!
var graph = new Rickshaw.Graph( {
    element: document.getElementById("chart"),
    width: 900,
    height: 500,
    renderer: 'line',
    stroke: true,
    preserve: true,
    series: [
        {
            color: palette.color(),
            data: seriesData[0],
            name: 'Temperatura',
            scale: scaleTemp
        }, {
            color: palette.color(),
            data: seriesData[1],
            name: 'Umidade Manjericão Roxo',
            scale: scaleHumidity
        }, {
            color: palette.color(),
            data: seriesData[2],
            name: 'Umidade Manjericão Verde',
            scale: scaleHumidity
        }, {
            color: palette.color(),
            data: seriesData[3],
            name: 'Rega',
            scale: scaleHumidity
        }/*, {
            color: palette.color(),
            data: seriesData[4],
            name: 'Tokyo'
        }, {
            color: palette.color(),
            data: seriesData[5],
            name: 'London'
        }, {
            color: palette.color(),
            data: seriesData[6],
            name: 'New York'
        }*/
    ]
} );
graph.render();
var hoverDetail = new Rickshaw.Graph.HoverDetail( {
    graph: graph,
    xFormatter: function(x) {
        return new Date(x * 1000).toString();
    }
} );
var annotator = new Rickshaw.Graph.Annotate( {
    graph: graph,
    element: document.getElementById('timeline')
} );
var legend = new Rickshaw.Graph.Legend( {
    graph: graph,
    element: document.getElementById('legend')
} );
var order = new Rickshaw.Graph.Behavior.Series.Order( {
    graph: graph,
    legend: legend
} );
var highlighter = new Rickshaw.Graph.Behavior.Series.Highlight( {
    graph: graph,
    legend: legend
} );
var smoother = new Rickshaw.Graph.Smoother( {
    graph: graph,
    element: $('#smoother')
} );
var ticksTreatment = 'glow';
var xAxis = new Rickshaw.Graph.Axis.Time( {
    graph: graph,
    ticksTreatment: ticksTreatment,
    timeFixture: new Rickshaw.Fixtures.Time.Local()
} );
xAxis.render();
new Rickshaw.Graph.Axis.Y.Scaled({
  element: document.getElementById('axis0'),
  graph: graph,
  orientation: 'left',
  scale: scaleTemp,
  tickFormat: Rickshaw.Fixtures.Number.formatKMBT
});
new Rickshaw.Graph.Axis.Y.Scaled({
  element: document.getElementById('axis1'),
  graph: graph,
  grid: false,
  orientation: 'right',
  scale: scaleHumidity,
  tickFormat: Rickshaw.Fixtures.Number.formatKMBT
});
var controls = new RenderControls( {
    element: document.querySelector('form'),
    graph: graph
} );
var shelving = new Rickshaw.Graph.Behavior.Series.Toggle( {
    graph: graph,
    legend: legend
} );
var preview = new Rickshaw.Graph.RangeSlider.Preview( {
    graph: graph,
    element: document.getElementById('preview'),
} );
var previewXAxis = new Rickshaw.Graph.Axis.Time({
    graph: preview.previews[0],
    timeFixture: new Rickshaw.Fixtures.Time.Local(),
    ticksTreatment: ticksTreatment
});
previewXAxis.render();
graph.update();

Print:

edit. don't mind the flat lines on both moisture sensors, they were implemented at the 14th. the render is very nice, but the preview that should be below the graph does not render.

[pkpp1233]

The inconsistent.html example is a line graph. If I try incomplete series with a stacked bar or area it breaks with the series error.

[Jiloc]

incomplete series works fine just with line graph, everything else breaks.

[rzachariah]

I am pumping realtime data into a rickshaw chart. The number of series I have grows over time. This works fine with a line chart. An area chart gives me this error:

stacked series cannot have differing numbers of points: 3 vs 0; see Rickshaw.Series.fill()

Is area with incomplete series a no go?