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

  • 7 Proven Hacks to Enhance Your Mobile App User Experience

    In this digital age of fierce competition, quality and performance easily outweigh brand loyalty. Creating a fluid user experience is essential for the  success of any mobile app. Efficient user experience UX is the backbone of a visually appealing and engaging app. It can either make or break an app.  Here are a few considerations […]

  • Things To Know About App Testing During Development

    With years of experience in app development and testing, we give utmost importance to quality assurance in mobile application development. Our team of adroit software testers ensures that quality assurance is an integral part of the development lifecycle right from ideation to deployment and in post-development reviews. Here are a few things the QA engineers […]

  • Go Live: 6 Things To Do Before Publishing an App

    After years of publishing applications to the app store, our team has come up with a checklist showcasing important things to do before publishing your app on Google Play or Apple App Store. Without further ado, let’s get started.  #1.Thoroughly Understand The App Store Policies and Guidelines It is vital to understand the app publishing […]

Leave a Reply

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