World of Cold Fusion
< cfchart > < cfchartseries type="type"> < cfchartdata item="something" value="number"> </ cfchartseries > </ chart >Example1 a simple pie chart that illustrates four values:
< cfchart > < cfchartseries type="pie"> < cfchartdata item="New car sales" value="50000"> < cfchartdata item="Used car sales" value="25000"> < cfchartdata item="Leasing" value="30000"> < cfchartdata item="Service" value="40000"> </ cfchartseries > </ cfchart>
Example2 a Pie Chart displaying data dynamically using query
< cfchart format="jpg" chartheight="200" chartwidth="310" showBorder = "no" >
< cfchartseries type="pie">
<cfoutput query="rs_result">
< cfchartdata item=#trim(str_sectionname)# value=#section_percentage#>
</cfoutput>
</ cfchartseries >
</ cfchart >
Example3 a bar chart calling query in cfchartseries
<cfquery name="GetSalaries" datasource="timmy">
SELECT Department.Dept_Name ,Employee.Dept_ID ,Employee.Salary FROM Department , Employee
WHERE Department.Dept_ID = Employee.Dept_ID
</cfquery>
<!--- Use a query of queries to generate a new query with --->
<!--- AVG and SUM calculate statistics. --->
<!--- GROUP BY generates results for each department. --->
<cfquery dbtype = "query" name = "DataTable">
SELECT Dept_Name ,AVG(Salary) AS avgSal ,SUM(Salary) AS sumSal FROM GetSalaries
GROUP BY Dept_Name
</cfquery>
<h1>Employee Salary Analysis</h1>
<!--- Bar graph, from Query of Queries --->
< cfchart format="flash" xaxistitle="Department" yaxistitle="Salary Average">
< cfchartseries type="bar" query="DataTable" itemcolumn="Dept_Name" valuecolumn="avgSal">
< cfchartdata item="Facilities" value="35000">
</ cfchartseries >
</ cfchart >
< cfchart format="flash" xaxistitle="Department" yaxistitle="Salary Average">
< cfchartseries type="bar" itemcolumn="Dept_Name" valuecolumn="avgSal">
< cfchartdata item="Facilities" value="35000">
<cfloop query="DataTable">
< cfchartdata item="#DataTable.Dept_Name#" value="#DataTable.avgSal#">
</cfloop>
</ cfchartseries >
</ cfchart >
Example4 Combining line chart and Bar chart
< cfchart backgroundColor="white" xAxisTitle="Department" yAxisTitle="Salary Average"
font="Arial" gridlines=6 showXGridlines="yes" showYGridlines="yes" showborder="yes">
< cfchartseries type="line" seriesColor="blue" paintStyle="plain" seriesLabel="Contract Salaries">
<cfchartdata item="HR" value=70000>
<cfchartdata item="Marketing" value=95000>
<cfchartdata item="Sales" value=80000>
<cfchartdata item="Training" value=93000>
</ cfchartseries >
< cfchartseries type="bar" query="DataTable" valueColumn="avgSal" itemColumn="Dept_Name" seriesColor="gray"
paintStyle="plain" seriesLabel="Dept. Average Salaries"/>
</ cfchart >
Example5 Creating an Area Chart
<cfchart chartWidth=400 BackgroundColor="##FFFF00" show3D="yes">
<cfchartseries type="area" query="HireSalaries" valueColumn="AvgByStart" itemColumn="StartDate" />
</cfchart>
Example6 default chart styles: beige , blue , default , red , silver , yellow ,
< cfchart style="beige">
< cfchartseries type="pie">
< cfchartdata item="New car sales" value="50000">
< cfchartdata item="Used car sales" value="25000">
< cfchartdata item="Leasing" value="30000">
< cfchartdata item="Service" value="40000">
</ cfchartseries >
</ cfchart >
Creating your own chart styles:
Styles default location
Open the XML file that you want to modify, for example beige.xml.
Modify the file contents.
Save the file with a different name; for example newstyle.xml.
Example 7
*******************************************************************************
<cfchart style="newstyle" scaleto="60000" title="From Default location">
<cfchartseries type="bar" datalabelstyle="value">
<cfchartdata item="New car sales" value="50000">
<cfchartdata item="Used car sales" value="25000">
<cfchartdata item="Leasing" value="30000">
<cfchartdata item="Service" value="40000">
</cfchartseries>
</cfchart>
<cfchart style="newstyle1.xml" scaleto="60000" title="From current folder">
<cfchartseries type="bar" datalabelstyle="value">
<cfchartdata item="New car sales" value="50000">
<cfchartdata item="Used car sales" value="25000">
<cfchartdata item="Leasing" value="30000">
<cfchartdata item="Service" value="40000">
</cfchartseries>
</cfchart>
<cfchart style="../joyan/newstyle3.xml" scaleto="60000" title="From another location">
<cfchartseries type="bar" datalabelstyle="value">
<cfchartdata item="New car sales" value="50000">
<cfchartdata item="Used car sales" value="25000">
<cfchartdata item="Leasing" value="30000">
<cfchartdata item="Service" value="40000">
</cfchartseries>
</cfchart>
*******************************************************************************
Writing a chart to a variable and a file:
We use the name attribute of the cfhart tag to write a chart to a variable. If you specify the name attribute, the chart is not rendered in the browser but is written to the variable.
Example8:
< cfchart name=" myChart " format="jpg" >
< cfchartseries type="pie">
< cfchartdata item="New Vehicle Sales" value=500000>
< cfchartdata item="Used Vehicle Sales" value=250000>
< cfchartdata item="Leasing" value=300000>
< cfchartdata item="Service" value=400000>
</ cfchartseries >
</ cfchart >
<cffile
action="WRITE"
file="c:\inetpub\wwwroot\Training\timmy\vehicle.jpg"
output="# myChart #">
<img src="vehicle.jpg" height=240 width=320>
posted by Timmy K Tom @ 12:44 AM
0 comments
