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#" />
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'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.
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 am creating a bar graph in CF11 .Is it possible to give different colors for the different bars in CFchartseries according to the data.
<cfchartseries serieslabel="Rent" type="bar" colorlist="barcolr_list">
<cfloop index="counter" from=1 to="#ArrayLen(PropName_arry)-1#" step="1">
<cfchartdata item="#PropName_arry[counter]#" value="#Grossrent_arry[counter]#" >
</cfloop>
</cfchartseries>
I read in docs that the colorlist attribute is available for pie,pyramid..etc graph .
How can i set different colors to bars according to the grossrent value
ie, if the grossrent > 800 the bar color should be red
else it should be blue
This code worked in CF7 .But not worked in CF11
ColorList only works for chart types pie, pyramid, area, horizontalbar, cone, cylinder, or step. cfchartseries.
You can create specific colors for each column 2 different ways. Through rules or through a list of styles.
You can create a rule which is added to the plot attribute. Specify a colour that applies to that rule. Below example shows rules when the x axis value is true.
<cfset plot= {"rules": [
{"rule":"'%k'=='2007'",
"background-color":"purple"},
{"rule":"'%k'=='2008'",
"background-color":"pink"},
{"rule":"'%k'=='2009'",
"background-color":"green"}]}
>
Or you can create a list of styles for the chart using the styles attribute in plot.
<cfset plot = {"styles":[
{
"background-color":"##e95d22"
},
{
"background-color":"##017890"
},
{
"background-color":"##da534d"
},
{
"background-color":"##4a266d"
},
{
"background-color":"##f4913c"
}]}>
Include the plot variable in the chart element like this.
<cfchart format="png" chartheight="180" chartwidth="233" showlegend="false" style="test.js" plot="#plot#">
<cfchartseries type="bar">
<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>
To help with my example here is my test.js
{
"graphset":[
{
"border-width":1,
"background-color":"transparent",
"plotarea":{"margin":"dynamic"}
}]
}
Both these techniques can be included directly through the test.js file as well but to make these colours dynamic it is easier to enter them through the plot attribute.
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>