• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

CFChart style as a var instead of a file

New Here ,
Mar 21, 2022 Mar 21, 2022

Copy link to clipboard

Copied

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#">

 

 

TOPICS
cfchart

Views

138

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Mar 22, 2022 Mar 22, 2022
 

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"
...

Votes

Translate

Translate
Community Expert ,
Mar 22, 2022 Mar 22, 2022

Copy link to clipboard

Copied

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. 


/Charlie (troubleshooter, carehart.org)

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 22, 2022 Mar 22, 2022

Copy link to clipboard

Copied

 

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>

 

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 23, 2022 Mar 23, 2022

Copy link to clipboard

Copied

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. 


/Charlie (troubleshooter, carehart.org)

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 23, 2022 Mar 23, 2022

Copy link to clipboard

Copied

LATEST

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
Documentation