User Guide Cancel

Create floating bar charts in ColdFusion

 

A floating bar chart, horizontal or vertical, is a chart that visualizes data ranges between a minimum and a maximum value for each category. Unlike standard bar charts that start from a baseline (typically zero), floating bars start and end at specified values, making them useful for showing the span of data, differences, or ranges within the specified values.

Here’s how you can create a floating bar chart in ColdFusion:

  1. Specify the chart type- hfbar for horizontal and fbar for vertical floating charts.
  2. Specify your offset values (zvalues) in your series. This will allow you to check the starting points of the bars.
  3. In each data object, add an offset value and the values of the bars.

The zvalue property controls the start point of a bar, and the value property controls the end points. This allows you to create a bar chart where each bar starts at a different point on the axis, rather than all bars starting from the same baseline. This can be useful in various scenarios, such as when you want to visualize a range of values for each category instead of a single value.

For example, in a project timeline, you might use a floating bar chart to show the start and end dates of each phase. The length of each bar represents the phase's duration, and the bar's position along the time axis shows when the phase starts and ends.

Horizontal floating bar chart

Specify the type hfbar in cfchart and in the cfchartdata tag, specify the bar and offset (zvalue) values. In this example, for item=1, a zvalue of 4.5 implies that the bar starts from 4.5 on the x-axis and ends at 14.5 (zvalue=4.5+value=10) on the x-axis. View the output for more information.

Example 

code

<cfchart format="html" type="hfbar" width="600" height="400" showLegend = "no" title="Horizontal floating bar chart">
<cfchartseries>
<cfchartdata item=1 value=10 zvalue=4.5>
<cfchartdata item=2 value=20 zvalue=1>
<cfchartdata item=3 value=30 zvalue=20>
<cfchartdata item=4 value=20 zvalue=40>
<cfchartdata item=5 value=40 zvalue=10>
</cfchartseries>
</cfchart>
<cfchart format="html" type="hfbar" width="600" height="400" showLegend = "no" title="Horizontal floating bar chart"> <cfchartseries> <cfchartdata item=1 value=10 zvalue=4.5> <cfchartdata item=2 value=20 zvalue=1> <cfchartdata item=3 value=30 zvalue=20> <cfchartdata item=4 value=20 zvalue=40> <cfchartdata item=5 value=40 zvalue=10> </cfchartseries> </cfchart>
<cfchart format="html" type="hfbar" width="600" height="400" showLegend = "no" title="Horizontal floating bar chart"> 
    <cfchartseries> 
        <cfchartdata item=1 value=10 zvalue=4.5> 
        <cfchartdata item=2 value=20 zvalue=1> 
        <cfchartdata item=3 value=30 zvalue=20> 
        <cfchartdata item=4 value=20 zvalue=40> 
        <cfchartdata item=5 value=40 zvalue=10> 
    </cfchartseries> 
</cfchart> 

Output

Vertical floating bar chart

Specify the type fbar in cfchart and in the cfchartdata tag, specify the bar and offset (zvalue) values. In this example, for item=1, a zvalue of 4.5 implies that the bar starts from 4.5 on the y-axis and ends at 14.5 (zvalue=4.5+value=10) on the y-axis. View the output for more information.

Example

code

<cfchart format="html" type="fbar" width="600" height="400" showLegend = "no" title="Horizontal floating bar chart">
<cfchartseries>
<cfchartdata item=1 value=10 zvalue=4.5>
<cfchartdata item=2 value=20 zvalue=1>
<cfchartdata item=3 value=30 zvalue=20>
<cfchartdata item=4 value=20 zvalue=40>
<cfchartdata item=5 value=40 zvalue=10>
</cfchartseries>
</cfchart>
<cfchart format="html" type="fbar" width="600" height="400" showLegend = "no" title="Horizontal floating bar chart"> <cfchartseries> <cfchartdata item=1 value=10 zvalue=4.5> <cfchartdata item=2 value=20 zvalue=1> <cfchartdata item=3 value=30 zvalue=20> <cfchartdata item=4 value=20 zvalue=40> <cfchartdata item=5 value=40 zvalue=10> </cfchartseries> </cfchart>
<cfchart format="html" type="fbar" width="600" height="400" showLegend = "no" title="Horizontal floating bar chart"> 
    <cfchartseries> 
        <cfchartdata item=1 value=10 zvalue=4.5> 
        <cfchartdata item=2 value=20 zvalue=1> 
        <cfchartdata item=3 value=30 zvalue=20> 
        <cfchartdata item=4 value=20 zvalue=40> 
        <cfchartdata item=5 value=40 zvalue=10> 
    </cfchartseries> 
