Display multiple rickshaw graphs on the same html page

Question

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.

Answer 1

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.