ProtoChart - Tutorial: Creating a Bar Chart

August 1st, 2008  |  Published in Javascript, Projects, ProtoChart, Prototype, Tutorial

You can view the final result of this tutorial here.

After a lot of email requests and comments suggestions from last post, I am going to start a small tutorial outlining how to use ProtoChart. This first tutorial will cover the basics of ProtoChart and then we will also create a simple Bar Chart using ProtoChart.

Step 0: Download all the required libraries.

Step 1: Setting up your HTML

In order for ProtoChart to work you will need proper doctype. Then you need to insert the following in <head> tags.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"


Please note that you need to change PATH/TO to point at the correct JS files. Once you are done including the required JS files you will also need to create a DIV that will hold your chart. You will need to explicitly provide the width and height in the style attribute for the div. So lets create our DIV element:

<div id="barchart" style="width:500px;height:300px"></div>

Step 2: Creating ProtoChart Object

ProtoChart object takes three parameters:

  1. The element where you want to draw the chart
  2. Data series
  3. Chart Options

We have already create the DIV element where we will create our chart. So now lets look at the Data Series for ProtoChart
You can pass the data using three different methods:

1. Array Of Series:
[data1, data2, ….]

2. Array Of x-y Coordinates:
[ [x1, y1], [x2, y2], [x3, y3], …]

3. Array Of Objects:
Each object is represented like this:

     data: [ [1,2], [3,4], [5,6] ],label: "My First Dataset",
     lines: {show: true, fill: true},
     points: {show: true}

The object representation of the data is highly recommended to use. Since it gives you the ability to define a “label” for the data series which is used in creating the legend chart. The data can be either an array of x-y coordinates or simply and array of data points.

Now lets create the actual chart.

Since we are creating a Bar Chart we will need two data series. Lets call them data1 and data2. The chart we are making is a representation of a the feed stats provided by an awesome service called AideRSS. We have used their API to collect information regarding Ajaxian and Ajax Blog — more specifically we got the data that tell us some stats about the feed such as total number of posts (labelled “All”), total number of good posts (labelled “Good”), average posts per month (labelled “Avg Month”), total number of great posts (labelled “Great”) and finally total number of best posts (labelled “Best”).

So here is the JS that will do the magic:

