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”

On our newly created cfm page (or anything else for the others), let’s first put the chart container

<div id="chart" style="width: 100%; height: 400px">
<div id="loading">
<img src="/assets/images/loader.gif">
</div>
</div>

Nothing too fancy here. I just put a loading image, not really handy now, but its time of glory will come in following posts. Now some javascript.

function drawChart(series,categories) {

chart1 = new Highcharts.Chart({
//Options for the chart goes here
});

}

The drawChart function takes 2 arguments: the series (the data) and the categories (the x axis values). This will give us some room to make an ajax call, process the data and then call the function, passing those 2 arguments. For now let’s concentrate on the options. The first one, chart (options name are in red, parameters in green).

chart: {
renderTo: 'chart',
defaultSeriesType: 'line',
zoomType: 'x'
}

In chart, the renderTo parameter name says it all, where do we want to render the chart. So you need to put the id of the container. defaultSeriesType is the type of chart we want to create (for a complete gallery of series type, have a look at the online gallery of HighCharts). We also want to enable zoom on the chart. just one line, and Boom! (© S. Job)

credits: {
enabled: false
},
title: {
text: 'Tea production'
}

If we want to get rid of the credits (enabled by default), we can set enabled to false. We can also set a title to our chart. If we don’t want one, we have to set text to “” or null. Let’s put a dummy value.

yAxis: {
min: 0,
title: {
text: 'Tea production comparison'
}
}

The yAxis is quite fun to set. First, if min is set to 0, the y axis is going to begin by 0, if you ignore it, the value is calculated automatically. We can go quite deep in the customization of that option. We can also set a title to the y axis (quite useful when you have a double axis chart). Once again, let’s put a dummy one.

xAxis: {
categories: categories
}

The xAxis now. And here is our categories argument. This is going to be the values of our x axis. One important thing, you can set a type to the xAxis (as for the yAxis) : either “linear” or “datetime”. If we choose datetime, we should pass a number in milliseconds and a pointStart parameter of type date, like Date.UTC(2010, 11, 02). The axis is going to be created automatically for us. Very useful for a chart showing the evolution of a currency every 10 mn for example. For our chart, let’s keep the linear type (default by the way).

legend: {
style: {
left: 'auto',
bottom: 'auto',
right: '70px',
top: '35px'
}
}

Next, the legend. We can modify our legend and place it exactly where we want, thanks to css. So, using the style parameter, let’s put our legend to the top right corner of our chart.

tooltip: {
formatter: function() {
return '<span style="font-size:0.9em;color:#666666;">'+ this.series.name +'</span><br/><p style="color:' + this.series.color + '">' + this.y + ' tons of tea in ' + this.x + '</p>';
},
style: {
}
}

We want to format our tooltip to show the name of the the serie, the volume of tea producted for a given year. And as you see, it is quite simple to do using the formatter function and html.The variable this (and this.series) worths a deeper look into. Don’t hesitate to use console.log() to find out what they can offer.

symbols: ["circle","circle","circle"],
series: series

We can also set the symbols of each data series (the appearance of the data points). Here we chose circle, but you have the choice between ‘circle’, ‘diamond’, ‘square’, ‘triangle’ or even ‘triangle-down’. We pass an array of symbols, for each series. It is not a problem to have more symbols in the array than the number of series objects. If we have less than the series, the symbol will be chosen automatically. Finally, the series. And here is our second arguments.

As you see, there is quite a deep level of customization possible with HighCharts. We could set the colors (passing an array of colors as an option) or export the chart in several format (we’ll be back on that subject!).Again, you can find everything about the api on the HighCharts site.

That post turned to be quite long. But here you have the basic explanation of drawing a chart with HighCharts. But how do we get the data? “I’ll be back!”

Let try to do that. As there is no great change on the HTML file, let’s concentrate on the JavaScript. First, we define some global variables. When the page has loaded, we call a getData function, that takes 2 parameters, year and yearNumber.

var $j = jQuery.noConflict();

var plotarea = $j("#placeholder");

