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

What worked for me was to add this line at the top of the view:

<%= javascript_include_tag 'jquery-1.5.1','flot/jquery.flot.js','excanvas.pack.js','jquery.flot.pack.js' %>

This means to include in my view all the javascripts needed in order to use flot. Also make sure that you have all of the js files under your /public/javascripts/ folder