reveal search box

PlotKit - Javascript Chart Plotting

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

  • MochiKit 1.3 or higher
  • HTML Canvas: Safari 2+, Opera 9+, Firefox 1.5+, IE 6 (in emulated mode)
  • SVG: Opera 9+, Firefox 1.5+ (see note), IE6 with Adobe SVG.

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)

  • PlotKit is copyright (c) 2006 Alastair Tse. Licensed under the BSD License.
  • excanvas.js is copyright (c) 2006. Google Inc. Licensed under the Apache License.

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

add commentAdd a comment
San says
50
Hi, Does anyone know how to name the x-axis and y-axis?
I have already checked out the xTicks's label option, but I am using that to indicate specific plot points, but would like to have something like x-axis: "Seconds" , and y-axis:"Mails"
  • 2 days, 4 hours ago (30/06/2009)
horoscope says
49
Hi!
It is possible to use the library as it comes! xTickPrecision should limit such problems, however it happens too!
  • 2 days, 15 hours ago (30/06/2009)
Balto says
48
Hi,
First, thanks for providing a useful tool to the public. I'm puzzled by the following:

I changed two lines in the quick start demo:
var layout = new PlotKit.Layout("line", {xTickPrecision:0});
layout.addDataset("sqrt", [[0.0698, 000], [1.01853563, 1000], [2.046628, 1414], [3.04762, 1730], [4.0, 2000]]);

yet when I display the plot (in Firefox) I see all the decimal precision in the x-values shown on the x-axis. I thought the purpose of "xTickPrecision" was to limit this. Is this a known issue or am I using the library incorrectly?
I appreciate your help.
Balto
  • 3 weeks, 2 days ago (09/06/2009)
namensschilder says
47
If any of you familiar with PlotKit have some extra time for some contract
work, please contact me at your earliest convenience. We need help
integrating PlotKit into our website.

Thank you,
  • 1 month, 1 week ago (26/05/2009)
sbihl says
46
Great library. Does anybody develop it further? Last update is dated in august of 2006.
  • 1 month, 2 weeks ago (18/05/2009)
medium says
45

extraordinary! I am amazed, I did not know that you can do graphics with JavaScript. thank you for sharing.
  • 1 month, 2 weeks ago (17/05/2009)
Schauinsnetz says
44
is this the last version? i have a few problems to get this version work! Maybe i made something wrong?
  • 2 months ago (01/05/2009)
rechtsberatung says
43
I was just looking for a tool like this, that would make our metrics look better. Thank you for this great libary!
  • 2 months ago (28/04/2009)
Dida says
42
Wow, what a great library! I really enjoy it.
Didn't know, that you can do graphs with Javascript.
  • 2 months, 1 week ago (23/04/2009)
Smartphone says
41
Looks like a charm! Is is possible to use "live" tooltip?
  • 2 months, 1 week ago (23/04/2009)
Galadriel says
40
Hey, does the library support for dual Y axises?
  • 2 months, 1 week ago (23/04/2009)
