Think-Lab

ColdFusion and jqPlot

Posted by spiraldev, Posted on June 3, 2009

I have been using jQuery for about two years and I have nothing but great things to say about. Everyday I seem to find some sort of new plugin today was no different I stumbled across this sweet graphing plugin called jqPlot.

So here is my first attempt to create a line graph.

Include the following js and css files.

<link rel="stylesheet" type="text/css" href="jquery.jqplot.css" /> <!--[if IE]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]--> <script language="javascript" type="text/javascript" src="jquery-1.3.2.min.js"></script> <script language="javascript" type="text/javascript" src="jquery.jqplot.js"></script> <script language="javascript" type="text/javascript" src="plugins/jqplot.dateAxisRenderer.js"></script> <script language="javascript" type="text/javascript" src="plugins/jqplot.canvasTextRenderer.js"></script> <script language="javascript" type="text/javascript" src="plugins/jqplot.canvasAxisTickRenderer.js"></script> <!-- END: load jqplot -->

I then created a ColdFusion Query.

<!--- Create a new three-column query, specifying the column data types ---> <cfset myQuery = QueryNew("entryTitle, entryDate", "VarChar, date")> <!--- Make two rows in the query ---> <cfset newRow = QueryAddRow(MyQuery, 6)> <!--- Set the values of the cells in the query ---> <cfset temp = QuerySetCell(myQuery, "entryTitle", "CMFL AND JQPlot", 1)> <cfset temp = QuerySetCell(myQuery, "entryDate", "04/12/2009", 1)> <cfset temp = QuerySetCell(myQuery, "entryTitle", "Running Ralio", 2)> <cfset temp = QuerySetCell(myQuery, "entryDate", "07/02/2009", 2)> <cfset temp = QuerySetCell(myQuery, "entryTitle", "OO CMFL", 3)> <cfset temp = QuerySetCell(myQuery, "entryDate", "07/02/2009", 3)> <cfset temp = QuerySetCell(myQuery, "entryTitle", "CMFL AND JQPlot", 4)> <cfset temp = QuerySetCell(myQuery, "entryDate", "07/02/2009", 4)> <cfset temp = QuerySetCell(myQuery, "entryTitle", "Dynamic Mappings in ColdFusion", 5)> <cfset temp = QuerySetCell(myQuery, "entryDate", "06/10/2009", 5)> <cfset temp = QuerySetCell(myQuery, "entryTitle", "Using CFZip", 6)> <cfset temp = QuerySetCell(myQuery, "entryDate", "06/10/2009", 6)> <cfquery dbtype="query" name="qEntries"> SELECT COUNT(entryTitle) as cnt,entryDate FROM myQuery GROUP BY entryDate </cfquery> <cfquery dbtype="query" name="qMinEntryDT"> SELECT min(entryDate) as min_entryDate FROM myQuery GROUP BY entryDate </cfquery>

Next you need to create a container for your graph.

<div id="chartdiv" style="height:400px;width:300px; "></div>

Now the magic.

<script> $(document).ready( function(){ line1 = [<cfloop query="qEntries">[<cfoutput>'#dateformat(entryDate,'yyyy-mm-dd')#',#cnt#</cfoutput>]<cfif recordcount neq currentrow>,</cfif></cfloop>]; plot1 = $.jqplot('chartdiv',[line1],{ title: 'Blog Entries By Date', axes: { xaxis: { renderer: $.jqplot.DateAxisRenderer, min: '<cfoutput>#dateformat(qMinEntryDT.min_entryDate,'yyyy-mm-dd')#</cfoutput>', tickInterval: '1 month', rendererOptions: { tickRenderer: $.jqplot.CanvasAxisTickRenderer }, tickOptions: { formatString: '%b %#d, %Y', fontSize: '10pt', fontFamily: 'Tahoma', angle: -40 } } }, series: [{ lineWidth: 4, markerOptions: { style: 'filledCircle' } }] }); } ); </script>

You can see a demo Here

7 comments - Posted by spiraldev at 8:06 PM - Categories: Coldfusion | jQuery