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

Question:
How to mix Rickshaw with Meteor Template?

This topic caught my eye while I was reading the Meteor forum.

Then I created a Meteor application:

ann@envy:~/rickshaw2 $ 
ann@envy:~/rickshaw2 $ 
ann@envy:~ $ meteor create rickshaw2
rickshaw2: created.

To run your new app:
  cd rickshaw2
  meteor
ann@envy:~ $ cd rickshaw2
ann@envy:~/rickshaw2 $ 
ann@envy:~/rickshaw2 $ 
Then I added some syntax to
~ann/rickshaw2/rickshaw2.html
I added just one line of syntax so my html file looks like this:

<head>
  <title>rickshaw2</title>
</head>

<body>
  <h1>Welcome to Meteor!</h1>

  {{> hello}}

</body>

<template name="hello">
  <button>Click Me</button>
  <p>You've pressed the button {{counter}} times.</p>

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

</template>
The main thing to note about my placement is that I put the div-element in the hello-template rather than the body-element.

This allows me to call Rickshaw syntax after the template is loaded into the DOM.

Next, I added some JS to the rickshaw2.js file:

if (Meteor.isClient) {
  // counter starts at 0
  Session.setDefault('counter', 0);

  Template.hello.helpers({
    counter: function () {
      return Session.get('counter');
    }
  });

  Template.hello.events({
    'click button': function () {
      // increment the counter when button is clicked
      Session.set('counter', Session.get('counter') + 1);
    }
  });


  Template.hello.onRendered(function() {
    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(); });

}

if (Meteor.isServer) {
  Meteor.startup(function () {
    // code to run on server at startup
  });
}
The main point to remember about the above syntax is that I need to place my Rickshaw syntax inside an anonymous function.

Then that function needs to be an argument to this function:
Template.hello.onRendered()


After I wrote that syntax, I started the application:

ann@envy:~/rickshaw2 $ 
ann@envy:~/rickshaw2 $ 
ann@envy:~/rickshaw2 $ meteor
[[[[[ ~/rickshaw2 ]]]]]

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

=> App running at: http://localhost:3000/
The application behaved well on my laptop so I deployed it:

ann@envy:~/rickshaw2 $ 
ann@envy:~/rickshaw2 $ meteor --debug deploy rickshaw2.meteor.com
Deploying to rickshaw2.meteor.com.
Now serving at http://rickshaw2.meteor.com
ann@envy:~/rickshaw2 $ 
ann@envy:~/rickshaw2 $ 
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://rickshaw2.meteor.com

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