ColdFusion (2025 release) introduces enhanced charting capabilities, making it simpler to create dynamic, interactive dashboards. These charts help turn raw data into valuable insights, allowing users to analyze trends and make informed decisions. Whether visualizing sales performance or other key metrics, the new features offer greater flexibility and improved aesthetics. In this blog, we’ll explore how to build an engaging dashboard experience in ColdFusion.
Pre – requisite :
Chart creation in ColdFusion.
Refer: cfchart
What to expect :
- Chart organization using <cfchartset>
- Appearance enhancements with in-built themes
- Appearance customization with user-defined themes
Chart organization using <cfchartset>
Here we have provided Basic Dashboard code to start with which consists of 6 different types of charts i.e curved area, ring, histogram, line and fbar which we will work on incrementally to achieve our objective. Upon executing provide files, you will get following output :
Now let’s add “cfchartset” tag to containerize the charts. Following is the sample of how to use layout, x, y , height and width along with the tag to set desired orientation of charts.
<cfchartset format = "html" layout="RxC">
<cfchart type="curvedarea" x="0%" y="20%" height="50%" width="33%">
<cfchartseries>
</cfchart>
</cfchartset>
We can provide values to these attributes as per our use case. After applying above attributes to provided code, updated code will be Dashboard which will look as follows:
Appearance enhancements with in-built themes
ColdFusion is now supporting various themes, which can be directly applied to multiple charts at once and maintain uniformity. It’s done by adding theme attribute in cfchartset tag as follows:
<cfchartset format="html" height="100%" width="100%" layout="2x3" theme="retro_dark">
Here we have used retro_dark this is how it will look:
Appearance customization with user-defined themes
Themes are not restricted to the one’s provided by CF, we can create our own themes as well.
Now , let’s create a new theme (custom_theme.json), with custom color palette and observe the changes.
{
"palette":
[["#fff", "#ff5722", "#ff5722", "#fff", "#fff"],
["#fff", "#ff8a65", "#ff8a65", "#fff", "#fff"],
["#fff", "#ffab91", "#ffab91", "#fff", "#fff"],
["#fff", "#ffe0b2", "#ffe0b2", "#fff", "#fff"],
["#fff", "#F15555", "#F15555", "#fff", "#fff"]
],
"graph": {}
Place this custom_theme.json in same location where “dashboard.cfm” is present. This theme can be placed in following locations :
- Same location as that of cfm file
- Any location, with it’s relative/absolute path specified in Application.cfc (this.chartThemeDirectory = /path/to/theme/file)
- /cfusion/charting/themes
Apply this theme as follows:
<cfchartset format="html" height="100%" width="100%" layout="2x3" theme="custom_theme.json">
Upon applying this theme, dashboard would look like this:
This is just the beginning of what you can achieve with ColdFusion. Beyond what we’ve covered in this blog, you can further enhance your dashboard by incorporating animations, rules, markers, data formatting, and more. Here’s an example demonstrating additional customizations. Dashboard Final
You must be logged in to post a comment.