CFChart with LightBox

CFChart

In these days, my client want me to integrate CFchart and Lightbox. I know, it’s not easy doing and kinda complicated. That’s why I was doing for that project around 3 hours.

First of all, I need to show pop-up window when users click on each slide of CFchart. That’s why I consider to use “URL” attribute of CFChart. After that, integrate with lightbox. There are so many lightbox features. Among them, I use GreyBox. It’s simple and doesn’t need embed javascript in CFML coding. It’s kinda simple.

WebChart integrate with CFML – 2

I think you would be complicated reading above post, “webchart integrate with CFML”. Ok, I’ll explain you simply. It’s quite simple like using <cfchart>. If you wanna use pie chart with WebChart 3D Donut function, here you go.

First of all, you need to create chart design in WebChart.

After that, you will get following XML code.

<?xml version=”1.0″ encoding=”UTF-8″?>
<pieChart depth=”Double” style=”Solid” type=”MediumNut” angle=”314″ altText=”">
<dataLabels style=”Pattern” placement=”Inside” autoControl=”true” font=”Arial-10″>
<![CDATA[
$(colPercent)
]]>
</dataLabels>
<legend placement=”Right”>
<decoration style=”None” foreColor=”white”/>
<![CDATA[
$(colLabel)
]]>
</legend>
<elements drawOutline=”false” drawShadow=”true”>
<morph morph=”Grow” stage=”Cols”/>
</elements>
<table>
<heatmap isEnabled=”false” minLevel=”0.0″ maxLevel=”0.0″/>
</table>
<popup decoration=”Round” background=”white” foreground=”black”/>
<paint palette=”Pastel” paint=”Plain”/>
</pieChart>

Once you got this code, set it into <cfsavecontent> like as follow:

<cfsavecontent variable=”chartStyle”>
<?xml version=”1.0″ encoding=”UTF-8″?>
<pieChart depth=”Double” style=”Solid” type=”MediumNut” angle=”314″ altText=”">
<dataLabels style=”Pattern” placement=”Inside” autoControl=”true” font=”Arial-10″>
<![CDATA[
$(colPercent)
]]>
</dataLabels>
<legend placement=”Right”>
<decoration style=”None” foreColor=”white”/>
<![CDATA[
$(colLabel)
]]>
</legend>
<elements drawOutline=”false” drawShadow=”true”>
<morph morph=”Grow” stage=”Cols”/>
</elements>
<table>
<heatmap isEnabled=”false” minLevel=”0.0″ maxLevel=”0.0″/>
</table>
<popup decoration=”Round” background=”white” foreground=”black”/>
<paint palette=”Pastel” paint=”Plain”/>
</pieChart>
</cfsavecontent>

So, create like <cfchart> as follow:

<cfchart format=”png” style=”doughnutChart1.xml”>
<cfchartseries type=”pie”>
<cfchartdata item=”2000″ value=”100.0″>
<cfchartdata item=”2001″ value=”200.0″>
<cfchartdata item=”2002″ value=”100.0″>
<cfchartdata item=”2003″ value=”180.0″>
<cfchartdata item=”2004″ value=”200.0″>
</cfchartseries>
</cfchart>

Ok, that’s all. How..?? Easy, isn’t it?

WebChart integrate with CFML

As you know, chart functions are available in CFMX. But, not completely cool. That’s why I’ve been solving how to make which cool chart can be integrate with CFML. I gave 6 hours for this research. Finally, I gotcha this website GreenPoint. This site actually support to developers who wanna make cool chart.

Learn here how to integrate webchart with CFML. HERE.

Following are cool charts I currently make.

Pie Chart integrate with CFML

Pyramid chart integrate with CFML