</cfchart> 

Output

3d horizontal and vertical floating bar charts

Similarly, you can create 3d horizontal and vertical floating bar charts by specifying the type hfbar3d and fbar3d respectively.

Example of 3d horizontal floating bar chart

code

<cfchart format="html" type="hfbar3d" width="600" height="400" showLegend = "no" title="Horizontal floating bar chart">
<cfchartseries>
<cfchartdata item=1 value=10 zvalue=4.5>
<cfchartdata item=2 value=20 zvalue=1>
<cfchartdata item=3 value=30 zvalue=20>
<cfchartdata item=4 value=20 zvalue=40>
<cfchartdata item=5 value=40 zvalue=10>
</cfchartseries>
</cfchart>
<cfchart format="html" type="hfbar3d" width="600" height="400" showLegend = "no" title="Horizontal floating bar chart"> <cfchartseries> <cfchartdata item=1 value=10 zvalue=4.5> <cfchartdata item=2 value=20 zvalue=1> <cfchartdata item=3 value=30 zvalue=20> <cfchartdata item=4 value=20 zvalue=40> <cfchartdata item=5 value=40 zvalue=10> </cfchartseries> </cfchart>
<cfchart format="html" type="hfbar3d" width="600" height="400" showLegend = "no" title="Horizontal floating bar chart"> 
    <cfchartseries> 
        <cfchartdata item=1 value=10 zvalue=4.5> 
        <cfchartdata item=2 value=20 zvalue=1> 
        <cfchartdata item=3 value=30 zvalue=20> 
        <cfchartdata item=4 value=20 zvalue=40> 
        <cfchartdata item=5 value=40 zvalue=10> 
    </cfchartseries> 
</cfchart> 

Output

Example of 3d vertical floating bar chart

code

<cfchart format="html" type="fbar3d" width="600" height="400" showLegend = "no" title="Horizontal floating bar chart">
<cfchartseries>
<cfchartdata item=1 value=10 zvalue=4.5>
<cfchartdata item=2 value=20 zvalue=1>
<cfchartdata item=3 value=30 zvalue=20>
<cfchartdata item=4 value=20 zvalue=40>
<cfchartdata item=5 value=40 zvalue=10>
</cfchartseries>
</cfchart>
<cfchart format="html" type="fbar3d" width="600" height="400" showLegend = "no" title="Horizontal floating bar chart"> <cfchartseries> <cfchartdata item=1 value=10 zvalue=4.5> <cfchartdata item=2 value=20 zvalue=1> <cfchartdata item=3 value=30 zvalue=20> <cfchartdata item=4 value=20 zvalue=40> <cfchartdata item=5 value=40 zvalue=10> </cfchartseries> </cfchart>
<cfchart format="html" type="fbar3d" width="600" height="400" showLegend = "no" title="Horizontal floating bar chart"> 
    <cfchartseries> 
        <cfchartdata item=1 value=10 zvalue=4.5> 
        <cfchartdata item=2 value=20 zvalue=1> 
        <cfchartdata item=3 value=30 zvalue=20> 
        <cfchartdata item=4 value=20 zvalue=40> 
        <cfchartdata item=5 value=40 zvalue=10> 
    </cfchartseries> 
</cfchart> 

Output

Get help faster and easier

New user?