Server Settings - Charting

Overview

The Charting Settings page configures ColdFusion's chart generation engine for creating data visualizations and graphs. ColdFusion provides powerful charting capabilities for creating bar charts, line charts, pie charts, and many other visualization types with extensive customization options.

Proper chart configuration ensures optimal performance, consistent styling, and efficient resource usage when generating charts dynamically for web applications and reports.

Chart Configuration Settings

Chart Engine Settings

Default Chart Properties

Set default styling and dimensions for charts when not explicitly specified.

Performance Settings

Supported Chart Types

Basic Charts

• Bar Charts: Vertical and horizontal bar charts
• Line Charts: Single and multi-line trend charts
• Pie Charts: Standard and 3D pie charts
• Area Charts: Filled area charts for trends
• Scatter Charts: X-Y scatter plots

Advanced Charts

• Combination Charts: Mixed chart types
• Cone/Cylinder/Pyramid: 3D chart variations
• Step Charts: Step-line visualizations
• Curve Charts: Smooth curved lines
• Bubble Charts: Three-dimensional data plots

Chart Features

• Multiple data series support
• Custom colors and styles
• Grid lines and markers
• Legends and labels
• Tooltips and data point information
• Background images and patterns

Using Charts in CFML

Basic Chart Creation

Create a simple bar chart:

// Note: Chart generation is typically done with tags
// CFScript doesn't have direct chart equivalent
// Use cfchart tag for chart generation

<cfchart format="png"
         chartwidth="500"
         chartheight="400"
         title="Sales by Quarter">
  <cfchartseries type="bar">
    <cfchartdata item="Q1" value="45000">
    <cfchartdata item="Q2" value="52000">
    <cfchartdata item="Q3" value="48000">
    <cfchartdata item="Q4" value="61000">
  </cfchartseries>
</cfchart>

Multiple Data Series

Create chart with multiple series:

// Note: Chart generation is typically done with tags
// CFScript doesn't have direct chart equivalent
// Use cfchart tag for chart generation

<cfchart format="png"
         title="Sales Comparison">
  <cfchartseries type="bar" seriesLabel="2023">
    <cfchartdata item="Q1" value="45000">
    <cfchartdata item="Q2" value="52000">
  </cfchartseries>
  <cfchartseries type="bar" seriesLabel="2024">
    <cfchartdata item="Q1" value="48000">
    <cfchartdata item="Q2" value="55000">
  </cfchartseries>
</cfchart>

Chart from Query

Generate chart from database query:

