PlotKit is a Chart and Graph Plotting Library for Javascript. It has support for HTML Canvas and also SVG via Adobe SVG Viewer and native browser support.
PlotKit is fully documented and there is a quick tutorial to get you started.
PlotKit is a complete rewrite of CanvasGraph. It is better structured and supported.
Note: Firefox 1.5+ on Linux and Windows is supported. Firefox 1.5+ on
Mac does not draw labels in SVG, so you must set axisLabelUseDiv
to true
if you want to have maximum compatibility.
Below is a demo of a simple HTML Canvas example which should work in Safari 2, Firefox 1.5, Internet Explorer 6 and Opera 9. And SVG Demo can also be found.
This is the HTML in the above demo:
<div class="demo" id="canvaspie" width="600" height="200"></div> <div class="demo" id="canvasline" width="600" height="200"></div> <div class="demo" id="canvasbar" width="600" height="200"></div>
And the Javascript that is needed to draw the charts:
function demo() {
var hasCanvas = CanvasRenderer.isSupported();
var opts = {
"pieRadius": 0.4
};
var data1 = [[0, 5], [1, 4], [2, 3], [3, 5], [4, 6], [5, 7]];
var data2 = [[0, 2.5], [1, 2], [2, 1.5], [3, 2.5], [4, 3], [5,
3.5]];
var data3 = [[0, 1.25], [1, 1], [2, 0.75], [3, 1.25], [4, 1.5], [5, 1.75]];
if (hasCanvas) {
var pie = new EasyPlot("pie", opts, $('canvaspie'), [data1]);
var line = new EasyPlot("line", opts, $('canvasline'), [data1, data2, data3]);
var bar = new EasyPlot("bar", opts, $('canvasbar'), [data1, data2, data3]);
}
}
If you do not see the above, this is what you should have seen:
PlotKit was created by: Alastair Tse - alastair@liquidx.net
You can reply to me about this on Twitter: Tweet to @liquidx