coldfusioncfchart

Set Bar color according to data in CF chart

I am creating a bar graph in CF11 .Is it possible to give different colors for the different bars in CFchartseries according to the data.

<cfchartseries serieslabel="Rent" type="bar" colorlist="barcolr_list">
        <cfloop index="counter" from=1 to="#ArrayLen(PropName_arry)-1#" step="1">               
        <cfchartdata item="#PropName_arry[counter]#" value="#Grossrent_arry[counter]#" >        
    </cfloop>
</cfchartseries>

I read in docs that the colorlist attribute is available for pie,pyramid..etc graph . How can i set different colors to bars according to the grossrent value

ie, if the grossrent > 800 the bar color should be red else it should be blue

This code worked in CF7 .But not worked in CF11

Solution

  • ColorList only works for chart types pie, pyramid, area, horizontalbar, cone, cylinder, or step. cfchartseries.

    You can create specific colors for each column 2 different ways. Through rules or through a list of styles.

    You can create a rule which is added to the plot attribute. Specify a colour that applies to that rule. Below example shows rules when the x axis value is true.

    <cfset plot= {"rules": [
    {"rule":"'%k'=='2007'",
     "background-color":"purple"},
    {"rule":"'%k'=='2008'",
     "background-color":"pink"},
    {"rule":"'%k'=='2009'",
     "background-color":"green"}]}
    >

    Or you can create a list of styles for the chart using the styles attribute in plot.

    <cfset plot = {"styles":[
{
"background-color":"##e95d22"
},
{
"background-color":"##017890"
},
{
"background-color":"##da534d"
},
{
"background-color":"##4a266d"
},
{
"background-color":"##f4913c"
}]}>

    Include the plot variable in the chart element like this.

    <cfchart format="png" chartheight="180" chartwidth="233" showlegend="false" style="test.js" plot="#plot#">
<cfchartseries type="bar">
    <cfchartdata item="2005" value="1000"/>
    <cfchartdata item="2006" value="3000"/>
    <cfchartdata item="2007" value="1000"/>
    <cfchartdata item="2008" value="4000"/>
    <cfchartdata item="2009" value="2000"/>
</cfchartseries>

    To help with my example here is my test.js

    {
"graphset":[
    {
    "border-width":1, 
    "background-color":"transparent",
    "plotarea":{"margin":"dynamic"}
}]
}

    Both these techniques can be included directly through the test.js file as well but to make these colours dynamic it is easier to enter them through the plot attribute.