How to add a line to a bar chart in ColdFusion?

Question

I have a bar chart with four data points. I am trying to add a line to represent the average of the bars. When I add the line as a chartseries, it adds the line, but it also as the fifth bar.

How do I get a single red line to represent the average?

<cfchart format="png" scalefrom="0" scaleto="5000">
<!--- four blue bars --->
<cfchartseries
  type="bar"
  serieslabel="Website Traffic 2006"
  seriescolor="blue">
<cfchartdata item="January" value="1000">
<cfchartdata item="February" value="2000">
<cfchartdata item="March" value="3000">
<cfchartdata item="April" value="4000">
</cfchartseries>
<!--- one red line --->
<cfchartseries
    type="line"     
    seriesColor="red" 
    paintStyle="plain"
    seriesLabel="Contract Salaries">
<cfchartdata item="average" value="2500">
</cfchartseries></cfchart>

To create a line, I think you need the same number of elements. Try adding the same four elements (ie January, February, ...), but all having the `value="2500"`. FYI, you could also [apply a background range](http://stackoverflow.com/questions/9813386/add-a-target-line-to-a-coldfusion-8-cfchart-bar-graph/9814127#9814127) instead of a line. — Leigh, Nov 02 '13 at 20:47
If you are using CF10, don;t use `cfchart`, use the native ZingChart library - http://www.zingchart.com/ , it is actually easier to use the lib by itself than trying to use `cfcahrt`. They have a fantastic tool that allows you to design a chart and export the JSON for formatting. — Scott Stroz, Nov 03 '13 at 04:11

score 2 · Accepted Answer · answered Nov 04 '13 at 20:31

2

Here is a solution that works. Basically, you have to REUSE the same item name in the line chart as you do in the bar chart to ensure that you do not introduce a new bar/x-axis point. You do not have to define all four matching points, but to me it seems like that would be good practice. The key to your problem though is to not introduce a new "item" name that results in a new bar. In my example, I just reused "January".

<cfchart format="png" scalefrom="0" scaleto="5000">
<!--- four blue bars --->
<cfchartseries
  type="bar"
  serieslabel="Website Traffic 2006"
  seriescolor="blue">
<cfchartdata item="January" value="1000">
<cfchartdata item="February" value="2000">
<cfchartdata item="March" value="3000">
<cfchartdata item="April" value="4000">
</cfchartseries>
<!--- one red line --->
<cfchartseries
    type="line"
    seriesColor="red"
    paintStyle="plain"
    seriesLabel="Contract Salaries">
<cfchartdata item="January" value="2500">
</cfchartseries>
</cfchart>

answered Nov 04 '13 at 20:31

David Fleeman

2,588
14
17

Yep, using the same "item" is the key. However, to generate a consistent value line across all bars, I believe you do need all four points. Otherwise, it drops to zero after "January". – Leigh Nov 04 '13 at 23:04
Ah, interesting. Under CF9 the line drops to zero after "January", but in CF10 it stays at 2500 across all four bars. – Leigh Nov 04 '13 at 23:21
David, you gave me the exact answer I was looking for. Thank so much for your help!!! – Evik James Nov 05 '13 at 02:34
Sorry, I validated in CF10 and it worked with one data point. However, notice in my answer I recommended putting all 4 points. It is a series, so all 4 points should be added even though CF10 does not appear to require it. – David Fleeman Nov 05 '13 at 14:46
@DavidFleeman - Yep, specifying all four points is the way to go. (BTW, I was not knocking the answer. I had actually voted it up, because it covers all the bases, ie options and best practice :) I just thought the difference in behavior was worth noting in case anyone tries the shortcut with CF9 like I did) – Leigh Nov 09 '13 at 16:29

How to add a line to a bar chart in ColdFusion?

1 Answers1