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

  • Manage Remote Teams and Productivity During COVID-19

    With more than  471,862 cases around the globe, the coronavirus (COVID-19) pandemic has a devastating impact not only on the lives of hundreds of thousands of people but also on the global economy. The government aiming to contain and mitigate the disease has initiated the largest Coronavirus lockdown in the country. This has affected the […]

  • Hybrid Mobile Application Development: When, Why, and How

    When it comes to Hybrid mobile application development there is no one-size-fits-all solution. Every solution comes with its own set of pros and cons.  React native Vs Flutter Vs Native app Native and cross-platform approaches using React Native or Flutter have emerged to be popular mobile app development solutions. While native app development has carved […]

  • How To Hire React Native Developers? Highlighting Key Skills

    From being Facebook’s internal Hackathon project to one of the most trending frameworks for cross-platform app development-React Native has made it big! Numerous giants like Instagram, Airbnb, Walmart have developed their apps using React Native technology. Planning to adopt React Native for your next app development project ? Do you want to hire React Native […]

Leave a Reply

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