Steps to Integrate JqPlots in coldfusion.
1) Download jqplot Files from http://www.jqplot.com/
2) UnZip and rename the Folder Name from "dist" to "jqplot"
3) In the Jqplot folder You can find Examples folder , Where you find the all the sample codes.
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFrgUlLlzJukDjQEtIYn1RbsoMM7F29kVFajt_j2Jrgvz2WvoKskf-NmuRqVvgVBlIWJ3V5zlwwJnXHNGjGU6xRRqpZQQeqq8h3Had8ZtfkWkonCjMtOWc4NJqqtxtFbNmAPr0iEGv63FU/s1600/jqplot.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFrgUlLlzJukDjQEtIYn1RbsoMM7F29kVFajt_j2Jrgvz2WvoKskf-NmuRqVvgVBlIWJ3V5zlwwJnXHNGjGU6xRRqpZQQeqq8h3Had8ZtfkWkonCjMtOWc4NJqqtxtFbNmAPr0iEGv63FU/s320/jqplot.jpg" width="320" /></a></div>
Sample Code
<cfquery name="getsales" datasource="cfartgallery">
select sum(total) as sales, month(orderdate) as month from orders
group by month(orderdate)
</cfquery>
<!--- core data --->
<cfset data = []>
<!--- one series --->
<cfset data[1] = []>
<cfloop query="getsales">
<cfset arrayAppend(data[1], sales)>
</cfloop>
<cfset serializedData = serializeJSON(data)>
<cfset serializedData = replace(serializedData, """", "", "all")>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="jqplot/jquery.jqplot.js"></script>
<script type="text/javascript" src="jqplot/plugins/jqplot.categoryAxisRenderer.js"></script>
<script type="text/javascript" src="jqplot/plugins/jqplot.barRenderer.js"></script>
<link rel="stylesheet" type="text/css" href="jqplot/jquery.jqplot.css" />
<script>
$(document).ready(function() {
<cfoutput>
$.jqplot('chartdiv', #serializedData#,
{
title:'Sales by Month',
series:[ {renderer:$.jqplot.BarRenderer, rendererOptions:{barPadding: 0, barMargin: 3,waterfall:true}} ],
axes:{
xaxis:{renderer:$.jqplot.CategoryAxisRenderer},
yaxis:{min:0}
}
}
);
</cfoutput>
})
</script>
</head>
<body>
<h2>Test jqPlot</h2>
<div id="chartdiv" style="width:400px;height:400px"></div>
</body>
</html>
