implement sweet sparklines with plotr

Courtenay : May 6th, 2007

requires: plotr.

You have a bunch of data you want to plot in a sparkish fashion. Lets say they are sparse, one or two every 4 hours. So, lets pull some data clustered in 4-hour increments and spark it up.

Create the data like thusly:

distance = 4.hours # how much we are clustering the results
@sparks = @store.orders.find(:all, 
  :select => "count(id) as count, round(UNIX_TIMESTAMP(created_at)/#{distance}) as timestamp", 
  :group => "round(UNIX_TIMESTAMP(created_at) / #{distance})")

Install plotr javascripts, include them, then in your view dump the placeholder:

<div><canvas id="spark" width="510" height="50"></canvas></div>

And write some javascript

<% baseline = sparks[0]['timestamp'].to_i %>

<script type="text/javascript">
  var dataset = { 'spark': [ <% @sparks.each do |spark| %>
    [<%= spark['timestamp'].to_i - baseline %>, <%= spark.count %>],<% end %>
    []
  ]};
  var spark = new Plotr.BarChart('spark', { colorScheme:'blue', yNumberOfTicks:0,xNumberOfTicks:0,padding:{left:0,right:30,top:0,bottom:10}});
  spark.addDataset(dataset);
  spark.render();
</script>

Mine looked something like this:

1 Response to “implement sweet sparklines with plotr”

  1. Chris Says:

    Rad. I saw Plotr a bit ago but haven’t played with it yet. This is a good excuse.

Sorry, comments are closed for this article.