salesData = queryExecute("
  SELECT month, revenue
  FROM sales
  WHERE year = :year
  ORDER BY month
", {year: 2024}, {datasource: "myDB"});

// Note: Use cfchart tag for chart generation
// Charts are typically rendered with tags

<cfquery name="salesData" datasource="myDB">
  SELECT month, revenue
  FROM sales
  WHERE year = 2024
  ORDER BY month
</cfquery>

<cfchart format="png">
  <cfchartseries type="line"
                 query="salesData"
                 itemColumn="month"
                 valueColumn="revenue">
  </cfchartseries>
</cfchart>

Saving Charts to Disk

Generate and save chart files:

// Note: Chart generation is typically done with tags
// After generating chart with name attribute, save it:
fileWrite(expandPath("/charts/sales-pie.png"), myChart);

<cfchart format="png"
         name="myChart">
  <cfchartseries type="pie">
    <cfchartdata item="Product A" value="35">
    <cfchartdata item="Product B" value="25">
    <cfchartdata item="Product C" value="40">
  </cfchartseries>
</cfchart>

<cffile action="write"
        file="#expandPath('/charts/sales-pie.png')#"
        output="#myChart#">

Chart Caching

Cache Benefits

• Reduces server load for frequently requested charts
• Improves response time for chart generation
• Minimizes resource usage for identical charts
• Enables serving charts without regeneration

Cache Types

Cache Management

• Set appropriate cache size for chart volume
• Configure cleanup interval to prevent disk space issues
• Monitor cache hit rates and effectiveness
• Clear cache after chart template changes
• Use unique cache keys for different chart variations

Manual Cache Control

Control chart caching programmatically:

// Note: Chart generation is typically done with tags
// Caching is controlled via cachedwithin attribute

<!--- Disable caching for specific chart --->
<cfchart cachedwithin="#createTimeSpan(0,0,0,0)#">
  <!--- Chart content --->
</cfchart>

<!--- Cache for specific duration --->
<cfchart cachedwithin="#createTimeSpan(0,1,0,0)#">
  <!--- Chart cached for 1 hour --->
</cfchart>

Chart Styling and Customization

Color Schemes

Apply custom colors to charts:

// Note: Chart generation is typically done with tags
// Color customization is done via tag attributes

<cfchart format="png"
         foregroundColor="##333333"
         backgroundColor="##FFFFFF"
         dataBackgroundColor="##F5F5F5">
  <cfchartseries type="bar"
                 seriesColor="##3366CC">
    <!--- Chart data --->
  </cfchartseries>
</cfchart>

Fonts and Text

Customize chart typography:

// Note: Chart generation is typically done with tags
// Font customization is done via tag attributes

<cfchart format="png"
         font="Arial"
         fontSize="12"
         fontBold="yes"
         titleFont="Helvetica"
         titleFontSize="16">
  <!--- Chart content --->
</cfchart>

Grid and Markers

• Show/hide grid lines
• Customize grid colors and styles
• Add reference markers and lines
• Configure axis labels and scales
• Set minimum and maximum values

Best Practices

Performance

• Enable chart caching for production environments
• Use disk cache for large chart volumes
• Enable threading for concurrent chart generation
• Optimize chart data queries for performance
• Limit chart size to reasonable dimensions
• Use PNG format for best quality/size balance

Chart Design

• Choose appropriate chart type for data
• Keep charts simple and focused
• Use clear, descriptive labels and titles
• Limit number of data series per chart
• Choose contrasting colors for clarity
• Include legends for multi-series charts

Data Handling

• Validate data before chart generation
• Handle null or missing data appropriately
• Format numbers and currency correctly
• Sort data logically for time series
• Aggregate data for readability
• Use appropriate scale ranges

Production Configuration

• Set adequate cache size for traffic volume
• Configure thread pool based on server resources
• Monitor chart generation performance
• Implement error handling for chart failures
• Test charts across different browsers
• Document custom chart templates

Troubleshooting

Charts Not Displaying

If charts fail to appear:

• Check chart cache directory exists and is writable
• Verify ColdFusion has permissions to write files
• Review browser console for JavaScript errors
• Check chart format is supported by browser
• Verify data is not empty or invalid
• Review application.log for chart generation errors

Poor Chart Quality

If charts appear pixelated or blurry:

• Increase chart width and height dimensions
• Use PNG format instead of JPEG
• Verify font rendering settings
• Check image scaling in HTML/CSS
• Ensure adequate resolution for display size

Slow Chart Generation

If charts take too long to generate:

• Enable chart caching
• Optimize data queries
• Reduce number of data points
• Enable threading for concurrent generation
• Check server resource usage
• Consider pre-generating charts for reports

Font Issues in Charts

If chart text appears incorrect:

• Verify specified fonts are installed on server
• Register fonts in Font Management
• Use standard web-safe fonts
• Check font size settings
• Test with different font families

Cache Not Working

If charts aren't being cached:

• Verify cache is enabled in settings
• Check cache directory permissions
• Review cache size settings
• Ensure unique cache keys for chart variations
• Check disk space availability
• Review cache cleanup interval

Advanced Charting

Custom Chart Styles

• Create reusable chart style templates
• Apply corporate branding to charts
• Use XML style definitions
• Implement responsive chart sizing
• Support dark mode chart themes

Dynamic Chart Updates

• Refresh charts via AJAX
• Implement real-time data updates
• Use JavaScript charting libraries for interactivity
• Enable drill-down capabilities
• Add click handlers for data exploration

Chart Export Options

• Export charts as PDF documents
• Save charts in various image formats
• Include charts in email reports
• Generate charts for print layouts
• Create chart galleries and dashboards

Related Resources