CFChart style as a var instead of a file

 

Is there any way to specify the style in a CFChart as a variable instead of a file?

 

By @kurt.tosczak

Yes. I shall show you at least 2 ways.

As Charlie has said, the style should be in JSON format. That is because ZingChart , the engine that powers cfchart, uses JSON input for its attributes.

Method 1: 

Store the style as a JSON file (typically within the same directory as the chart). Then assign the file name to a variable.

my_chart_style.json

{
 "graphset" : [
  {
   "type" : "bar",
   "title" : {
    "font-size" : 18,
    "color" : "#ff00ff",
    "bold" : true,
    "font-family" : "Verdana",
    "background-color" : "#cccccc",
    "border-color" : "#cccccc",
    "border-width" : 1
   }
  }
 ]
}

myChart.cfm

<cfset chartstyle="my_chart_style.json">
<cfchart format="html" type="bar" showlegend="false" chartHeight="400" chartWidth="600"
style="#chartstyle#" title="Sales report">
    <cfchartseries>
        <cfchartdata item="2012" value=#randrange(10,100)#>
        <cfchartdata item="2013" value=#randrange(10,100)#>
        <cfchartdata item="2014" value=#randrange(10,100)#>
        <cfchartdata item="2015" value=#randrange(10,100)#>
        <cfchartdata item="2016" value=#randrange(10,100)#>
        <cfchartdata item="2017" value=#randrange(10,100)#>
    </cfchartseries>
</cfchart>

Method 2:

Store the style as a JSON string variable.

myChart.cfm

<cfset chartstyle='{
 "graphset" : [
  {
   "type" : "bar",
   "title" : {
    "font-size" : 18,
    "color" : "##ff00ff",
    "bold" : true,
    "font-family" : "Verdana",
    "background-color" : "##cccccc",
    "border-color" : "##cccccc",
    "border-width" : 1
   }
  }
 ]
}'>

<cfchart format="html" type="bar" showlegend="false" chartHeight="400" chartWidth="600"
style="#chartstyle#" title="Sales report">
    <cfchartseries>
        <cfchartdata item="2012" value=#randrange(10,100)#>
        <cfchartdata item="2013" value=#randrange(10,100)#>
        <cfchartdata item="2014" value=#randrange(10,100)#>
        <cfchartdata item="2015" value=#randrange(10,100)#>
        <cfchartdata item="2016" value=#randrange(10,100)#>
        <cfchartdata item="2017" value=#randrange(10,100)#>
    </cfchartseries>
</cfchart>