But what if... » Coldfusion

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…

Free Currency converter using Coldfusion, Google and Regex

Jérémie — Mon, 21 Jun 2010 17:49:48 +0000

Here is an easy and free way to add a currency converter to you application.

First, let’s define some variables.

Then, let’s get an HTTP request to Google search page.

Pretty simple stuff so far. If you actually go to that url, you’ll see the result that we want in bold on the Google result page. That’s what we want. As ColdFusion stores the response in cfhttp.FileContent, let’s get that.

Now, let’s use regex to extract the data we want.

]*>.+?',c)>

REMatch will return an array. Studying the Dom of the Google page, there is only one h2 node with a class and a defined style (let’s hope it stays that way!!!).That will return something like this :

1 Euro = 112.815605 Japanese yen

If you want to use that like it is, you are done. If you just need the value, add that:

This will select the part after the equal sign.

112.815605 Japanese yen

And the following expression will extract the part in front of the first space character.

And then you have it. Now you can format that number as you want.

112.815605

Hope that is useful to someone! Here is a cfc with that function.

Note : This function is a hack and surely not ideal. The Google.com page changed and there is a pound sign now in the url which makes cfhttp request unstable. That is why I use google.co.jp for the moment. It will work if Google does not change the Dom of their result page…

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”

Hello world! (eremiya version)

Jérémie — Sat, 04 Jul 2009 03:29:57 +0000

Hi and welcome to my blog. I am new to the blogging community but I’ve been there for years, hiding among you guys! I decided to create that blog for many reasons, but mainly to :

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