Simple Time Based Graph Example

Background

Below is some sample code to create a Time based Flot graph with ONE series plotted. We’ll be using points and lines in this graph as i think it looks nicer. We ain’t going through all this trouble to make it harder to read, or uglier are we?

We are going to display a graph with NO legend for a thirty day series of Clicks coming into a web service.

Make sure you’ve installed the plugin as in the README.

Controller Code

Here is code you can use in your controller (mine is called Report Controller).

    class ReportsController < ApplicationController
      def show
        @daily_clicks = DailyClickCount.find(:all, :params => {:id =>current_user.id }) # CHANGE this to whatever you want your series data to be set to from your Database.
        @flot = TimeFlot.new() do |f| #notice there is no 'graph' like in the README example.  Dates didn't display for me, when that was put there.
            f.points #to show points
            f.lines #to show lines inbetween the points
            f.legend(:show => false) # the legend got in my way
            f.grid :hoverable => true #a fancy highlight effect in each point on rollover
            f.series_for("Daily", @daily_clicks, :x => :report_date, :y => :click_count) #replace the x and y symbol values(e.g., report_date) with your column data.
         end
      end
    end

View Code

In your view code, this is all you need. I put this in Reports#show

    <%= flot_includes %>
    <h1>Daily Click Counts for <%= Date.yesterday %> to <%= Date.today - 30 %></h1>
    <%= flot_canvas("graph") %>

<% flot_graph(“graph”, @flot) do %>
<%= flot_plot %>
<% end %>