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”
Sorry, comments are closed for this article.
May 6th, 2007 at 08:42 PM
Rad. I saw Plotr a bit ago but haven’t played with it yet. This is a good excuse.