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"
"http://www.w3.org/TR/html4/loose.dtd">
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:
- The element where you want to draw the chart
- Data series
- 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(
$('barchart'),
[
{
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:
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.
