Close

Using Cfchart for charts and graphs in Coldfusion

Coldfusion makes it really simple to create and insert any kind of charts and other displays with the CFChart tag. While this is really an old feature(Available way back in ColdFusion 5), and little has been added to it in later versions, what many people don’t know is that it has now become much more efficient and actually holds its own against using client side JFQuery, CSS and other flash techniques. Cfchart is highly customizable and hence requires no need to involve designers or other javascript expert friends/colleagues whom you might need if you go for other methods. Below are some sample charts generated using CFChart with little styling options applied.

Now lets have a look at the code required to generate the above CFCharts.

<cfchart format=”png” name=”mychart” title=”Fruits Harvest” showlegend=”true”>
<cfchartseries type=”pie”>
<cfchartdata item=”Mangoes Harvest” value=”5000″/>
<cfchartdata item=”Oranges Harvest” value=”4000″/>
<cfchartdata item=”Apples Harvest” value=”3000″/>
<cfchartdata item=”Grapes Harvest” value=”2000”/>
</cfchartseries>
</cfchart>

The result of a query may directly be converted to a chart by using the code below. Coldfusion will generate the chart data items on its own from the query

<cfchartseries type=”bar” query=”data” itemcolumn=”name” valuecolumn=”sales”/>

Cfchart and Cfchartseries have a large number of attributes which maybe used to customize chart. You can check the complete list on Adobe Livedocs at http://bit.ly/cjiRPs and http://bit.ly/b3pioP

The type attribute of Cfchartseries is the most important among the list. It lets you choose from a wide array of chart types such as bar, line, pyramid, area, horizontalbar, cone, curve, cylinder, step, scatter and pie.

But what really takes the pie is the amount of styling options Coldfusion gives to the developers. Instead of setting each of the attributes, I found an easy way of doing this by modifying the built in style files in the folder cf_root\charting\styles and saving them under a new name to access. The style files are simple XML files and modifying them is really easy. One of the coolest attributes was the “show3D” attribute, which gives the chart a 3D effect. The appearance maybe modified to such extents that people will have a hard time figuring out it is custom generated and not designed by a web designer specifically.

Latest stories

  • How Kerala’s IT Sector Braces To Fight COVID-19?

    In India and around the world, the impact of the coronavirus pandemic is evident across all sectors of the economy.  With  COVID-19 spreading rapidly around the world, the pandemic has not only affected the lives of hundreds of thousands of people but also demonstrated a growing impact on the global economy. From companies chalking out […]

  • How a DevOps Approach Helps To Meet Deadlines Every Time ?

    Missing a deadline never feels good!  Despite designing perfect workflows from start to finish, we often found our teams chasing deadlines until the very last moment. This upsetting trend led us to a quest to find out what obstacles prevented our teams from getting work over the finish line in time. The biggest factors contributing […]

  • Can You Fuel The Next Wave of Business Growth During a Pandemic?

    Pandemics and economic recessions are known to create disruptive effects on global economies and businesses. For e.g, the Black Death was a devastating bubonic plague that arrived in Europe during 1347. The catastrophe resulted in the collapse of the feudal system in Europe while replacing it with a more modern employment contract.  Covid-19 pandemic has […]

Leave a Reply

Your email address will not be published. Required fields are marked *