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

Maks says
50
@steve
Now there is another library. Rgraph.
  • 1 year, 2 months ago (18/11/2010)
steve says
49
Hi,
Is this project still maintained, or has been updated/forked?
Cheers,
Steve
  • 1 year, 8 months ago (27/05/2010)
wespai says
48
thx collect it to

ajax.wespai.com
  • 2 years, 1 month ago (28/12/2009)
Matt says
47
when I add window.onload = function;, the graphs fail to show
  • 2 years, 3 months ago (09/10/2009)
Andreas says
46
Hi!
It is possible to use the library as it comes! xTickPrecision should limit such problems, however it happens too! All in all - a great and useful tool!
Thank you very much!
  • 2 years, 3 months ago (02/10/2009)
warpdesign says
45
Is having graph names supported in this version ?

Haven't had a look more closely yet, but using anything but numbers (ie: any string) as names for the charts doesn't seem to work (outputs "NaN" instead of the chosen string)

This doesn't change the fact that this plugin is real nice !
Good job !
  • 2 years, 4 months ago (30/09/2009)
babyschalen says
44
great work! thanks for this nice script!
  • 2 years, 4 months ago (27/09/2009)
Frank says
43
A very good script. Thanks !
  • 2 years, 4 months ago (27/09/2009)
Juscelino Barao says
42
How to add subtitles in the chart?
  • 2 years, 4 months ago (24/09/2009)
MB says
41
This is so awesome - THANK YOU! I spent hours trying to get nice looking graphs before I found this page
  • 2 years, 4 months ago (22/09/2009)
Mathieu says
40
Hi,

I am using the pie chart. I would like to display 2 decimals on the percentage. Is it possible ? How can i do it ? Because it seems that "PlotKit" doesn't display decimals...

Thanks,

Mat
  • 2 years, 5 months ago (15/08/2009)
Mudasser Abbas says
39
Really its great script and great job ......
  • 2 years, 5 months ago (13/08/2009)
San says
38
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 years, 7 months ago (30/06/2009)
horoscope says
37
Hi!
It is possible to use the library as it comes! xTickPrecision should limit such problems, however it happens too!
  • 2 years, 7 months ago (30/06/2009)
Balto says
36
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
  • 2 years, 7 months ago (09/06/2009)
namensschilder says
35
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,
  • 2 years, 8 months ago (26/05/2009)
sbihl says
34
Great library. Does anybody develop it further? Last update is dated in august of 2006.
  • 2 years, 8 months ago (18/05/2009)
medium says
33

extraordinary! I am amazed, I did not know that you can do graphics with JavaScript. thank you for sharing.
  • 2 years, 8 months ago (17/05/2009)
Schauinsnetz says
32
is this the last version? i have a few problems to get this version work! Maybe i made something wrong?
  • 2 years, 9 months ago (01/05/2009)
rechtsberatung says
31
I was just looking for a tool like this, that would make our metrics look better. Thank you for this great libary!
  • 2 years, 9 months ago (28/04/2009)
Dida says
30
Wow, what a great library! I really enjoy it.
Didn't know, that you can do graphs with Javascript.
  • 2 years, 9 months ago (23/04/2009)
Galadriel says
29
Hey, does the library support for dual Y axises?
  • 2 years, 9 months ago (23/04/2009)
j_butterfly says
28
真的很敬佩你!我今天才发现你做的Chart,还有这个网站,感觉真了不起,我也是个程序员,是友财网的作者(http://www.ucai8.com)不过真不能和你比,你真太厉害了,
  • 2 years, 9 months ago (23/04/2009)
j_butterfly says
27
Very cool!I find it just today ,hope go on update..
  • 2 years, 9 months ago (23/04/2009)
Jamorama says
26
Awesome charts mate, I like them because you can see right now what is happening.
  • 2 years, 9 months ago (18/04/2009)
Hochzeit Garmisch says
25
Wow!!! That's great stuff! I've never seen this before. Thanx
  • 2 years, 9 months ago (16/04/2009)
urlaub says
24
thanks for your commitment
  • 2 years, 9 months ago (13/04/2009)
Webdesign says
23
Wow, this is cool. I'm a web developer myself but I didn't know that Javascript can be used to draw pie charts!!
  • 2 years, 11 months ago (22/02/2009)
jQuery Tutorials says
22
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...
  • 2 years, 11 months ago (11/02/2009)
me says
21
好!
  • 2 years, 11 months ago (09/02/2009)
Olivier says
20
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?
  • 3 years, 1 month ago (08/12/2008)
Joe says
19
When will the new build come out - i.e. compatible with IE without any tweaking?
  • 3 years, 2 months ago (06/11/2008)
tanzmusik says
18
Thats such a great Plugin. Thanks for coding this
  • 3 years, 3 months ago (25/10/2008)
Z242000 says
17
Anyone else have some decent docs on how to implement a legend with this?
  • 3 years, 5 months ago (18/08/2008)
neva says
16
Great library! I just started using it and so far really enjoy it.
  • 3 years, 6 months ago (12/07/2008)
Alex says
15
Is there any code difference between the kit downloaded and the one on your site?
  • 3 years, 6 months ago (12/07/2008)
Web Design Glasgow says
14
Fantastic - thanks for making these publicly available and for providing great documentation!
  • 3 years, 9 months ago (10/04/2008)
mike says
13
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?
  • 3 years, 10 months ago (28/03/2008)
kenoko says
12
Very nice stuff
  • 3 years, 11 months ago (23/02/2008)
Max says
11
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
  • 3 years, 12 months ago (29/01/2008)
January Autumn says
10
I've downloaded. But the demo can't run. Pls help me.
  • 4 years ago (21/01/2008)
Massimo says
9
Anybody interested in helping make a Gluon (http://mdp.cti,depaul.edu) module for plotkit?
  • 4 years, 1 month ago (05/12/2007)
Santosh says
8
In safari in line chart line are not colored, Can any one guide me on this regard ?
  • 4 years, 2 months ago (22/11/2007)
Sebastian says
7
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.
  • 4 years, 2 months ago (15/11/2007)
santosh pandey says
6
I m trying to create a line graph with points, can someone please point me in the right direction ?
  • 4 years, 2 months ago (14/11/2007)
Bobby says
5
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
  • 4 years, 3 months ago (19/10/2007)
Oli says
4
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?
  • 4 years, 3 months ago (12/10/2007)
Himen says
3
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
  • 4 years, 4 months ago (17/09/2007)
Himen says
2
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
  • 4 years, 4 months ago (14/09/2007)
zulyo says
1
for jack include the source refer of excanvas.js ( )
  • 4 years, 4 months ago (04/09/2007)