Flot for jQuery

A lot of people asked me to port Plotr to jQuery, so now they finally have a way to plot charts the easy way. The Flot API looks very promising and the generated charts look gorgeous. You can see a few examples over here.

Google Chart API

Google did it again. This product is simply amazing. While I was thinking a while ago about making an API that returns javascript that draws a chart, Google just renders an image based on the passed url parameters. Here’s an example:

<!--This is a chart rendered by the Google Chart API-->
<img src="http://chart.apis.google.com/chart?
chs=200x125
&amp;chd=s:helloWorld
&amp;cht=lc
&amp;chxt=x,y
&amp;chxl=0:|Mar|Apr|May|June|July|1:||50+Kb"
alt="Chart" />

This renders the following chart:

Google Chart API sample chart.

Really nice and I’m working on some very cool things using the Google Chart API.

Version 0.3.0

In July I told everyone 0.3.0 was coming up in a few weeks, but because I’ve very little time, and some other interesting projects, this version is released with a delay of two months. In the meantime I’ve fixed lots of bugs, and created the plotr configurator. This is a tool you can use to draw charts, take the configuration, and use it elsewhere. Also very important:

Version 0.3.0 is not backwards compatible! The options object’s changed dramatically.

Coming up next…

In the next few months I’m going to write some proper documentation. The reason I haven’t written any is because I want to install a Trac svn browser, so I can manage all the code and docs on this domain, without using the Google Code project hosting. Anyway, this will be my todo list for the rest of 2007.

• Write documentation.
• Fix bugs, especially PieChart and colorscheme bugs.
• Repair SVN (at the time of writing SVN is broken).
• Add mouse interactivity, code donated by Joshua Gross…

Download & usage

Grab your download here. Included in the package: all separate files, a concatenated uncompressed version of plotr, a compressed plotr, and three example files for BarChart, PieChart and LineChart. To use plotr, just add the following code between the head tags:

<script src=\"lib/prototype/prototype.js\" type=\"text/javascript\"></script>
<script src=\"lib/excanvas/excanvas.js\" type=\"text/javascript\"></script>
<script src=\"plotr.js\" type=\"text/javascript\"></script>

So first include Prototype 1.5.1 (didn’t test with other versions, but might work), then ExplorerCanvas and then plotr.

Plotr configuration tool.

PlotrCFG

This new configuration tool let’s you choose some options using checkboxes, textfields and selectboxes in order to configure a chart. It’ll show the changes realtime, and also generate the javascript and html code in order to use it on you own website. Note that I only tested it in FF2 and a tiny bit in IE7. I recommend using Firefox to configure your charts.

Svn & documentation

When I’m back I’ll try to release Plotr as soon as possible, and write some proper documentation. Till then you can get the latest code from svn.

Examples

• Horizontal/vertical BarChart example
• LineChart example
• PieChart example
• Legend example

Changes

There are quite some changes since 0.1.4, I’m not going to list all, but here are the most important ones:

• Shadow drawing.
• Real line charts.
• Adding a legend.
• Better usage of PrototypeJS.

Plotr v0.2.0

Documentation

Because I don’t have much time to write documentation, there isn’t any. I’m planning to set up a installation of Trac on this domain, maybe then I’ll write some example in a wiki. Till then you have to learn by example. There are examples included in the zip package, but you can also see the examples online.

var options = {
	padding: {left: 30, right: 0, top: 10, bottom: 30},
	backgroundColor: '#dbdbdb',
	colorScheme: 'red'
};

/**
 * Plotr.Chart.addTable(table, xcol, yrow, xticks_row)
 * The upper left corner of the table is at (x=0, y=0).
 *
 * The following function call adds the data of element with id 'table'.
 * The data parsing starts at x=1 and y=1, so we avoid the headers. The
 * fourth argument is the row number of the row containing the labels
 * for the xticks.
 */

//initialize a new bar chart
var bar = new Plotr.BarChart('plotr1',options);
//parse the table and add is as a dataset
bar.addTable('table',1,1,0);
//render the barchart
bar.render();