Friday, February 2nd, 2007
Plotr: Charting library via canvas with Prototype
<>p>Bas Wenneker has written Plotr, a charting engine in Prototype that uses canvas.Example
JAVASCRIPT:
-
-
var dataset = {
-
'myFirstDataset': [[0, 1], [1, 0.8], [2, 2.3], [3, 1.3], [4, 2.56]],
-
'mySecondDataset': [[0, 0.5], [1, 0.5], [2, 2], [3, 1], [4, 1.4]],
-
'myThirdDataset': [[0, 0.7], [1, 0.3], [2, 1.5], [3, 0.8], [4, 1.2]],
-
'myFourthDataset': [[0, 0.1], [1, 0.1], [2, 0.1], [3, 0.1], [4, 1]]
-
};
-
var options = {
-
padding: {left: 30, right: 0, top: 10, bottom: 30},
-
colorScheme: 'grey',
-
backgroundColor: '#d8efb0',
-
xTicks: [{v:0, label:'week 1'},
-
{v:1, label:'week 2'},
-
{v:2, label:'week 3'},
-
{v:3, label:'week 4'},
-
{v:4, label:'week 5'}
-
]
-
};
-
-
var lineChart = new Plotr.LineChart('plotr1',options);
-
lineChart.addDataset(dataset);
-
lineChart.render();
-
More examples
Related Content:
4.1 rating from 34 votes
Works in IE!!! Rock!
I second that emotion JD
First Example works fine in Safari on OSX, Second example not working
Looks neat, I’ve also used this library with great success:
http://me.eae.net/archive/2006/01/08/charts/
It uses a similar approach with the canvas tag and such.
Very cool.
Nice…
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:
https://jmaki-charting.dev.java.net/
and
http://weblogs.java.net/blog/ludo/archive/2007/01/extending_the_j.html
Ludo
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
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.
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: http://finance.google.com/finance?q=MSFT
(Except Google does it with Flash).
This is great!
Tested and working in Opera 9.10.8679, Internet Explorer 7.0.5730, Firefox 2.0.0.1.
Only the colors of the second (gray) bar example are lighter in IE7. Would like to hear from IE6 expiriences.
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 :)
How about JQuery support?
Thanks.
Why not someone else convert it to your fav js framework. If he makes it for Prototype maybe he is comfortable with it.
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.
Eric
When will canvas get support for mouse events the way that VML and SVG do?
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.
Rui
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!
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.
(Help?)
Position.relativize ($(‘plotrid’));
So f’ing useful.