var months = ['jan', 'feb', 'mars', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'];

var <cfoutput>#toScript(url.year, "year")#</cfoutput>
var <cfoutput>#toScript(url.yearNumber,  "yearNumber")#</cfoutput>

$j(document).ready(function(){

//Draw the chart
getData(year,yearNumber);

//Put an event listener on every select of the form
$j("select").change(function() {

//Get the selects values
var selectedYear = $j("#year option:selected").text();
if (selectedYear == '') {
selectedYear = year;
}
var selectedYearNumber = $j("#yearNumber option:selected").text();
if (selectedYearNumber == '') {
selectedYearNumber = yearNumber;
}

getData(selectedYear,selectedYearNumber);

})

});

We also add event listeners on the selects of the control form. On Change, we get the value of both selects and call the getData function again. Let’s see that function.

function getData(year,yearNumber) {

var dataObject = [];

$j.getJSON(
'http://dev.eremiya/flot/jquery_flot_1.5/charting.cfc?wsdl',
{ method : 'getStructForChart', returnformat : 'json', queryformat : 'column', year : year, yearNumber : yearNumber },
function(data) {

for (var a=0; a<data.length; a++) {

eval("data" + a + " = []");

for (var i=0; i<data[a].ROWCOUNT; i++) {

var myDate = new Date(data[a].DATA.ORDERDATE[i]+'/01');
eval("data" + a).push([myDate.getMonth(),data[a].DATA.TOTAL[i]]);
var dataYear = myDate.getFullYear();

}

dataObject.push({label:dataYear,data:eval("data" + a)})

}

drawChart({data:dataObject});

}
)

}

The getData function call the CFC and get a JSON response. We format the data, and then we pass the populated data array to the drawChart function (as an option, if you noticed). The drawChart function takes options (you can overwrite them as you wish) and then, guess what…, draw the chart!

function drawChart(options) {

//Some option (edit for your own)
var defaults = {
data : [],
legend: {
show: true,
margin: 10,
backgroundOpacity: 0.5
},
points: {
show: true,
radius: 6
},
lines: {
show: true
},
grid: {
borderWidth:0,
labelMargin:15,
clickable:true,
hoverable:true,
autoHighlight:true
},
xaxis: {
tickSize: 1,
tickFormatter: function(val,axis) {
return months[val];
}
}
};

var options = $j.extend(defaults, options);

$j.plot(plotarea, options.data, options);

plotarea.bind("plotclick", function (event, pos, item) {

if(item != null) {
alert('In '+item.series.label+'/'+item.datapoint[0]+', the order amout is '+item.datapoint[1]);
}

});

}

As you can see, we are going to pass data as an option, and the drawChart function will redraw the chart without any refresh. That’s the magic of jQuery, Flot and ColdFusion. Here is the source code of this post (chart2.cfm). Change it to meet your needs. Again, this is by a newbie for newbies, so let me know if you have a better approach. We’ll progress together.

Here is a preview of what we want to achieve.

Let’s get started! First, a function to load the chart when our page has loaded:

<div id="pod">
<!-- A div that will contain the cart -->
<div id="chartholder" class="binding" url="chart.cfm">

</div>

<!-- Controller for our pod -->
<div id="dataCollector">
<cfoutput>
<form>
<label for="year"> Year :
<select id="year">
<option></option>
<cfloop from="2000" to="2004" index="y">
<option value="#y#">#y#</option>
</cfloop>
</select>
</label>

<label for="yearNumber"> Number of year to display :
<select id="yearNumber">
<option></option>
<cfloop from="1" to="5" index="n">
<option value="#n#">#n#</option>
</cfloop>
</select>
</label>
</form>
</cfoutput>
</div>

</div>

Then some JavaScript. First, a function to call our chart.

if ( $j('.binding') != null ) {

$j.each($j('.binding'),function(){
//console.log($j(this));
divid = $j(this).attr('id');
event = $j(this).attr('url');
//console.log(divid);
doBind({div:divid,url:event});
});

}

When the page has loaded, if there is any element with a class named ‘binding’, get some info (the div ID and the url to call), and call the function doBind:

function doBind(options) {
var $j = jQuery.noConflict();

//Some option (edit for your own)
var defaults = {
div: '',
url: '',
injectResult: ''
};
var options = $j.extend(defaults, options);

//Get the div that we want to update
var updatediv = $j('#' + options.div);

//Show a loader on request
updatediv.html('<div><img src="ajax-loader.gif"></div>');

//The ajax request
$j.ajax({
type: 'GET',
url: options.url,
timeout: 2000, //You can edit that value to be able to extend the timeout time
success: function(data) {

//empty the container div
updatediv.html('');

//Hide the container
updatediv.css('visibility','hidden');

//Put the data
updatediv.html(data);

//Show the updated div
updatediv.css('visibility','visible');

},
//On error
error: function (XMLHttpRequest, textStatus, errorThrown) {
updatediv.html('Timeout contacting server.. '+errorThrown);
}
});
}

The function send an ajax request to the url defined in the div, and update the content of the div. The function is well documented I think, but if you have any question, please drop me a comment. We finally need to put some event listener on our form so that at each change, we update the chart.

//Put an event listener on every select of the form
$j("select").change(function() {

//Get the selects values
var year = $j("#year option:selected").text();
var yearNumber = $j("#yearNumber option:selected").text();

//Create the url
url = 'chart.cfm';
if (year != '') url = url +  '?year=' + year;
if (yearNumber != '' && year != '') {
url = url +  '&yearNumber=' + yearNumber;
} else if(yearNumber != '' && year == '') {
url = url +  '?yearNumber=' + yearNumber;
}

//Call the doBind function and then the options
doBind({
div: 'chartholder',
url: url,

});

})

And there you have it! The final JS should look like this.

var $j = jQuery.noConflict();

$j(document).ready(function(){

//Put an event listener on every select of the form
$j("select").change(function() {

//Get the selects values
var year = $j("#year option:selected").text();
var yearNumber = $j("#yearNumber option:selected").text();

//Create the url
url = 'chart.cfm';
if (year != '') url = url +  '?year=' + year;
if (yearNumber != '' && year != '') {
url = url +  '&yearNumber=' + yearNumber;
} else if(yearNumber != '' && year == '') {
url = url +  '?yearNumber=' + yearNumber;
}

//Call the doBind function and then the options
doBind({
div: 'chartholder',
url: url,

});

})

if ( $j('.binding') != null ) {

$j.each($j('.binding'),function(){
//console.log($j(this));
divid = $j(this).attr('id');
event = $j(this).attr('url');
//console.log(divid);
doBind({div:divid,url:event});
});

}

});

function updateChart() {

}

function doBind(options) {
var $j = jQuery.noConflict();

//Some option (edit for your own)
var defaults = {
div: '',
url: '',
injectResult: ''
};
var options = $j.extend(defaults, options);

//Get the div that we want to update
var updatediv = $j('#' + options.div);

//Show a loader on request
updatediv.html('<div><img src="ajax-loader.gif"></div>');

//The ajax request
$j.ajax({
type: 'GET',
url: options.url,
timeout: 2000, //You can edit that value to be able to extend the timeout time
success: function(data) {

//empty the container div
updatediv.html('');

//Hide the container
updatediv.css('visibility','hidden');

//console.log(data);

//Put the data
updatediv.html(data);

//Show the updated div
updatediv.css('visibility','visible');

},
//On error
error: function (XMLHttpRequest, textStatus, errorThrown) {
updatediv.html('Timeout contacting server.. '+errorThrown);
}
});
}

Here is the source code if you want to try it by yourself. This method is a simple way to have a pod being updated by user input, using ajax. But what if I want to interact with the chart directly? I’ll be back…

Flot is indeed a great plugin. There is a lot of things that can be done using it.
Let’s say, I want to create a chart that represent the increase of a given year by month (from january to december). There is several approach but I will use:

• cfc to get the data from the DB
• custom axis renderer, for reasons I will explain later

Here is a preview of what we want to achieve.

All the data are pulled from the database. For you all to try, I used a dsn that is from the default install of CF. And to make it more “sexy”, we’ll add a zest of ajax!
Let’s get started. First, the cfc. Of course you can get the data with whatever server technology you are using.
We are using the cfartgallery datasourse. In that datasource, you have a table name APP.ORDERS. Basically, in this table, there is the orders for the art gallery application. What we want to do is to call a function that will return a query with the monthly order amount for a special year.

<cffunction name="getByDate" output="false" access="public" returntype="query">
<cfargument name="year" type="Numeric" required="false">

<cfset nq = QueryNew("orderdate, total", "VarChar, Integer")>

<cfloop from="1" to="12" index="i">

<cfquery name="q" datasource="cfartgallery">
SELECT Year(ORDERDATE) AS ORDERYEAR, TOTAL
FROM APP.ORDERS
WHERE Month(ORDERDATE) = #i#
AND Year(ORDERDATE) = #year#
</cfquery>

<cfset temp = QueryAddRow(nq)>
<cfset Temp = QuerySetCell(nq, "orderdate", year & '/0' & i)>
<cfset Temp = QuerySetCell(nq, "total", Val(q.total))>

</cfloop>

<cfreturn nq>
</cffunction>

In this quite simple function, we ccreate a new query named nq then loop for 1 to 12 (which are months of the year, from january to december) the we query the database for each one of those months then we append the new query nq with the total and the date with the format “YYYY/M” (no leading 0). Notice that the only argument we are passing to that function is the year. We’ll come to that later. Notice also that the data type for the orderdate is VarChar. We don’t want to receive a date from the cfc, because it might cause some problems later.

Now, we are going to add a new function to our cfc that we are going to call from our cfm page.

<cffunction name="getStructForChart" output="false" access="remote" returntype="any">

<cfargument name="year" type="Numeric" required="false" default="2004">
<cfargument name="yearNumber" type="Numeric" required="false" hint="Number of preceding years">

<cfset myStruct = arraynew(1)>

<cfset data = getByDate(arguments.year)>
<cfset ArrayAppend(myStruct,data)>

<cfif arguments.yearNumber gt 0>
<cfset arguments.yearNumber = arguments.yearNumber - 1>
<cfloop from="1" to="#arguments.yearNumber#" index="y">
<cfset data = getByDate(arguments.year-y)>
<cfset ArrayAppend(myStruct,data)>
</cfloop>
</cfif>

<cfreturn myStruct>

</cffunction>

In this function, we retrieve the year argument and this time, it has a default value. Because of the data in the table, we set it 2004, but of course in your application, you can set it to whatever is fine, for exaple #Year(Now())# for the current year. We also introduce a new argument “yearNumber” which is the number of preeceding year we want to display.

Here we create an array that will be transform to json when we call the cfc using jquery. In this array, we will put the query returned from the getByDate function. If the yearNumber argument is greater than 0, we loop from 1 to the argument yearNumber and we call the function again by passing a new value for the year argument. Finally, we will append the returned query to the array. That’s it for the cfc.

Now, let’s create the javascript function.

var $j = jQuery.noConflict();

$j(document).ready(function(){

//getData();
drawChart();

});

Just to remind you, as I use different javascript libraries, I defined var $j = jQuery.noConflict(); to avoid conflict.

In my previous blog, I specified an array that will be the data store. Let’s define it again.

var dataObject = [];
var plotarea = $j("#placeholder");

Now let’s defined too important variables and a handy array that we will use for our custom axis rendering:

var <cfoutput>#toScript(url.year, "year")#</cfoutput>
var <cfoutput>#toScript(url.yearNumber, "yearNumber")#</cfoutput>

var months = ['jan', 'feb', 'mars', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'];

The months array is basically an array of strings, but you could put variables if for example your site is multilingual and using a resource bundle. the too variables get the url var of the year and the yearNumber and pass them to the following ajax call to the cfc:

$j.getJSON(
'http://192.168.0.100:81/model/cfc/service/charting.cfc?wsdl',
{ method : 'getStructForChart', returnformat : 'json', queryformat : 'column', year : year, yearNumber : yearNumber },
function(data) {

A great thing with cfc is that you can call it directly and specify that you want a Json result!!! That is a great gain of time!! You can change the url of your cfc but do not forget the  ?wsdl at the end. That makes the magic! Once we receive the response, let’s populate the dataObject array.

for (var a=0; a<data.length; a++) {

eval("data" + a + " = []");

for (var i=0; i<data[a].ROWCOUNT; i++) {

var myDate = new Date(data[a].DATA.orderdate[i]+'/01');
eval("data" + a).push([myDate.getMonth(),data[a].DATA.total[i]]);
var dataYear = myDate.getFullYear();

}

dataObject.push({label:dataYear,data:eval("data" + a)})

}

Here, we loop through the response (which is an array of objects) and we create a dynamic array (eval(“data” + a + ” = []“);) to push our formated data in. then we push the month of our newly formated date (formated for js using the new Date() function) and the according order amount. And finally we push that dynamic array to our dataObject array. Now the rest is just formating.

var options = {
legend: {
show: true,
margin: 10,
backgroundOpacity: 0.5
},
points: {
show: true,
radius: 6
},
lines: {
show: true
},
grid: {
borderWidth:0,
labelMargin:15,
clickable:true,
hoverable:true,
autoHighlight:true
},
xaxis: {
tickSize: 1,
tickFormatter: function(val,axis) {
return months[val];
}
}
};

There is some changes from my previous post, the radius of the point to make them bigger, no formatting on the vertical axis (yaxis), the points are clickable now, and I have a custom renderer on my horizontal axis (xaxis). That function return the month name defined in the months array for a given value. We’re almost done. Let’s draw the chart and add a function to handle the click on a point:

$j.plot(plotarea, dataObject, options);

$j("#placeholder").bind("plotclick", function (event, pos, item) {
alert('In '+item.series.label+'/'+item.datapoint[0]+', the order amout is '+item.datapoint[1]);
});

In that function, when a button is clicked, three variables are passed to the function. the item variable is, as its name tells, the item values (the horizontal and vertical data).  The item.series.label return the label (here the year of the series). Here is the final code:

<cfparam name="url.year" type="numeric" default="2004">
<cfparam name="url.yearNumber" type="numeric" default="0">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>CFC Driven Chart</title>
<meta name="description" content="eremiya" />

<script language="javascript" type="text/javascript" src="jquery/jquery-1.3.2.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery/flot/jquery.flot.js"></script>

</head>
<body>

<div id="placeholder" style="width:800px;height:300px"></div>

<script id="source" language="javascript" type="text/javascript">

var $j = jQuery.noConflict();

$j(document).ready(function(){

//getData();
drawChart();

});

function drawChart() {

var dataObject = [];
var plotarea = $j("#placeholder");

var <cfoutput>#toScript(url.year, "year")#</cfoutput>
var <cfoutput>#toScript(url.yearNumber, "yearNumber")#</cfoutput>

var months = ['jan', 'feb', 'mars', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'];

$j.getJSON(
'http://192.168.0.100:81/model/cfc/service/charting.cfc?wsdl',
{ method : 'getStructForChart', returnformat : 'json', queryformat : 'column', year : year, yearNumber : yearNumber },
function(data) {
for (var a=0; a<data.length; a++) {

eval("data" + a + " = []");

for (var i=0; i<data[a].ROWCOUNT; i++) {

var myDate = new Date(data[a].DATA.orderdate[i]+'/01');
eval("data" + a).push([myDate.getMonth(),data[a].DATA.total[i]]);
var dataYear = myDate.getFullYear();

}

dataObject.push({label:dataYear,data:eval("data" + a)})

}

var options = {
legend: {
show: true,
margin: 10,
backgroundOpacity: 0.5
},
points: {
show: true,
radius: 6
},
lines: {
show: true
},
grid: {
borderWidth:0,
labelMargin:15,
clickable:true,
hoverable:true,
autoHighlight:true
},
xaxis: {
tickSize: 1,
tickFormatter: function(val,axis) {
return months[val];
}
}
};

$j.plot(plotarea, dataObject, options);

$j("#placeholder").bind("plotclick", function (event, pos, item) {
alert('In '+item.series.label+'/'+item.datapoint[0]+', the order amout is '+item.datapoint[1]);
});
}
);

}
&lt;/script&gt;

&lt;/body&gt;

&lt;/html&gt;

Quite a long post, sorry about that! Please tell me what you think about it! And here are the download files!
Hey, but what if we want to change the number of year using ajax?… “I’ll be back… sooner”

Let’s make things first: let’s invoke the scripts.

<script src="../jquery/jquery-1.3.2.js" type="text/javascript"></script>
<script src="../js/jquery/flot/jquery.flot.js" type="text/javascript"></script>
<!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.pack.js"></script><![endif]-->

Then, let’s place a div that will contain the chart.

<div id="placeholder" style="width:600px;height:300px"></div>

Now, let’s put our script to initialize the chart:

<script language="javascript" type="text/javascript">

var $j = jQuery.noConflict();

$j(function () {

var dataArray = [];

for (var i=1; i<13; i++) {
dataArray.push([2000+i,Math.random()*11]);
}

//console.log(dataArray);

var data = [
{
label: "Yearly increase",
data: dataArray
}
];

var options = {
legend: {
show: true,
margin: 10,
backgroundOpacity: 0.5
},
points: {
show: true,
radius: 3
},
lines: {
show: true
},
grid: {
borderWidth:0
},
xaxis: {
tickSize:1
},
yaxis: {
tickSize:1,
tickDecimals: 0
}
};

var plotarea = $j("#placeholder");

$j.plot( plotarea , data, options );
});
</script>

Let me explain: as I am using other js libraries, I did put the first line to avoid conflict

var $j = jQuery.noConflict();

then i specified an array that will be my data store. Math.random()*11 will generate a number randomly between 0 and 10.

var dataArray = [];

for (var i=1; i<13; i++) {
dataArray.push([2000+i,Math.random()*11]);
}

As I would like to have a label on my chart, I can specify that in the data format and pass my dataArray (If I have multiple dataset, that is there I should set them)

var data = [
{
label: "Yearly increase",
data: dataArray
}
];

And I set the options for my grid, x and y axes, the legend and so on…

var options = {
legend: {
show: true,
margin: 10,
backgroundOpacity: 0.5
},
points: {
show: true,
radius: 3
},
lines: {
show: true
},
grid: {
borderWidth:0
},
xaxis: {
tickSize:1
},
yaxis: {
tickSize:1,
tickDecimals: 0
}
};

in more details:

• legend will let you customize the … legend
• points & lines are the type I chose for my series (you could choose bars or the newly pie type)
• the grid is the background of your chart
• xaxis is the “horizontal” line and the yaxis, the … vertical one (you’re maybe not that newbie, sorry!)

for more details, you can check the api text document.

Finally get the placeholder and call flot to draw the chart by passing the variables to the plot function:

var plotarea = $j("#placeholder");

$j.plot( plotarea , data, options );

Here is the final code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title>
<link href="layout.css" rel="stylesheet" type="text/css"></link>
<!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.pack.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../jquery/jquery-1.3.2.js"></script>
<script language="javascript" type="text/javascript" src="../js/jquery/flot/jquery.flot.js"></script>
</head>
<body>
<h2>Chart</h2>
<div id="placeholder" style="width:600px;height:300px"></div>
<script language="javascript" type="text/javascript">

var $j = jQuery.noConflict();

$j(function () {

var dataArray = [];

for (var i=1; i<13; i++) {
dataArray.push([2000+i,Math.random()*11]);
}

//console.log(dataArray);

var data = [
{
label: "Yearly increase",
data: dataArray
}
];

var options = {
legend: {
show: true,
margin: 10,
backgroundOpacity: 0.5
},
points: {
show: true,
radius: 3
},
lines: {
show: true
},
grid: {
borderWidth:0
},
xaxis: {
tickSize:1
},
yaxis: {
tickSize:1,
tickDecimals: 0
}
};

var plotarea = $j("#placeholder");

$j.plot( plotarea , data, options );
});
</script>

</body>
</html>

And here is the final result in your browser:

What if now, we want to pull the data from the database using cf… “I’ll be back”!