var graph = new Proto.Chart(
 		data: [[1, 996], [2, 1162], [3, 102], [4, 491], [5, 75]],
 		label: "Ajaxian"
 		data: [[1, 307], [2, 2184], [3, 436], [4, 304], [5, 152]],
 		label: "Ajax"
 	xaxis: {
 		min: 0,
 		max: 6,
 		ticks: [
 			[0, ""],
 			[1, "Good"],
 			[2, "All"] ,
 			[3, "Avg Month"],
 			[4, "Great"],
 			[5, "Best"],
 			[6, " "]
 	legend: {
		show: true
 	points: {
 		show: true
 	bars: {
 		show: true

Lets look at what we did in the code above:

1. First we pass the element where we want to render the chart. The magically $ function comes in action

2. We create our data series using Objects notation. This gives us the ability to provide a “label” for our legend

3. We pass in our options for the chart.  Here we do a bit of a magic to make our chart look great. First is we define our x-axis to have a minimum value of 0 and a maximum value of 6. This create an extra cushion for the bar charts to render properly (since we have more than 1 data series). Next we also define our own labels for the ticks. This makes our graph look even nicer. Since now users have better labels along the axis. You can do similar stuff for the y-axis. Just check out our documentation for further details.

Now one last note before we end this tutorial. You SHOULD always create your chart after your DOM has finished loading. You can use prototype to detect that you via

Event.observe(window, ‘load’, function(){});

This is how your chart should look like:

Bar Chart - Tutorial

Hope you liked this tutorial. If you have any questions please feel free to post your question here and if you find any bugs please use our Google Code site to submit them.

ProtoChart - Download, Examples & Docs Now Available!

July 30th, 2008  |  Published in General, Javascript, ProtoChart, Prototype

We want to thank those of you who waited impatiently for the release. We are now ready to release the code, documentation (better than nothing) and examples to show you how  you can use ProtoChart to create beautiful charts in your next project!

What should you know?

You can go to to view a complete overview about the library.

For all the bugs and feature submission please use our Issue list located at Google Projects.

We hope you like this library and as always we will work to get the bugs fixed and features added to the  library as we go along. Your comments and suggestions are welcome via our blog.

ProtoChart: Prototype + Canvas = Pretty Charts

July 28th, 2008  |  Published in Javascript, Projects, ProtoChart, Prototype

Update: Code and more information can be found here.

We finally have a bit stable version of our new charting library. ProtoChart aims to provide a nice library to draw:

  • Line Chart
  • Bar Chart
  • Pie Chart
  • Curve Chart
  • Mix Chart
  • Area Chart

General set of features:

  • Multiple data series on same graph
  • Legend support
  • Customizable grid, grid border, background
  • Customizable axis-tick values (both x and y)

We are excited to release the code as open source. The motivation is very much drawn from other great charting libraries such as PlotKit, Flot and Flotr. These are some excellent libraries with a lot of neat features. We hope to grow ProtoChart to the same level as them.

For now you can check out our quick demo which should let you play with generic features.

So what’s next?  We will continue to improve on this library as we go and we welcome your reviews, views and opinions. We will shortly release the source code and documentation soon.

Test drive ProtoUI

May 27th, 2008  |  Published in General, Javascript, ProtoUI, Prototype, Scriptaculous, UI

Well we have been recieving a lot of emails since our last post regarding the UI library. We decided to provide an early access to some of the tests for the library and documentation around it. There is a lot of work still to be done and we hope to steer the project according to the feedback we recieve.

You can check out demos and docs here.

Feel free to post your comments/suggestion here.

ProtoChart - Create charts using Prototype and Canvas

May 22nd, 2008  |  Published in Javascript, Projects, ProtoChart, Prototype

Well this isn’t the first library to do this and it won’t be the last. Its not even 100% ready for release but I thought it will be great to get some initial feedback before even releasing any code.

This library (as mentioned in my last post) is heavily motivated and inspired by Flot (a jQuery based plotting library). Its not complete yet and its not that stable yet. So you might see few odd things happening here and there.

You can check out some tests here.

As always, please do give your comments and suggestions but do note that this is just something that I have been working on in my spare time so my replies might be a bit slow and your requested feature might not show up in the code fast enough. But it will be noted and implemented sooner or later.

What’s keeping us busy?

May 21st, 2008  |  Published in General, Javascript, Prototype, UI

Apart from the usual clientel work, we are working hard to bring our UI library to a stable release. A lot of work has been done and a lot more needs to be done. So keep checking the blog for latest updates on that.

This past long weekend (for us canadians) I decided to experiment with canvas and javascript. The reasonable thing to do was to build a simple charting script. After few hours of work and inspiration from Flot (jQuery plotting engine) here is the result:


Of course, this is completely based on Prototype and it supports the basic line chart, scatter plot, bar graphs and maybe next weekend I will add pie chart support to it. The code is still a bit messy so I won’t be posting it right now. I will probably wait till I am done with pie chart support before release an alpha and let you folks test it out.

So yeah a lot is going on but that doesn’t mean we don’t have time to chit chat with others. Feel free to throw us an email if you want to discuss about your next project or if you just want to say hello.

ProtoUI - User Interface Lib (Prototype/Scriptaculous)

May 7th, 2008  |  Published in Javascript, Prototype, Scriptaculous, UI

Well its about time that we told you guys more about the User Interface Lib that we have been working on. Its far from being production ready but since we aim to launch it as an open source project we thought it might be useful to start getting some input from the community.

You can read initial docs but please note that documentation will be changing without any notice. You can also check out demos here.

User Interface Library - Prototype and Scriptaculous

April 8th, 2008  |  Published in Javascript, Projects, Prototype, Scriptaculous, UI

Lately I have been working on a User Interface library that runs on top of Prototype and Scriptaculous framework. Please note that this library is in very early stage and I am planning on releasing the source code soon. Still have a lot of issues to fix and address but I wanted to float the idea in public and get wheels rolling.

So what does this UI library have?

This library will have the following components:

  • Layout
  • Splitter
  • Panel
  • Button
  • Menu
  • Tab
  • Tree
  • and more…

These will be the foundation layer components. With support of Prototype based class inheritance I have also been working on some widgets such as:

  • CheckBoxTree
  • AjaxTree
  • AjaxPanel
  • ButtonMenu
  • ContextMenu
  • Toolbar
  • Accordion
  • and more…

As mentioned earlier I am still working towards first public preview release but if you have any suggestions or comments please feel free to post them here. I should have a first public preview ready for you soon (can’t promise dates yet)

This library is in no-way meant to compete against ExtJS or Dojo or other such libraries but I believe that with community support we can bring an amazing UI layer to Prototype and Scriptaculous framework.

The main focus is to provide solid foundation layer and believe that our community will build and contribute amazing set of Widgets.

Here are screenshots for Button and Splitter (using Firefox 2.0)



ProtoFlow - Now supports Keyboard and Mouse Wheel Events!

March 31st, 2008  |  Published in Javascript, Projects, ProtoFlow, Prototype, Scriptaculous

Well it doesn’t get any better than this. I have been over whelmed by the response that community has given to ProtoFlow. While I am still working to fix some issues with image positioning, Fabian and  Martin posted a add-on for keyboard and mouse wheel support. After integrating their code I had to release it to general public asap. Thank you guys for your contribution.

By default both keyboard and mouse wheel support is turned on. To turn keyboard support off you can set options: enableKeyboard to false and to disable the mouse wheel events just turn enableMouse to false. Notice how the mouse wheel effect only works when your mouse is over the ProtoFlow object.

The latest code should be up here.

Small update to ProtoFlow.

March 26th, 2008  |  Published in Javascript, Projects, ProtoFlow, Prototype

I have released another small update to the script. It has now been tested in IE6 and IE7 along with Firefox 2.0 and Safari. I have also added docs to the project.

I think this script should be in stable condition now. If you stumble upon any bugs or have any suggestions please post them in your comments to this thread.

You can find the latest version for download here.