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 LEGO-like software development using Microservices helped Toobler?

    Microservices: Legos for Software Development  We are so much in love with colorful plastic bricks aka LEGOs! In an age of online games and internet-connected toys, the humble Lego brick has risen against all odds.With approximately 62 pieces of Lego bricks for every man, woman and child  on the face of the earth, mere 6 […]

  • If you are in Jordan looking for app development support you should read this

    From downloading a mobile app  to visiting a brick-and-mortar store, customers today value every interaction with a brand. A great customer experience leaves a lasting impression in their minds about the happy and satisfying experience.  Winning the customer experience race Every  interaction offers  a make-or-break opportunity for a brand to either  build a loyal customer […]

  • Enhanced Efficiency & Optimized Cost of Project Development with Sweden Hybrid Model.

    Going beyond the cost factor and striving to deliver quality, innovation and flexibility to its customers across the globe, Toobler introduced a Hybrid (Onshore and Offshore) Software Development Model. Huge popularity of the hybrid model is fuelled by scores of organizations choosing to keep design and architecture phases at geographic proximity.  Driven by a customer-centric […]

Leave a Reply

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