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 to build a scalable web application using Microservices Architecture

    Millions of people worldwide stream more than two billion hours worth of video from Netflix each month. Another example is Facebook, which roughly had 2.85 billion active users in the first quarter of 2021. Talking about the e-commerce giant, Amazon receives more than 66 thousand orders per hour, and 18.5 orders per second. Whoooo! So, […]

  • Flutter vs React Native: What to choose in 2021

    If Flutter vs React Native is your burgeoning question for this year 2021, guess what you are not alone. We no longer need statistics to know about the ever-growing popularity of mobile apps across the world. According to the latest report, global consumers are now spending an average of 4.2 hours per day using apps […]

  • React Native App development: Top Reasons to Choose It in 2021

    The promising cross-platform app development framework aka React Native has garnered huge popularity in recent times. The technology enables simultaneous mobile app development for multiple platforms using a single and a fraction of resources required for native development. The react native framework has emerged to be a popular choice among businesses to fulfill their cross-platform […]

Leave a Reply

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