But what if... » flot

Jquery, Flot Tutorial (Part 2 revisited)

Jérémie — Wed, 30 Jun 2010 01:59:13 +0000

Woaw, I’ve never blogged that much in a row. In my previous post, I showed you how to create a pod, and having ajax request to get the data. Actually, this is not the best way to use flot. Flot can redraw your chart “on the fly“, if I can say, if your code is written appropriately.

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 #toScript(url.year, "year")#
var #toScript(url.yearNumber,  "yearNumber")#

$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
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.

Jquery, Flot Tutorial (Part 2)

Jérémie — Sun, 27 Jun 2010 04:29:13 +0000

In my previous post, we created a chart that represent the increase of a given year by month (from january to december). In this post, we’ll see how to create a pod, for a dashboard for example, that uses the previously created page and gives the possibility to query for a special year, and also to display several years. Once again, we’ll use CFCs to query the database and get the data to our chart.

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:












 Year :



 Number of year to display :

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('');

//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…

Jquery, Flot Tutorial (Part 1.5)

Jérémie — Thu, 15 Oct 2009 16:37:35 +0000

Sorry for not posting more often. thanks for all the comments. I’ll work on the frequency of my posts!

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.









SELECT Year(ORDERDATE) AS ORDERYEAR, TOTAL
FROM APP.ORDERS
WHERE Month(ORDERDATE) = #i#
AND Year(ORDERDATE) = #year#

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.

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 #toScript(url.year, "year")#
var #toScript(url.yearNumber, "yearNumber")#

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
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 #toScript(url.year, "year")#
var #toScript(url.yearNumber, "yearNumber")#

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

Jquery, Flot Tutorial (Part 1)

Jérémie — Wed, 08 Jul 2009 10:13:35 +0000

Flot is a great plugin for JQuery! I decided to make a simple tutorial in this part and then try to have something more complex (ajax request pulling out data from the database).

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

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

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

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">

  Flot Examples     
 Chart

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