I'm trying to use cfchart with html format:
<cfchart format="html" type="bar" chartHeight="600" chartWidth="1100" title="Sales Chart"
font="Arial" fontBold="true" fontSize="13"
>
<cfchartseries type="line" seriesColor="##3232FF">
<cfloop query="getData">
<cfchartdata item="#Date#" value=#sales#>
</cfloop>
</cfchartseries>
</cfchart>
However, it is returning the error:
Client Side Charting is not available in this edition of ColdFusion server.
I'm using CF10 and I control the server. How can I enable the cfchart format HTML? BTW, if I change the format to png, it works.
Related
I am trying to use cfchart tags for bar charts but when I take the exact code from a site:
<cfscript>
border={"color":"blue","radius":6,"width":2};
</cfscript>
<cfchart format="html" type="bar" showlegend="false" chartHeight="400" chartWidth="600" border="#border#">
<cfchartseries >
<cfchartdata item="2015" value=20>
<cfchartdata item="2016" value=40>
<cfchartdata item="2017" value=60>
</cfchartseries>
</cfchart>
It shows the following:
But it should look like this:
Any one experience this? See how it combines everything into one large orange figure?
Any help would be greatly appreciated. Thank you!!!
That ws exactly what I needed!!! Here is what I put in: <cfchartseries type="bar"> and it separated the bars. Now I can read up and further customize! Thank you so much!
I am using FusionChart in my projects and would like to use the charts in a cfdocument for creating a PDF. The chart is loading correctly in my ColdFusion page, but not within the PDF generated by cfdocument.
FusionCharts.ready(function () {
var myChart = new FusionCharts({
"id" : "id",
"type": "column",
"width": "#chartwidth#",
"height": "#chartheight#",
"dataFormat": "xml",
"dataSource": "#strXML#"
});
myChart.render("chartContainer");
});
Chart functions will not work inside cfdocument. So make the chart outside cfdocument and convert the chart to an image. Then display the image inside cfdocument like below and call the image path inside the cfdocument.
<cfchart format="png" scalefrom="0" scaleto="1200000" name="chartimage">
<cfchartseries type="bar" dataLabelStyle="value"
serieslabel="chart" seriescolor="blue">
<cfchartdata item="January" value="503100">
<cfchartdata item="February" value="720310">
<cfchartdata item="March" value="688700">
<cfchartdata item="April" value="986500">
<cfchartdata item="May" value="1063911">
<cfchartdata item="June" value="1125123">
</cfchartseries>
</cfchart>
<cffile action="write"
file="#ExpandPath('charts/imageName.jpg')#"
output="#chartimage#" />
Quite simple really, I want to display the British pound sign (£) in the yAxis title in a printed Coldfusion PNG chart.
Here's my code:
<cfchart xAxisTitle="Year" yAxisTitle="Cash Flow (£)" gridlines="6" showXGridlines="yes" showYGridlines="yes" showborder="no" format="png" seriesplacement="stacked" chartwidth="350" chartheight="200">
<cfchartseries type="bar" seriesLabel="Saving" seriescolor="##434348">
<cfset chartYear = 0>
<cfloop list="#FORM.chartSaving#" index="value">
<cfchartdata item="#chartYear#" value="#Round(value)#">
<cfset chartYear = chartYear + 1>
</cfloop>
</cfchartseries>
<cfchartseries type="bar" seriesLabel="RHI" seriescolor="##7cb5ec">
<cfset chartYear = 0>
<cfloop list="#FORM.chartRHI#" index="value">
<cfchartdata item="#chartYear#" value="#Round(value)#">
<cfset chartYear = chartYear + 1>
</cfloop>
</cfchartseries>
</cfchart>
I've tried various combinations of £ and &##163; but nothing is displaying the £ sign.
Any Ideas ?
Try using chr() with its decimal value:
<cfchart xAxisTitle="Year" yAxisTitle="Cash Flow #chr(163)#" ....>
If you want to hard code the literal £ character into the CF source file, be sure to set the file's encoding to UTF8. Otherwise, it will not be displayed correctly.
<cfprocessingDirective pageEncoding="UTF-8" />
<cfchart xAxisTitle="Year" yAxisTitle="Cash Flow (£)" ....>
I have upgraded my cf site from cf 7 to cf 11 recently. But I am not able to set the width of cfchartseries.
I have found in Adobe documentation to set the background as "fit: Defines the width/height to fit area of background."
How can I set the width of Cfchartseries in coldfusion 11 using JSON? Please help.
Thanks.
You need to set the plotarea margin values to dynamic. This dynamically includes the scale values when determining the position of the chart. You can set the height and width of the plot area as well but this doesn't include the scales. I have found the best results is to include all styles through a JS file and calling it through the style attribute in cfchart.
Below is a basic example:
Create a JS file called test.js
{
"graphset":[
{
"border-width":1,
"background-color":"transparent",
"plotarea":{"margin":"dynamic"}
}
]
}
Add this chart code to a cfm page in the same directory as the test.js file (for example only)
<cfchart format="html" showlegend="no" height="200" width="250" title="" show3d="no" style="test.js">
<cfchartseries type="bar" paintstyle="light" color="red">
<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>
</cfchart>
I am counting response of a specific question and wants to display its response count through charts. I am using this code for counting response.
<cfquery name="questions">
SELECT
questions.id,
questions.question as question,
questiontypes.name as questiontype,
questiontypes.template as template,
surveys.name as surveysname
FROM
questions
LEFT JOIN answers ON questions.id = answers.fkquestionid
INNER JOIN questiontypes ON questions.fkquestiontypeid = questiontypes.id
INNER JOIN surveys ON questions.fksurveyid = surveys.id
WHERE fksurveyid = <cfqueryparam cfsqltype="cf_sql_integer" value="#arguments.surveyid#">
</cfquery>
<cfset response.question = questions>
<cfloop query="questions">
<cfswitch expression ="#questions.template#">
<cfcase value="truefalse">
<cfquery name="gettotaltruefalse">
SELECT COUNT( IF(result.truefalse = 1,1,NULL )) AS totaltrue,
COUNT( IF(result.truefalse = 0,0,NULL )) AS totalfalse,
COUNT( IF(result.truefalse = 1,1,NULL ))/COUNT(0)*100 AS trueperc,
COUNT( IF(result.truefalse = 0,0,NULL ))/COUNT(0)*100 AS falseperc
FROM results result
WHERE fkquestionid = <cfqueryparam cfsqltype="cf_sql_integer" value="#questions.id#">
AND NOT ISNULL(result.truefalse)
GROUP BY result.fkquestionid
</cfquery>
<cfset response.totaltruefalse = gettotaltruefalse>
</cfcase>
I am using this code to display charts.
<cfoutput query="rc.data.questions" group="id">
<cfchart format="flash" chartwidth="575" chartheight="575" show3d="yes">
<cfchartseries type="pie" paintstyle="raise" seriescolor="blue" datalabelstyle="pattern">
<cfchartdata item="true" value="#rc.data.totaltruefalse.totaltrue#">
<cfchartdata item="false" value="#rc.data.totaltruefalse.totalfalse#">
</cfchartseries>
</cfchart>
</cfoutput>
my problem is, it is showing white space instead of chart even i have tried this in all browsers.
My other answer has to do with server configuration settings based on if you have blocked access to the CFIDE directory. Another approach would be to bypass that behavior by saving the generated chart yourself (a flash file .SWF) to the web server and then displaying that file instead.
It's really easy with ColdFusion. Just add the name attribute to your <cfchart> tag. This will tell ColdFusion to store the binary chart data into the variable named with that attribute. Like this:
<cfchart format="flash" name="chartname" chartwidth="575" chartheight="575" show3d="yes">
<cfchartseries type="pie" paintstyle="raise" seriescolor="blue" datalabelstyle="pattern">
<cfchartdata item="true" value="#rc.data.totaltruefalse.totaltrue#">
<cfchartdata item="false" value="#rc.data.totaltruefalse.totalfalse#">
</cfchartseries>
</cfchart>
In that code I have named the variable chartname. Next, write the data to a file with a .SWF extension. You need to write this file to a browsable directory on your server (like an images folder or some such). Like this:
<cffile action="write" file="C:\webroot\images\mychart.swf" output="#chartname#" />
In that code I wrote the file mychart.swf to the C:\webroot\images\ folder. It can be any directory you wish as long as it is accessible under your web root. The output attribute must match the variable name given in the <cfchart> tag's name attribute and must be within #.
Next, include that SWF file in your HTML code. Like this:
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,2,0"
WIDTH="575" HEIGHT="575">
<PARAM NAME="movie" VALUE="/images/mychart.swf"/>
<PARAM NAME="quality" VALUE="high"/>
<PARAM NAME="bgcolor" VALUE="#FFFFFF"/>
<EMBED src="/images/mychart.swf"
quality="high" bgcolor="#FFFFFF" WIDTH="575" HEIGHT="575" TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
</EMBED>
</OBJECT>
In that code the value attribute of the <param> tag and the src attribute of the <embed> tag must match the location of the written .SWF file above (the images folder in this example).
I am guessing it has to do with setup/security on your ColdFusion server. Can you navigate to http://yourserver.com/CFIDE/GraphData.cfm (replace yourserver.com with your domain)? In order for <cfchart> to work it needs access to the CFIDE directory (NOTE - that file does not actually exist. It is merely an alias for the ColdFusion charting).
It also needs access to the CFIDE/scripts directory and the CF_RunActiveContent.js JavaScript file found there.
If you view the source of your generated page (with the blank chart) you will see something like:
<html>
<head><title>Test</title></head>
<body>
<div>
<NOSCRIPT>
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,2,0"
ID="Images_5281548670100005_SWF" name="Images_5281548670100005_SWF" WIDTH="575" HEIGHT="575">
<PARAM NAME="movie" VALUE="/CFIDE/GraphData.cfm?graphCache=wc50&graphID=Images/5281548670100005.SWF"/>
<PARAM NAME="quality" VALUE="high"/>
<PARAM NAME="bgcolor" VALUE="#FFFFFF"/>
<EMBED src="/CFIDE/GraphData.cfm?graphCache=wc50&graphID=Images/5281548670100005.SWF"
quality="high" bgcolor="#FFFFFF" WIDTH="575" HEIGHT="575" TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
</EMBED>
</OBJECT>
</NOSCRIPT>
<script type="text/javascript" charset='utf-8' src='/CFIDE/scripts/CF_RunActiveContent.js'></script>
<script type="text/javascript" charset='utf-8'>
CF_RunContent('<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" \r\n codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,2,0"\r\n ID="Images_5281548670100005_SWF" name="Images_5281548670100005_SWF" WIDTH="575" HEIGHT="575">\r\n\t<PARAM NAME="movie" VALUE="/CFIDE/GraphData.cfm?graphCache=wc50&graphID=Images/5281548670100005.SWF"/>\r\n\t<PARAM NAME="quality" VALUE="high"/>\r\n\t<PARAM NAME="bgcolor" VALUE="#FFFFFF"/>\r\n<EMBED src="/CFIDE/GraphData.cfm?graphCache=wc50&graphID=Images/5281548670100005.SWF" \r\n\t\tquality="high" bgcolor="#FFFFFF" WIDTH="575" HEIGHT="575" TYPE="application/x-shockwave-flash"\r\n PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">\r\n</EMBED>\r\n</OBJECT>');
</script>
</div>
</body>
</html>
Notice the references to the CFIDE directory. If that directory is not accessible the <cfchart> tag will not work correctly (you will get a blank chart).
Two relevant discussions about this with potential work arounds:
On the Adobe forums
By Brandon Purcell