j_butterfly says
39
真的很敬佩你!我今天才发现你做的Chart,还有这个网站,感觉真了不起,我也是个程序员,是友财网的作者(http://www.ucai8.com)不过真不能和你比,你真太厉害了,
  • 2 months, 1 week ago (23/04/2009)
j_butterfly says
38
Very cool!I find it just today ,hope go on update..
  • 2 months, 1 week ago (23/04/2009)
Jamorama says
37
Awesome charts mate, I like them because you can see right now what is happening.
  • 2 months, 2 weeks ago (18/04/2009)
Hochzeit Garmisch says
36
Wow!!! That's great stuff! I've never seen this before. Thanx
  • 2 months, 2 weeks ago (16/04/2009)
urlaub says
35
thanks for your commitment
  • 2 months, 2 weeks ago (13/04/2009)
Webdesign says
34
Wow, this is cool. I'm a web developer myself but I didn't know that Javascript can be used to draw pie charts!!
  • 4 months, 1 week ago (22/02/2009)
jQuery Tutorials says
33
There is also another plotting script written in jQuery called <a href="http://code.google.com/p/flot/">flot</a>. But I like the design of PlotKit more...

I really hope the new version/update will be out soon and thanks for this awesom script Alastair Tse...
  • 4 months, 3 weeks ago (11/02/2009)
me says
32
好!
  • 4 months, 3 weeks ago (09/02/2009)
Olivier says
31
I found this code really neat and great, thanks really to the guy who gave his time to write it.

I have a quick question: can the data displayed on y-axis start to a different value from zero?
For instance, let's say the samples would be [100.24, 100.34, 100.45, 100.12], I think the y-axis start value is always zero, unless I am missing something.

Is there a way to change this?
  • 6 months, 3 weeks ago (08/12/2008)
Joe says
30
When will the new build come out - i.e. compatible with IE without any tweaking?
  • 7 months, 4 weeks ago (06/11/2008)
tanzmusik says
29
Thats such a great Plugin. Thanks for coding this
  • 8 months, 1 week ago (25/10/2008)
Z242000 says
28
Anyone else have some decent docs on how to implement a legend with this?
  • 10 months, 2 weeks ago (18/08/2008)
neva says
27
Great library! I just started using it and so far really enjoy it.
  • 11 months, 3 weeks ago (12/07/2008)
Alex says
26
Is there any code difference between the kit downloaded and the one on your site?
  • 11 months, 3 weeks ago (12/07/2008)
Web Design Glasgow says
25
Fantastic - thanks for making these publicly available and for providing great documentation!
  • 1 year, 2 months ago (10/04/2008)
mike says
24
The examples are the kind of very low quality plots I would expect from limited utility spreadsheet programs such as excel.
Can it draw detailed plots too?
  • 1 year, 3 months ago (28/03/2008)
kenoko says
23
Very nice stuff
  • 1 year, 4 months ago (23/02/2008)
Max says
22
I created a www.web2py.com helper to use PlotKit. You can find it in the PlotKit appliance at http://mdp.cti.depaul.edu/appliances
  • 1 year, 5 months ago (29/01/2008)
January Autumn says
21
I've downloaded. But the demo can't run. Pls help me.
  • 1 year, 5 months ago (21/01/2008)
Massimo says
20
Anybody interested in helping make a Gluon (http://mdp.cti,depaul.edu) module for plotkit?
  • 1 year, 7 months ago (05/12/2007)
Santosh says
19
In safari in line chart line are not colored, Can any one guide me on this regard ?
  • 1 year, 7 months ago (22/11/2007)
Sebastian says
18
Hi there !
Plotkit dev team has any plan to make it support negatives? This is a show stopper to me. Well I see those good looking bars and I imagine making a cashflow with them but can't make it because it starts from negatives to positives.
I would love to see plotkit achieving that.
  • 1 year, 7 months ago (15/11/2007)
santosh pandey says
17
I m trying to create a line graph with points, can someone please point me in the right direction ?
  • 1 year, 7 months ago (14/11/2007)
Bobby says
16
Is there any way to feed the data into a pie chart through an excel sheet? please help me ..its very urgent
thanx in advance
  • 1 year, 8 months ago (19/10/2007)
Oli says
15
Is there anyway a hyperlink can be embedded into the dataset display - so a bar...or other charting element can be click and querystring paramaters passed to a page...and pseudo drill-down I suppose?
  • 1 year, 8 months ago (12/10/2007)
Himen says
14
Hi,
I could figure out the problems i faces below. Thanks for providing the library.
I know the tutorial says that lib does not support negative no, but when i plotted a line graph with negative values the result was correct on Mozilla but on IE the display of the no was not proper. Please let me know if you have some solutions for this
  • 1 year, 9 months ago (17/09/2007)
Himen says
13
Hi, I am trying to create a line graph using this library and by default the graph starts from "0". I tried to use xOriginIsZero = false in my options but it still starts from 0 on X-axis. Please let me know the correct way of doing it. Also is there any way i could remove the line which the graph creates at from the last point to the X-axis.

Thanks
  • 1 year, 9 months ago (14/09/2007)
zulyo says
12
for jack include the source refer of excanvas.js ( )
  • 1 year, 10 months ago (04/09/2007)
jack says
11
Hi, first of all, thanks to the great codes! I am trying my web application under IE, but it failed, so i will appreciate it if you give me some suggestions.

I copy the example in quick-start and my graphic options are:

var gOptions = { drawYAxis: false, pieRadius: 0.4, drawBackground: false, axisLabelFontSize: 11, IECanvasHTC: "/javascripts/plotkit/iecanvas.htc" };

Under IE, it tells me "G_vmlCanvasManager is undefined", so what should i do next?

Thanks
  • 1 year, 10 months ago (01/09/2007)
Tim says
10
Thanks for this great library!!
  • 1 year, 10 months ago (24/08/2007)
Weijia says
9
On my local, the example kit only runs with IE, not with FireFox. The fireFox version is 2.0.0.6. But I can run the example on the http://www.liquidx.net/plotkit/ with FireFox.

Is there any code difference between the kit downloaded and the one on your site?

Thanks,
Weijia
  • 1 year, 10 months ago (08/08/2007)
Prasanna says
8
Hi,

Is it possible to use plotkit to plot a live graph or a moving graph.

See "the performace tab" under the windows task manager.

Thanks
Prasanna
  • 1 year, 10 months ago (08/08/2007)
Go Green! says
7
Hello,

Excellent tool but anyone knows how to round the decimals? Having a whole number values on the y-axis.
  • 1 year, 11 months ago (26/07/2007)
Dmitry says
6
Hi,
Thanks for great script.
For my purpose, I add next feature to this script:
1) 'only line' chart
2) legend box
3) few functions for table parsing.
You can find my example with this link
http://dimon372.narod.ru/plotkit/example.html

