Participating Frequently

Answered

CFChart style as a var instead of a file

4 replies
349 views
Translate

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

vs

This topic is closed to new replies. Start a new post to keep the conversation going.

BKBKCorrect answer

Community Expert

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>

BKBK

Correct answer

Community Expert

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>

Translate

Charlie Arehart

Community Expert

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.

Translate

/Charlie (troubleshooter, carehart. org)

BKBK

Community Expert

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

Translate

Charlie Arehart

Community Expert

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.

Translate

/Charlie (troubleshooter, carehart. org)

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.