CFChart style as a var instead of a file

[kurt.tosczak]

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

<cfchart format="html"  chartheight="800" chartwidth="1200" style="ProdChart.js">

    vs

<cfchart format="html"  chartheight="800" chartwidth="1200" style="#chartstyle#">

[Charlie Arehart]

Well, you can apply styling using the dozens of attributes to cfchart, instead of the file. 

But maybe what you mean is that you want to somehow provide in a variable ALL the content of what WOULD have been in the file. That's not supported. (While you can use cffile or fileread to pull the content of a file into a variable, I don't suspect that's what you want.) 

Then again, you show your code referring to a. js file, which is a file extension used for Javascript files typically. To be clear, the style attribute of cfchart expects instead a json file. But maybe your js file has json.

Anyway, perhaps if you clarify your goals (especially if none of the above help), we can guide you to a better solution. 

[BKBK · Accepted solution]

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>

[Charlie Arehart]

That's awesome, BKBK. I had missed that the STYLE attribute supported EITHER a file OR a string. Thanks for showing that example, which anyone could run at cffiddle.org or on their own server to see it in action.

One reason I (and perhaps Kurt) missed that possibility is that the CFML Reference page on cfchart still mistakenly refers to XML rather than json (which as you note was a change in CF11, in 2014).

I have just opened a tracker ticket for them reporting this (and a couple of other pages still referring to xml styling), and Ialso mention there your example and comment here:

https://tracker.adobe.com/#/view/CF-4212920

Indeed, I should have noticed that the discussion of that style attribute did refer to allowing EITHER an xml file OR xml itself, and so I could have deduced that it would support a json string rather than a file.  It's just that I was first reading and replying to Kurt on my mobile, so I missed that. Your comment and example made it very clear, while also answerign specifically Kurt's asking if it could be set as a variable. So again, thanks. 

[BKBK]

Thanks for that, Charlie, and for opening the bug ticket.