score:3

Accepted answer

I tried same use case.

I modified Rickshaw source. But I found this one.

nvd3 supports mixture graph.

score:0

I found more a workaround than a solution, but it may be helpful anyway.

You can draw two Rickshaw graphs on top of each other:

<div style="height: 0; overflow: visible;">
  <div id="barChart" style="height: 300px;"></div>
</div>

<div style="height: 0; overflow: visible;">
  <div id="lineChart" style="height: 300px;"></div>
</div>

Now draw the two charts with two calls to Rickshaw.Graph() for each of the chart divs. Note that you need to duplicate the last point in the line chart, otherwise you will not get accurate matches on the x-axis.

I know that this is ugly, but it can be useful for simple graphs. I don't know what happens if you try this with hover effects or similar, however.

If there's a clean solution for this, I'd be interested, too.

score:0

There's a pull request for combining multiple charts in Rickshaw. Apparently the approach still needs some refining, but the code seems to mostly work.

Currently you can clone the feature branch and see if it fits your purposes.

score:1

You can now combine charts on rickshaw!

The renderer type is called 'multi'. How it works is that you give each individual series it's own distinct renderer i.e.

var graph = new Rickshaw.Graph({
    element: el, width: 960, height: 500,
    padding: { top: 0, right: 0, bottom: 0, left: 0 },
    renderer: 'multi',
    series: [
        {
            renderer: 'line',
            data: [
                { x: 0, y: 40 },
                { x: 1, y: 49 }
            ]
        },
        {
            renderer: 'bar',
            data: [
                { x: 0, y: 30 },
                { x: 1, y: 60 }
            ]
        },
    ]
});

Full example here https://github.com/shutterstock/rickshaw/blob/a240899625c2d83961b3e682cd77ab8e5199a866/tests/Rickshaw.Graph.Renderer.Multi.js


Related Query