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