syntax.us Let the syntax do the talking
Blog Contact Posts Questions Tags Hire Me

Question:
How to mix Meteor with Rickshaw?

I used view-source in my browser to study the syntax served by this URL:

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

I saw this syntax:

<!doctype html>

<script src="../vendor/d3.v3.js"></script>
<script src="../rickshaw.min.js"></script>

<div id="chart"></div>

<script>

var graph = new Rickshaw.Graph( {
    element: document.querySelector("#chart"), 
    width: 500, 
    height: 200, 
    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();

</script>
Then I created a Meteor application:
ann@envy:~/catjpg1 $ 
ann@envy:~/catjpg1 $ cd ~ann
ann@envy:~ $ 
ann@envy:~ $ meteor create rickshaw1
rickshaw1: created.

To run your new app:
  cd rickshaw1
  meteor
ann@envy:~ $ 
ann@envy:~ $ 
Then I added some syntax to
~ann/rickshaw1/rickshaw1.html
I added this syntax:

<div id="chart"></div>

<script>

var graph = new Rickshaw.Graph( {
    element: document.querySelector("#chart"), 
    width: 500, 
    height: 200, 
    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();

</script>
Then I ran a shell command on my laptop:

ann@envy:~/rickshaw1 $ 
ann@envy:~/rickshaw1 $ cd ~ann/rickshaw1/
ann@envy:~/rickshaw1 $ 

ann@envy:~/rickshaw1 $ 
ann@envy:~/rickshaw1 $ meteor add fcallem:rickshaw
                                                     
Changes to your project's package version selections:

d3                added, version 1.0.0
fcallem:rickshaw  added, version 0.0.2

fcallem:rickshaw: Rickshaw is a JavaScript toolkit for creating interactive
time series graphs.
ann@envy:~/rickshaw1 $ 
ann@envy:~/rickshaw1 $ 
ann@envy:~/rickshaw1 $ 
Next I started the application on my laptop:
ann@envy:~/rickshaw1 $ 
ann@envy:~/rickshaw1 $ 
ann@envy:~/rickshaw1 $ meteor
[[[[[ ~/rickshaw1 ]]]]]

=> Started proxy.
=> Started MongoDB.
=> Started your app.

=> App running at: http://localhost:3000/
I loaded localhost:3000 into my browser.

I saw the graph in my browser!

Then I deployed the application so you can see it:

ann@envy:~/rickshaw1 $ 
ann@envy:~/rickshaw1 $ 
ann@envy:~/rickshaw1 $ meteor --debug deploy rickshaw1
Deploying to rickshaw1.meteor.com.
Now serving at http://rickshaw1.meteor.com
ann@envy:~/rickshaw1 $ 
ann@envy:~/rickshaw1 $ 
Notice that I used the --debug option.

This option works-around a minification bug in my mixture of Rickshaw and Meteor.

The price I pay is the site serves bloated JS rather than minified JS.

So, the site would load slowly on my phone.

Also the site would perform poorly if it got more than 1 hit per second.

Fortunately this site gets little traffic:

http://rickshaw1.meteor.com

syntax.us Let the syntax do the talking
Blog Contact Posts Questions Tags Hire Me