Timmy's

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

CFusionMX7\charting\styles

 

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