Search code examples
javascripthtmlcssrickshaw

Display multiple rickshaw graphs on the same html page

I currently have a couple of dynamically generated JS based Rickshaw graphs similar to http://code.shutterstock.com/rickshaw/examples/extensions.html

I am kinda new to JS, html etc. How do I go about displaying more than one rickshaw graph on the same html page?

NOTE: I am NOT asking about showing multiple trends on the same graph.

Solution

  • let's say you have the following graph:

    var graph = new Rickshaw.Graph({
    series: [ { data: [ { x: 0, y: 2 }, { x: 1, y: 4 } ...
    renderer: 'area',
    element: document.querySelector('#graph')
});

graph.render();

    what you've just done is create a global variable called graph that is an instance of the Rickshaw class*, which renders content to the HTML element whose id is graph (ie: <div id="graph"></div>).

    To render another graph, create a new instance:

    var graph2 = new Rickshaw.Graph({
    series: [ { data: [ { x: 0, y: 5 }, { x: 1, y: 9 } ...
    renderer: 'area',
    element: document.querySelector('#graph2')
});

graph2.render();

    ... and bind it to a new element:

    <div id="graph2">

    *Although Javascript has prototypes rather than classes, it is helpful to think of functions in classical terms sometimes when you are invoking them with the new keyword.