Maybe, somebody will find it useful.

best regards, Dmitry
  • 1 year, 11 months ago (13/07/2007)
tom says
5
mmh, thanks, but I don't find the position and the syntax where I can put it in. Can you give me an example please?

I call the chart with this code:

var options = {
"xTicks": [{v:1, label:"Open"},
{v:2, label:"Close"},
{v:3, label:"Error"}],
"drawYAxis": false
};
var layout = new Layout("pie", options);
layout.addDatasetFromTable("dataset", $("values"), xcol = 0, ycol = 1);
layout.evaluate();
var chart = new SweetCanvasRenderer($("chart"), layout);
chart.render();
  • 1 year, 11 months ago (13/07/2007)
Alastair Tse says
4
Yes, you definitely can. You just have to pass it an array of MochiKit.Color.Color with your desired colors as the "colorScheme" option to the renderer.

For more information, you should read the <a href="http://media.liquidx.net/js/plotkit-doc/PlotKit.Renderer.html">PlotKit Renderer docs</a>
  • 1 year, 11 months ago (13/07/2007)
tom says
3
hey,

can I set up colors for every pie slice?
I want to have red, yellow and green for the first three values. Please help me :-)
  • 1 year, 11 months ago (12/07/2007)
arikan says
2
Thanks for building this much need library.

At first Plotkit did not work in Ruby on Rails, then I resovled by doing these two things:

1. In MochiKit.js I changed /MochiKit.js$/ to /MochiKit.js/. Removing the $ sign worked because Rails adds id numbers at the end of Javascript files to keep them in cache.

2. I removed scriptaculous.js. It seems like these libs are conflicting somehow.

  • 2 years ago (25/06/2007)
David says
1
SVG charts also work with Safari 3.0 now.
  • 2 years ago (17/06/2007)