liquidx / works / Plotkit

Introduction

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.

Requirements

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.

License(s)

Get/Download

Documentation

Development

Examples

Demo

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]);
   }
}

Screenshot

If you do not see the above, this is what you should have seen:

PlotKit Screenshot

About

PlotKit was created by: Alastair Tse - alastair@liquidx.net