In my previous post, I talked about the various options allowed by the HighCharts library to draw a chart. Now let’s talk about data! Things are beginning to be interesting!

There are 2 things we must know when we want to use a charting library to represent our data:

1. Our own data (knowing our data well will help us to format it without being a pain in the … head! You’ll understand what I mean in following posts)
2. The format accepted by the library we are going to use

Once we know that, we have nothing to fear! For that post, we will create the data, so wedon’t have to worry about knowing our data. Let’s Examine the format of the series array that we should pass to our drawChart function. Here is a simple representation (I hope) of the series format.

Series is an JavaScript array of objects (or structures) containing 2 elements : the name of the series (a string) and the data (an array). Here is an article form the evil empire explaining JavaScript Object Notation. So, let’s format create an array of objects to send it to our drawChart function.

var $j = jQuery.noConflict();
var chart1; // globally available

$j(document).ready(function() {
//Put the logic here
});

The best place to put the code formatting the data (and next the ajax call) is in the onDomReady function. It will be called once the page has loaded. But of course, you can place it where ever is fine with you.

var series1 = [];
var series2 = [];
var series3 = [];
var categories = [];

Then let’s define our series arrays (the data array of each object) and the categories array.

for(i=1;i<13;i++) {
//Populate the data with random values
series1.push(Math.round(Math.random()*100));
series2.push(Math.round(Math.random()*100));
series3.push(Math.round(Math.random()*100));
//Create the categories object
categories.push(2000+i);
}

So, to populate our arrays, we will create random numbers (between 0 & 1), multiply that number by 100 and round the result to the nearest integer (for information on math functions of JavaScript). We then push (I love that word!) the number in the array. And we do it for the 3 arrays. As we want to represent 12 years of tea production, we loop from 1 to 12, and create the years that we push to the categories array.

So now we are almost done. We just need to put those arrays in objects and push those objects in our main array. Nothing dificult:

var series = [
{
name:'France',
data: series1
},
{
name:'USA',
data: series2
},
{
name:'Japan',
data: series3
}
]

And here it is. Now we can call the drawChart function and pass the 2 arguments, series and categories. And this is the result :

So you can see that our chart just look as we wanted, based on the options we set. Here is the source code for those who wants to try. Play with the chart, I have no doubt you’ll find it powerful. But what if we want to pull the data from the database using cfc and Json? “I’ll be back”