Help using Flotilla and Ruby on Rails

Question

I'm new to Rails (and StackOverflow), so I apologize if this is a "dumb" question. I've put together a really simple Rails application. It receives data from another server (via HTTP POSTs). I would like to graph the data sent - in particular, I am looking to graph temperature versus time.

I am trying to use Flotilla to generate these graphs, but I can't seem to find much documentation on how to use it except for the one line example on the home page:

        = chart("graph", {"Store 1" => {:collection => @store_one, :x => :date, :y => :sales }, "Store 2" => {:collection => @store_two, :x => :date, :y => :sales }})

This is my index.html.erb:

<table>
  <tr>
    <th>Temperature</th>
    <th>Time</th>
  </tr>

<% for post in @posts %>
  <tr>
    <td><%=h post.temperature %></td>
    <td><%=h post.created_at %></td>
  </tr>
<% end %>
</table>
<%= chart("graph", { "Graph1" => { :collection => @posts, :x => :created_at, :y => :temperature }})%>
<br />

The first part simply prints out the list of temperatures and times. This works fine. Unfortunately, the second part - the actual graph - doesn't seem to work. Nothing actually displays.

If I look at the source of the generated HTML, I see:

    <script language="javascript" type="text/javascript" src="/javascripts/jquery.flot.pack.js"></script>
    <script type="text/javascript">
      $.plot($('#graph'), [{"data":[[1234191865.0,12.0],[1234192069.0,15.0],[1234192113.0,16.0],[1234192123.0,18.0],[1234192189.0,21.0],[1234192203.0,25.0],[1234192320.0,27.0],[1234192329.0,29.0],[1234192384.0,30.0],[1234192391.0,31.0],[1234192402.0,35.0],[1234192409.0,29.0],[1234192412.0,31.0],[1234192414.0,27.0],[1234192419.0,25.0],[1234211826.0,27.0]],"label":"Graph1"}], {});
    </script>

but no actual graph is displayed. Thanks in advance for any help.

Answer 1

Try adding a div element with id graph anywhere in your page; it will be used as a canvas for the chart.

<div id="graph" style="width:600px;height:300px;"></div>

The id of the element must match the string you pass as first parameter to chart.

When in doubt, you can look at the source of the various example pages on the Flot site.

Cheers, V.