Here, I wanted to demonstrate how can we use customize colors
to the pie chart and bar chart elements.
In above output, the chart 1 and 3 has been created by using
“blue“style of the coldfusion.
Coldfusion has provided few style – blue, beige, default, yellow,
silver and red.
I have written some code to generate following charts -
In above output, the chart 1 and 3 has been created by using
“blue“style of the coldfusion.
Chart 1. Pie Chart –
CF style “blue”
<cfchart style="blue">
<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>
Chart 3. Bar Chart –
CF style “blue”
<cfchart style="blue">
<cfchartseries type="bar">
<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>
<cfchartseries type="bar">
<cfchartdata item="New car sales" value="5000">
<cfchartdata item="Used car sales" value="2500">
<cfchartdata item="Leasing" value="3000">
<cfchartdata item="Service" value="4000">
</cfchartseries>
</cfchart>
If you don’t want to use the above color scheme then we can
give customized colors as follow.
Now I want to give my own colors. So I have chosen some
color by using following colors –
Also, I created following xml files. You need to create
separate xml files for the different chart in Coldfusion. I have created
pie.xml and bar.xml using hex code from above colors.
Pie.xml
<?xml version="1.0"
encoding="UTF-8"?>
<pieChart style="Solid"
is3D="false">
<dataLabels
style="Value" placement="Outside"/>
<legend>
<decoration
style="None"/>
</legend>
<elements
place="Default" drawOutline="false">
<morph
morph="Grow" stage="Cols"/>
<series
index="0">
<paint
color="#33FF66"/>
</series>
<series
index="1">
<paint
color="#33FFCC"/>
</series>
<series
index="2">
<paint
color="#B88A00"/>
</series>
<series
index="3">
<paint
color="#66FF33"/>
</series>
<series
index="4">
<paint
color="#CCFF33"/>
</series>
<series
index="5">
<paint
color="#F5B800"/>
</series>
<series
index="6">
<paint
color="#FF6633"/>
</series>
<series
index="7">
<paint
color="#FFCC33"/>
</series>
</elements>
<popup
background="#C8FFFFFF" foreground="#333333"/>
<paint
paint="Plain"/>
<insets
left="5" top="5" right="5"
bottom="5"/>
</pieChart>
bar.xml
<?xml version="1.0"
encoding="UTF-8"?>
<frameChart autoAdjust="false"
is3D="false" isInterpolated="true">
<frame
xDepth="6" yDepth="6" outline="#333333"
lightColor="white"
leftAxisPlacement="Front"
rightAxisPlacement="Front" stripColor="#CCCCCC"/>
<xAxis>
<labelStyle
isHideOverlapped="true" orientation="Horizontal"/>
<titleStyle
font="Arial-12-bold" isMultiline="false"/>
</xAxis>
<yAxis
scaleMin="0">
<titleStyle
font="Arial-12-bold"/>
<dateTimeStyle
majorUnit="Year" minorUnit="Year"/>
<labelFormat
style="Pattern" pattern="#,##0.########"/>
</yAxis>
<yAxis2>
<titleStyle
font="Arial-12-bold"/>
</yAxis2>
<topYAxis>
<titleStyle
font="Arial-12-bold"/>
</topYAxis>
<topYAxis2>
<titleStyle
font="Arial-12-bold"/>
</topYAxis2>
<dataLabels
foreground="black"/>
<legend
isVisible="false" showColumnLegend="true">
<decoration
style="None"/>
</legend>
<elements
action="" drawOutline="false">
<morph
morph="Grow"/>
<series
index="0">
<paint
color="#33FF66"/>
</series>
<series
index="1">
<paint
color="#33FFCC"/>
</series>
<series
index="2">
<paint
color="#B88A00"/>
</series>
<series
index="3">
<paint
color="#66FF33"/>
</series>
<series
index="4">
<paint
color="#CCFF33"/>
</series>
<series
index="5">
<paint
color="#F5B800"/>
</series>
<series
index="6">
<paint
color="#FF6633"/>
</series>
<series
index="7">
<paint
color="#FFCC33"/>
</series>
</elements>
<popup
background="#C8FFFFFF" foreground="#333333"/>
<paint
paint="Plain"/>
<insets
left="5" top="5" right="5"
bottom="5"/>
</frameChart>
I have used this xml style for pie chart 2 and bar chart 4
as shown in image 1 as follows –
Chart 2. Pie Chart – with
pie.xml
<cfchart style = "pie.xml">
<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>
Chart 4. Pie Chart – with
bar.xml
<cfchart
style = "bar.xml">
<cfchartseries type="bar">
<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>
<cfchartseries type="bar">
<cfchartdata item="New car sales" value="5000">
<cfchartdata item="Used car sales" value="2500">
<cfchartdata item="Leasing" value="3000">
<cfchartdata item="Service" value="4000">
</cfchartseries>
</cfchart>
Following is the final
code (main.cfm) to get the output as shown in image 1 but you have to include
above mentioned xml files in the same directory or if you want to use xml file from
other directory then need to provide proper path in style=”” attribute –
Main.cfm
<table cellspacing="0" cellpadding="0" border="2" style="width:80%;">
<tr>
<td style="text-align:center;">
<cfchart style="blue">
<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>
</td>
<td style="text-align:center;">
<cfchart
style = "pie.xml">
<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>
</td>
</tr>
<tr>
<td style="text-align:center;">
<cfchart style="blue">
<cfchartseries type="bar">
<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>
<cfchartseries type="bar">
<cfchartdata item="New car
sales" value="5000">
<cfchartdata item="Used car
sales" value="2500">
<cfchartdata item="Leasing" value="3000">
<cfchartdata item="Service" value="4000">
</cfchartseries>
</cfchart>
</td>
<td style="text-align:center;">
<cfchart
style = "bar.xml">
<cfchartseries type="bar">
<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>
<cfchartseries type="bar">
<cfchartdata item="New car
sales" value="5000">
<cfchartdata item="Used car
sales" value="2500">
<cfchartdata item="Leasing" value="3000">
<cfchartdata item="Service" value="4000">
</cfchartseries>
</cfchart>
</td>
</tr>
</table>
No comments:
Post a Comment