Friday, February 2nd, 2007

Plotr: Charting library via canvas with Prototype

Category: Canvas, Prototype

Bas Wenneker has written Plotr, a charting engine in Prototype that uses canvas.



  1. var dataset = {
  2.         'myFirstDataset': [[0, 1], [1, 0.8], [2, 2.3], [3, 1.3], [4, 2.56]],
  3.         'mySecondDataset': [[0, 0.5], [1, 0.5], [2, 2], [3, 1], [4, 1.4]],
  4.         'myThirdDataset': [[0, 0.7], [1, 0.3], [2, 1.5], [3, 0.8], [4, 1.2]],
  5.         'myFourthDataset': [[0, 0.1], [1, 0.1], [2, 0.1], [3, 0.1], [4, 1]]
  6. };
  7. var options = {
  8.     padding: {left: 30, right: 0, top: 10, bottom: 30},
  9.     colorScheme: 'grey',
  10.     backgroundColor: '#d8efb0',
  11.     xTicks: [{v:0, label:'week 1'},
  12.         {v:1, label:'week 2'},
  13.         {v:2, label:'week 3'},
  14.         {v:3, label:'week 4'},
  15.         {v:4, label:'week 5'}
  16.     ]      
  17. };
  19. var lineChart = new Plotr.LineChart('plotr1',options);
  20. lineChart.addDataset(dataset);
  21. lineChart.render();


More examples

Posted by Dion Almaer at 9:14 am

4 rating from 39 votes


Comments feed TrackBack URI

Works in IE!!! Rock!

Comment by JD — February 2, 2007

I second that emotion JD

Comment by Marty — February 2, 2007

First Example works fine in Safari on OSX, Second example not working

Comment by Andreas — February 2, 2007

Looks neat, I’ve also used this library with great success:
It uses a similar approach with the canvas tag and such.

Comment by Adam Sanderson — February 2, 2007

Very cool.

Comment by cyanbane — February 2, 2007

I like the simple way of declaring the data.
Seems to be a good candidate for yet another jMaki wrapper, using the same data model described under:


Comment by Ludo — February 2, 2007

Hi guys,

It’s great to see people actually like it:) Anyway, I don’t have a Mac for testing, so I’d like to ask anyone who’s browsing with Safari to send me bug reports, my email is b.wenneker //at// gmail //dot// com

Comment by Bas Wenneker — February 2, 2007

As someone ignorant of all issues involving canvas, how difficult would it be to make it print consistently across major browsers? In OS X, safari printing of linechart example looks good, but in firefox, the axis labels are messed up.

Comment by Brad — February 2, 2007

Very nice. I’m already looking forward to features to be added in the next release. That would be the capability to use the mouse cursor to drag the chart horizontally. Example can be found here:
(Except Google does it with Flash).

Comment by Kevin Hoang Le — February 2, 2007

This is great!

Tested and working in Opera 9.10.8679, Internet Explorer 7.0.5730, Firefox

Only the colors of the second (gray) bar example are lighter in IE7. Would like to hear from IE6 expiriences.

Comment by Kjell — February 3, 2007

This is a really great concept, but (as far as I’m concerned) unfortunately highly unaccessible. Why not capture tabular data with, you know, pure html tables? we’ve already got today all the necessary markup to do it. Then, yes, it’ll make sense to transform the table into a cute little fancy graph :)

Comment by Rui — February 3, 2007

How about JQuery support?

Comment by Andrey Skvortsov — February 3, 2007

Why not someone else convert it to your fav js framework. If he makes it for Prototype maybe he is comfortable with it.

Comment by JD — February 3, 2007

Rui – um, it is not that hard to change that code to get the data from a table. Not sure what you are having issues with.


Comment by Eric Pascarello — February 4, 2007

When will canvas get support for mouse events the way that VML and SVG do?

Comment by Kevin Hakman — February 4, 2007

Eric: yes, it’s simple to adapt the code, i know :) I was just stating that plotr should capture the dataset from a pure html table *by definition*, instead of defining data in JS. This way, *data* will be always accessible in html from any browser not supported by plotr. Btw, most presentation-related options could be captured from css.

Just my 2 cents.

Comment by Rui — February 4, 2007

I love it. Simple and efficient. I added a stacked bars chart class for my needs. It’s my suggestion, as well as numeric values in labels, rounding of y-axis ticks values, gradient backgrounds (or images). Go on!

Comment by efattal — April 16, 2007

Ok, maybe i’m making life too difficult, but could someone tell me whats going on under the hood css wise?

On ie7 the whole output appears to be position:static, which is a little surreal.

If you think about it.


Comment by trevor — July 2, 2007

Position.relativize ($(‘plotrid’));

So f’ing useful.

Comment by Trevor — July 3, 2007

Leave a comment

You must be logged in to post a comment.