Geek asks and answers

Mix bar and line charts with Rickshaw (d3-based library for js)

When using the d3 Rickshaw construction library, a visualization tool is installed on the chart (any area, line or line). Is there anyway a graph with several rows where one series is depicted as a row and the other as a row?

+5
source share
4 answers

I tried using the same use case.

I modified the source of the rickshaw. But I found it.

nvd3 supports a mixture schedule .

+3
source

Now you can combine rickshaw charts!

The type of visualizer is called "multi." How it works, you give each individual series its own visualizer, 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 }
            ]
        },
    ]
});

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

+1

, , .

:

<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>

Rickshaw.Graph() div. , , x.

, , . , , .

, .

0

Here pull the query to combine multiple charts in Rickshaw. Apparently, the approach still needs some refinement, but it seems that this code works mostly.

Currently, you can clone a property branch and see if it is suitable for your purposes.

0
source

More articles:


All Articles