Flot on Rails

Flot is a powerful charting library for jQuery, and flot_on_rails aims to
package it up into a nice, easy to use Ruby interface. Flotilla is another
library that aims to do the same thing, but I found it a little confusing
and there was no test coverage. After hacking around on it for a bit, trying
to make it fit my needs I decided to roll my own instead.

Installation

You will need jquery, flot, and excanvas javascript files in order for Flot
to function. If you install by using script/plugin install, then these files
should already be copied into your public/javascripts directory. If you
install it any other way, you can run the following rake task:

rake flot_on_rails:initialize

Which will copy the files to your javascript directory

Description/Usage

The chart will likely be accessed through the ‘flot_chart’ view helper method.

• The flot_chart method takes 3 parameters.
  1. element
     • This is the id of the html element on the page that we are going to draw the chart in
     • example:
       • ‘placeholder’
  2. data_sets
     • This is all the data that we are going draw on the chart.
     • The hash key will be used as the data_sets label on the chart legend
     • data is the data_set to be plotted, in this case an array of ActiveRecord objects.
     • xaxis is the attribute or method of the data_set to be plotted along the charts x axis
     • Sam thing applies for yaxis
     • example:
       • {’Cats’ => {:data => Cats.all,
         :xaxis => ‘age’,
         :yaxis => ’number_of_lives’}}
  3. chart_options (optional hash)
     • These are optional chart-wide settings, such as background color, or axis mode
     • example:
       • {"xaxis": {"mode": "time"}} *note, this one will be set automatically by the library for whichever axis is a date object

Example

This Ruby code:

<%= flot_chart('placeholder', {
  "Running" => {:data => TrainingSession.running, 
    :xaxis => 'training_date', 
    :yaxis => 'distance' }) %>

Will generate the following HTML:

<script type="text/javascript">
$(function () {
$.plot($('#placeholder'), [{"label": "Cycling", "data": [[1240185600000, 10.0], [1240358400000, 12.0], [1236556800000, 8.0]]}], {"xaxis": {"mode": "time"}});
});
</script>

A slightly more complex example

This Ruby code:

<%= flot_chart('placeholder', {
  "Running" => {:data => TrainingSession.running, 
    :xaxis => 'training_date', 
    :yaxis => 'distance', 
    :set_options => {
      :points => {:show => false},
      :lines  => {:show => true}} },
  "Cycling" => {:data => TrainingSession.cycling, 
    :xaxis => 'training_date', 
    :yaxis => 'distance', 
    :set_options => {
      :points => {:show => true},
      :lines  => {:show => false}}}}) %>

Will generate the following html:

<script type="text/javascript">
$(function () {
$.plot($('#placeholder'), [{"points": {"show": true}, "lines": {"show": false}, "label": "Cycling", "data": [[1240185600000, 10.0], [1240358400000, 12.0], [1236556800000, 8.0]]}, {"points": {"show": false}, "lines": {"show": true}, "label": "Running", "data": [[1231027200000, 7.0], [1231545600000, 8.0], [1233014400000, 3.0], [1233964800000, 2.0], [1234828800000, 1.0], [1235174400000, 3.75], [1238025600000, 3.0], [1238976000000, 2.0], [1239148800000, 3.0], [1240099200000, 3.75], [1240272000000, 3.0], [1240876800000, 3.0], [1240358400000, 5.0]]}], {"xaxis": {"mode": "time"}});
});
</script>

Here is what you end up with

Notice that in this case we also supplied each data_set with options unique to itself. So here the Cycling points are just dots, with no lines connecting them, while the Running points are just lines, with no dots on the data point.

Here is a chart I have generated using flot_on_rails for a training log application I have written. It will help give an indication of more complicated charts that can be built with this tool.

You can find some more information by looking at the spec files, the flot documentation, or just playing around.

Copyright © 2009 Shane Wolf, released under the MIT license