Skip to main content
Participant
June 13, 2011
Answered

CF Charting - Can I make negative labels positive in horizontal bar chart?

  • June 13, 2011
  • 1 reply
  • 1069 views

I'm using ColdFusion 7 on solaris 8.

I'm creating a tornado chart using a horizontal bar chart to display two exact chart series, except

one series is to the left of 0 and one series is to the right of zero and each series is stacked along the same row.

Can I make the negative axis label values on the left side of the chart's axis show as positive label values?

Here's a very rustic representation of what the chart looks like:

  * * * * * | * * * * *        (-5 to the left, + 5 to the right)

      * * * | * * *             (-3 to the left, +3 to the right)

        * * | * *                (-2 to the left, +2 to the right)

          * | *

  -----------

-5 -3   0   3    5

I want the chart to stay as is, but have the bottom label to show as:

5  3  0  3  5    (basically removing the "-" sign from the left side of 0 labels)

Much thanks for any help anyone can provide!!!

* Here's a code snippet for the chart:

<cfchart seriesplacement="stacked" chartwidth="350" chartheight="200" showlegend="no"
             scalefrom="-5" scaleto="5" style="./hzBarStyle.xml" fontbold="yes" format="png">

             <cfchartseries type="horizontalbar">    <!--- Left side bars of tornado chart --->
                 <cfloop query="getReportVals">
                       <cfset dataVal = -#round((getReportVals.score/score_total)*100)#/2>    <!--- note: minus sign --->
                       <cfchartdata item="Item #dataVal#." value=#dataVal#>
                 </cfloop>
             </cfchartseries>

             <cfchartseries type="horizontalbar">    <!--- right side bars of tornado chart --->
                  <cfloop query="getReportVals">
                        <cfset dataVal = #round((getReportVals.score/score_total)*100)#/2>    <!--- note: no minus sign --->
                        <cfchartdata item="Item #dataVal#." value=#dataVal#>
                  </cfloop>
              </cfchartseries>

</cfchart>

* Here's the style file developed using WebCharts Ent. Edition v5.0h:

hzBarStyle.xml

******************


<?xml version="1.0" encoding="UTF-8"?>
<frameChart is3D="false">

<frame xDepth="6" yDepth="6" outline="#000000" lightColor="white"
            leftAxisPlacement="Front" rightAxisPlacement="Front" stripColor="#FFFFFF">
           <background minColor="#999999"/>
</frame>

<dataLabels style="Pattern" foreground="white">
</dataLabels>

<elements place="Stacked" shape="Column" outline="black">
            <morph morph="none" stage="none"/>

            <series index="0">
                <paint color="#0000FF"/>


                <dataLabel>
                <![CDATA[$(colLabel)]]>
                </dataLabel>
            </series>

            <series index="1">
                <paint color="#0000FF"/>


                <dataLabel>
                <![CDATA[\t]]>
                </dataLabel>
            </series>

            $(colLabel)\n\nTotal Value: <![CDATA[$(rowTotal)]]>
</elements>


<xAxis isVisible="true">
      <labelFormat pattern="#,##0.###"/>
      <parseFormat pattern="#,##0.###"/>
      <labelStyle orientation="Vertical" color="white"/>
      <titleStyle foreground="black">Data Criteria</titleStyle>
</xAxis>

<popup foreground="#000000" background="#FFFFFF"/>

<legend>
      <decoration style="RoundShadow"/>
</legend>

<title>
      <decoration style="None"/>Tornado Chart
</title>

<paint paint="Plain"/>

</frameChart>

    This topic has been closed for replies.
    Correct answer -__cfSearching__-

    <labelFormat pattern="#,##0.###"/>

    The display is controlled by a java.text.DecimalFormat pattern.

          ie "positive format;negative format"

         <labelFormat style="Pattern" pattern="#,##0.###;(#,##0.###)" />

    Unfortunately, the javadocs say the positive and negative patterns must be different or the negative pattern will be ignored. Probably the best you can do is replace the "-" with some other symbol.  A space character *might* work

        <labelFormat style="Pattern" pattern="#,##0.###;#,##0.###(single space here)"/>

    .. if not, you may have to use another character like "+" or "*"

         <labelFormat style="Pattern" pattern="#,##0.###;+#,##0.###" />

         <labelFormat style="Pattern" pattern="#,##0.###;#,##0.###+" />

    Just be sure to apply the format to the correct axis.

    Message was edited by: -==cfSearching==-

    1 reply

    -__cfSearching__-Correct answer
    Inspiring
    June 14, 2011

    <labelFormat pattern="#,##0.###"/>

    The display is controlled by a java.text.DecimalFormat pattern.

          ie "positive format;negative format"

         <labelFormat style="Pattern" pattern="#,##0.###;(#,##0.###)" />

    Unfortunately, the javadocs say the positive and negative patterns must be different or the negative pattern will be ignored. Probably the best you can do is replace the "-" with some other symbol.  A space character *might* work

        <labelFormat style="Pattern" pattern="#,##0.###;#,##0.###(single space here)"/>

    .. if not, you may have to use another character like "+" or "*"

         <labelFormat style="Pattern" pattern="#,##0.###;+#,##0.###" />

         <labelFormat style="Pattern" pattern="#,##0.###;#,##0.###+" />

    Just be sure to apply the format to the correct axis.

    Message was edited by: -==cfSearching==-

    Owainnorth
    Inspiring
    June 14, 2011

    Just in case you're not, I'd try developing this in WebCharts itself (the underlying charting engine) then just using the style="" attribute of the cfchart to read the XML file.

    You have far greater control and more options over the formatting of your charts this way, just fire up webcharts.bat in the ColdFusion install directory somewhere.