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”!

• make tutorials for newbies like me,
• blog about Coldfusion, Model-Glue and MVC dev as well as ORM dev
• RIA dev (Flex, Air, …)
• release some open source projects I’ve been working on

Let me introduce myself in a few word. I am French and I work as IT manager at the French Chamber of Commerce and Industry in Japan (CCIFJ). So obviously, I work in Japan… I have been using Coldfusion for years now. I am fortunate enough to use CF at work and develop projects on that platform. CCIFJ is a leading French Chamber in the world and the second biggest in Japan after the American Chamber, which means there is a constant need for straight forward development to meet the expectations of the members. I give my best try to meet them!

I hope you’ll find this blog usefull. Do not hesitate to drop a comment, to edit my work to make it better, or to correct me if I am wrong. After all, I am a newbie.

So to start, what if I want to build an online store, using Model-glue (MG)… “I’ll be back!”