How to mix Meteor with Rickshaw?

help
1

hello world,

I am new to meteor.

As a starter project I want to use meteor to walk through the Rickshaw demo.

Rickshaw is a js library for displaying time series data:

https://atmospherejs.com/fcallem/rickshaw

The demo starts by creating a div-element:

<div id='chart'></div>


Then I add some JS:


var graph = new Rickshaw.Graph( {
    element: document.querySelector("#chart"), 
    width: 285, 
    height: 180, 
    series: [{
        color: 'steelblue',
        data: [ 
            { x: 0, y: 40 }, 
            { x: 1, y: 49 }, 
            { x: 2, y: 38 }, 
            { x: 3, y: 30 }, 
            { x: 4, y: 32 } ]
    }]
});

graph.render();

Then I should see this:

http://code.shutterstock.com/rickshaw/guide/start.html

When I try this in my meteor project, I see an error in my browswer console:

uncaught exception: Rickshaw.Graph needs a reference to an element

I think the Rickshaw graph is created before meteor creates the div-element.

I assume that people who want to do jquery type things in meteor would bump into a similar isssue.

Question:
In meteor how do I create static html which libraries like jquery can operate on?

Dan

2

Put <div id='chart'></div> inside a template and use the onRendered callback of the tempalte

template.js

<tempalte name='rickkshaw'>
        <div id='chart'></div>
</template>

rickshaw.js

Template.rickkshaw.onRendered(function() {
       // your javascript code here
 });
3

You may want to consider other charting libraries that have meteor packages.
I’ve worked with a lot of charting libraries. If you need few chart options I think ChartJS (which uses canvas) will give you the fastest render, and easiest set up. C3 has more visualization options and easy syntax and is closer to Rickshaw (using D3 and SVG). In my tests ChartJS renders in 70ms and C3 in 200ms. This makes a noticeable difference in mobile.