Home

Flotomatic

Flotomatic is a Rails wrapper around the flot javascript graphing library.

Flotomatic was originally developed for graphing migraine histories on MigraineLiving.com.

Example

Controller

@flot = TimeFlot.new(‘graph’) do |f| f.bars f.grid :hoverable => true f.selection :mode => “xy” f.filter {|collection| collection.select {|j| j.entry_date < Date.parse(“7/8/2007”)}} f.series_for(“Stress”, @journals, :x => :entry_date, :y => :stress_rating) f.series_for(“Hours of Sleep”, @migraines, :x => :entry_date, :y => :hours_of_sleep) f.series_for(“Restful Night?”, @migraines, :x => :entry_date, :y => lambda {|record| record.restful_night ? 5 : 0 }, :options => {:points => {:show => true}, :bars => {:show => false}}) f.series_for(“Migraines”, @migraines, :x => :entry_date, :y => lambda {|record| record.migraine? ? 4 : nil }, :options => {:points => {:show => true}, :bars => {:show => false}}) end

View

  <%= flot_includes %>

  <h2>Graph the following items</h2>

  <div class='flot_dataset_picker'>
  	<%= flot_selections %>
  </div>

  <h2>My Graph</h2>

  <%= flot_canvas("graph") %>

  <h2>Zoom In / Out</h2>

  <%= flot_overview("asdflkjasdf") %>

  <!-- do the actual plotting... -->
  <% flot_graph("graph", @flot) do %>
  	<%= flot_plot(:dynamic => true, :overview => true) %>
  	<%= flot_tooltip %>
  <% end %>

Flotomatic Javascript Reference

Within the <% flot_graph %> block you will have access to the flotomatic variable.

The flotomatic variable is created with the id of the canvas div, the data, and options supplied through the Flot object passed in to the flot_graph call. For instance:

<% flot_graph(“canvas”, @flot) %> // Results in the following: var flotomatic = new Flotomatic(“canvas”, @flot.data, @flot.options)

Flotomatic methods

Plotting Methods
// actually draws the plot with $.plot
draw: function(placeholder, data, initialOptions, ranges, dynamic, zoom)

// calls draw & sets flotomatic.plot to the returned plot handle graph: function(overview, dynamic) // dynamically graphs with choice input checkboxes for each dataset in flotomatic.data graphDynamic: function() // plots the overview (zoom in / out) graph graphOverview: function()

Tooltip Methods
createTooltip: function(tooltipFormatter)

// default tooltipFormatter tooltipFormatter: function(item) { var date = new Date(item.datapoint⁰), label = item.series.label; return label + ": " + item.datapoint¹ + " on " + (date.getMonth() + 1) + “/” + date.getDate() + “”; }

Copyright © 2009 Michael Cowden, released under the MIT license