cfchartset

Last updated on Feb 25, 2025

ColdFusion

Open app

CFML Reference User Guide

ColdFusion functions

ColdFusion functions by category
Functions a-b
1. Abs
2. ACos
3. AddSOAPRequestHeader
4. AddSOAPResponseHeader
5. AjaxLink
6. AjaxOnLoad
7. ApplicationStop
8. ArrayAppend
9. ArrayAvg
10. ArrayClear
11. ArrayContains
12. ArrayContainsNoCase
13. ArrayDelete
14. ArrayDeleteAt
15. ArrayDeleteNoCase
16. ArrayEach
17. ArrayFilter
18. ArrayFind
19. ArrayFindAll
20. ArrayFindAllNoCase
21. ArrayFindNoCase
22. ArrayInsertAt
23. ArrayIsDefined
24. ArrayIsEmpty
25. ArrayLen
26. ArrayMap
27. ArrayMax
28. ArrayMin
29. ArrayNew
30. ArrayPrepend
31. ArrayReduce
32. ArrayResize
33. ArraySet
34. ArraySetMetadata
35. ArraySlice
36. ArraySort
37. ArraySum
38. ArraySwap
39. ArrayToList
40. Asc
41. ASin
42. Atn
43. AuthenticatedContext
44. AuthenticatedUser
45. BinaryDecode
46. BinaryEncode
47. BitAnd
48. BitMaskClear
49. BitMaskRead
50. BitMaskSet
51. BitNot
52. BitOr
53. BitSHLN
54. BitSHRN
55. BitXor
56. BooleanFormat
Functions-c-d
Functions-e-g
Functions-h-im
Functions-in-k
Functions-l
Functions-m-r
Functions-s
Functions-t-z
1. Tan
2. ThreadJoin
3. ThreadTerminate
4. Throw
5. TimeFormat
6. ToBase64
7. ToBinary
8. ToScript
9. ToString
10. Trace
11. Transactionandconcurrency
12. TransactionCommit
13. TransactionRollback
14. TransactionSetSavePoint
15. Trim
16. UCase
17. URLDecode
18. URLEncodedFormat
19. URLSessionFormat
20. Val
21. ValueList
22. VerifyClient
23. Week
24. Wrap
25. WriteDump
26. WriteLog
27. WriteOutput
28. WSGetAllChannels
29. WSGetSubscribers
30. WSPublish
31. WSSendMessage
32. XmlChildPos
33. XmlElemNew
34. XmlFormat
35. XmlGetNodeType
36. XmlNew
37. XmlParse
38. XmlSearch
39. XmlTransform
40. XmlValidate
41. Year
42. YesNoFormat

ColdFusion tags

ColdFusion tag summary
ColdFusion tags by category
1. Application framework tags
  1. cfapplication
  2. cfassociate
  3. cferror
  4. cfimport
  5. cfinterface
  6. cflock
  7. cfscript
  8. cfthread
2. Communications tags
3. Database manipulation tags
4. Data output tags
  1. cfchart
5. Debugging tags
  1. cfdump
  2. cftimer
  3. cftrace
6. Exception handling tags
  1. cfcatch
  2. cferror
  3. cffinally
  4. cfrethrow
  5. cfthrow
  6. cftry
7. Extensibility tags
  1. cfchart
  2. cfchartdata
  3. cfchartseries
  4. cfcollection
  5. cfcomponent
  6. cfexecute
  7. cfftp
  8. function
  9. cfindex
  10. cfinterface
  11. cfinvoke
  12. cfinvokeargument
  13. cfobject
  14. cfproperty
  15. cfreport
  16. cfreportparam
  17. cfreturn
  18. cfsearch
  19. cfsharepoint
  20. cfspreadsheet
  21. cfwddx
  22. cfxml
8. File management tags
  1. cfdirectory
  2. cffile
  3. cffileupload
  4. cfftp
  5. cfzip
  6. cfzipparam
9. Flow-control tags
  1. cfabort
  2. cfbreak
  3. cfcase
  4. cfcontinue
  5. cfdefaultcase
  6. cfelse
  7. cfelseif
  8. cfexecute
  9. cfexit
  10. cfif
  11. cfinclude
  12. cflocation
  13. cfloop
  14. cfrethrow
  15. cfswitch
  16. cfthrow
  17. cftry
10. Forms tags
  1. cfapplet
  2. cfcalendar
  3. cffileupload
  4. cfform
  5. cfformgroup
  6. cfformitem
  7. cfgrid
  8. cfgridcolumn
  9. cfgridrow
  10. cfgridupdate
  11. cfinput
  12. cfpdf
  13. cfpdfform
  14. cfpdfformparam
  15. cfpdfparam
  16. cfpdfsubform
  17. cfselect
  18. cfslider
  19. cftextarea
  20. cftree
  21. cftreeitem
11. Internet Protocol tags
  1. cfajaximport
  2. cfajaxproxy
  3. cfftp
  4. cffeed
  5. cfimap
  6. cfhttp
  7. cfhttpparam
  8. cfldap
  9. cfmail
  10. cfmailparam
  11. cfmailpart
  12. cfpop
  13. cfsprydataset
12. Page processing tags
  1. cfcache
  2. cfcontent
  3. cfflush
  4. cfheader
  5. cfhtmlhead
  6. cfinclude
  7. cfprocessingdirective
  8. cfsetting
  9. cfsilent
13. Security tags
14. Variable manipulation tags
  1. cfcookie
  2. cfdump
  3. cfparam
  4. cfregistry
  5. cfsavecontent
  6. cfschedule
  7. cfset
  8. cfsetting
15. Other tags
  1. cfimage
  2. cflog
  3. cfregistry
Tags a-b
Tags c
Tags f
Tags g-h
1. cfgraph
2. cfgraphdata
3. cfgrid
4. cfgridcolumn
5. cfgridrow
6. cfgridupdate
7. cfheader
8. cfhtmlhead
9. cfhtmltopdf
10. cfhtmltopdfitem
11. cfhttp
12. cfhttpparam
Tags i
1. cfif
2. cfimage
3. cfimap
4. cfimapfilter
5. cfimpersonate
6. cfimport
7. cfinclude
8. cfindex
9. cfinput
10. cfinsert
11. cfinterface
12. cfinvoke
13. cfinvokeargument
Tags j-l
Tags m-o
Tags p-q
1. cfparam
2. cfpdf
3. cfpdfform
4. cfpdfformparam
5. cfpdfparam
6. cfpdfsubform
7. cfpod
8. cfpop
9. cfpresentation
10. cfpresentationslide
11. cfpresenter
12. cfprint
13. cfprocessingdirective
14. cfprocparam
15. cfprocresult
16. cfprogressbar
17. cfproperty
18. cfquery
19. cfqueryparam
Tags r-s
1. cfregistry
2. cfreport
3. cfreportparam
4. cfrethrow
5. cfreturn
6. cfsavecontent
7. cfschedule
8. cfscript
9. cfsearch
10. cfselect
11. cfservlet
12. cfservletparam
13. cfset
14. cfsetting
15. cfsharepoint
16. cfsilent
17. cfslider
18. cfspreadsheet
19. cfsprydataset
20. cfstoredproc
21. cfswitch
Tags t
1. cftable
2. cftextarea
3. cftextinput
4. cfthread
5. cfthrow
6. cftimer
7. cftooltip
8. cftrace
9. cftransaction
10. cftree
11. cftreeitem
12. cftry
Tags u-z
1. cfupdate
2. cfwddx
3. cfwebsocket
4. cfwindow
5. cfxml
6. cfzip
7. cfzipparam

CFML Reference

Cloud services

CFML Reference User Guide
ColdFusion functions
ColdFusion tags
1. ColdFusion tag summary
2. ColdFusion tags by category
  1. Application framework tags
    1. cfapplication
    2. cfassociate
    3. cferror
    4. cfimport
    5. cfinterface
    6. cflock
    7. cfscript
    8. cfthread
  2. Communications tags
  3. Database manipulation tags
  4. Data output tags
    1. cfchart
  5. Debugging tags
    1. cfdump
    2. cftimer
    3. cftrace
  6. Exception handling tags
    1. cfcatch
    2. cferror
    3. cffinally
    4. cfrethrow
    5. cfthrow
    6. cftry
  7. Extensibility tags
    1. cfchart
    2. cfchartdata
    3. cfchartseries
    4. cfcollection
    5. cfcomponent
    6. cfexecute
    7. cfftp
    8. function
    9. cfindex
    10. cfinterface
    11. cfinvoke
    12. cfinvokeargument
    13. cfobject
    14. cfproperty
    15. cfreport
    16. cfreportparam
    17. cfreturn
    18. cfsearch
    19. cfsharepoint
    20. cfspreadsheet
    21. cfwddx
    22. cfxml
  8. File management tags
    1. cfdirectory
    2. cffile
    3. cffileupload
    4. cfftp
    5. cfzip
    6. cfzipparam
  9. Flow-control tags
    1. cfabort
    2. cfbreak
    3. cfcase
    4. cfcontinue
    5. cfdefaultcase
    6. cfelse
    7. cfelseif
    8. cfexecute
    9. cfexit
    10. cfif
    11. cfinclude
    12. cflocation
    13. cfloop
    14. cfrethrow
    15. cfswitch
    16. cfthrow
    17. cftry
  10. Forms tags
    1. cfapplet
    2. cfcalendar
    3. cffileupload
    4. cfform
    5. cfformgroup
    6. cfformitem
    7. cfgrid
    8. cfgridcolumn
    9. cfgridrow
    10. cfgridupdate
    11. cfinput
    12. cfpdf
    13. cfpdfform
    14. cfpdfformparam
    15. cfpdfparam
    16. cfpdfsubform
    17. cfselect
    18. cfslider
    19. cftextarea
    20. cftree
    21. cftreeitem
  11. Internet Protocol tags
    1. cfajaximport
    2. cfajaxproxy
    3. cfftp
    4. cffeed
    5. cfimap
    6. cfhttp
    7. cfhttpparam
    8. cfldap
    9. cfmail
    10. cfmailparam
    11. cfmailpart
    12. cfpop
    13. cfsprydataset
  12. Page processing tags
    1. cfcache
    2. cfcontent
    3. cfflush
    4. cfheader
    5. cfhtmlhead
    6. cfinclude
    7. cfprocessingdirective
    8. cfsetting
    9. cfsilent
  13. Security tags
  14. Variable manipulation tags
    1. cfcookie
    2. cfdump
    3. cfparam
    4. cfregistry
    5. cfsavecontent
    6. cfschedule
    7. cfset
    8. cfsetting
  15. Other tags
    1. cfimage
    2. cflog
    3. cfregistry
3. Tags a-b
4. Tags c
5. Tags f
6. Tags g-h
  1. cfgraph
  2. cfgraphdata
  3. cfgrid
  4. cfgridcolumn
  5. cfgridrow
  6. cfgridupdate
  7. cfheader
  8. cfhtmlhead
  9. cfhtmltopdf
  10. cfhtmltopdfitem
  11. cfhttp
  12. cfhttpparam
7. Tags i
  1. cfif
  2. cfimage
  3. cfimap
  4. cfimapfilter
  5. cfimpersonate
  6. cfimport
  7. cfinclude
  8. cfindex
  9. cfinput
  10. cfinsert
  11. cfinterface
  12. cfinvoke
  13. cfinvokeargument
8. Tags j-l
9. Tags m-o
10. Tags p-q
  1. cfparam
  2. cfpdf
  3. cfpdfform
  4. cfpdfformparam
  5. cfpdfparam
  6. cfpdfsubform
  7. cfpod
  8. cfpop
  9. cfpresentation
  10. cfpresentationslide
  11. cfpresenter
  12. cfprint
  13. cfprocessingdirective
  14. cfprocparam
  15. cfprocresult
  16. cfprogressbar
  17. cfproperty
  18. cfquery
  19. cfqueryparam
11. Tags r-s
  1. cfregistry
  2. cfreport
  3. cfreportparam
  4. cfrethrow
  5. cfreturn
  6. cfsavecontent
  7. cfschedule
  8. cfscript
  9. cfsearch
  10. cfselect
  11. cfservlet
  12. cfservletparam
  13. cfset
  14. cfsetting
  15. cfsharepoint
  16. cfsilent
  17. cfslider
  18. cfspreadsheet
  19. cfsprydataset
  20. cfstoredproc
  21. cfswitch
12. Tags t
  1. cftable
  2. cftextarea
  3. cftextinput
  4. cfthread
  5. cfthrow
  6. cftimer
  7. cftooltip
  8. cftrace
  9. cftransaction
  10. cftree
  11. cftreeitem
  12. cftry
13. Tags u-z
  1. cfupdate
  2. cfwddx
  3. cfwebsocket
  4. cfwindow
  5. cfxml
  6. cfzip
  7. cfzipparam
CFML Reference
1. Reserved words and variables
2. Ajax JavaScript functions
3. ColdFusion ActionScript functions
4. ColdFusion mobile functions
5. Application.cfc reference
6. Script functions implemented as CFCs
7. ColdFusion Flash Form style reference
8. ColdFusion event gateway reference
9. ColdFusion C++ CFX Reference
10. ColdFusion Java CFX reference
11. WDDX JavaScript Objects
Cloud services

Description

The cfchartset tag in ColdFusion allows ColdFusion developers and chart creators to handle complex data visualizations with multiple, distinct charts within a single container. Here are a few reasons to consider using the cfchartset tag in ColdFusion:

Multiple charts: Cfchartset allows you to create multiple charts, which is useful when comparing related visualizations side-by-side and displaying different views of the data, for example, pie or bar charts.
Uniform updates: Cfchartset allows you to view all your chart configurations in one place. This means it’s easier to create and maintain the charts, reducing redundancy.
Better layouts: Cfchartset makes it easier to create complex layouts involving multiple charts, so you can define the position and size of the charts precisely. Additionally, you can arrange charts in grids, columns, or any other layout suitable for your data presentation needs.

The cfchartset tag is particularly useful in scenarios, such as, a one-stop dashboard for a unified view of key metrics, multi-metric analysis to identify trends or correlations, or a comparative analysis visualizing data in a unified view.

The cfchartset tag defines the width and height of the container and the layout of the charts inside the container. In the cfchartset tag, you can fit charts using cfchart, in a pre-defined layout in the cfchartset tag.

Syntax

<cfchartset

format="html/png/jpg/svg"

layout="horizontal/vertical/n row x m cols"

renderer="svg/canvas/vml"

height="height of the container in pixels or height in percentage"

width="width of the container in pixels or width in percentage"

name="the name given to the container"

<cfchartset  
    format="html/png/jpg/svg"
    layout="horizontal/vertical/n row x m cols"
    renderer="svg/canvas/vml"
    height="height of the container in pixels or height in percentage"
    width="width of the container in pixels or width in percentage"
    name="the name given to the container"
>

Note:

If it is a client-side chart, both pixel and percentage is applicable to width and height of the chart.
If it is a server-side chart, only pixel is applicable to width and height of the chart.

History

ColdFusion (2025 release): Added the tag.

Attributes

Attribute

Required

Type

Default

Description

name

String

None

If you set a variable as name, the output will be stored in the variable. Generates the graph as binary data and assigns it to the specified variable. Suppresses chart display.

You can use the name value in the cffile tag to write the chart to a file.

layout

String

None. It adjusts all charts in the container using the default size.

Defines how you’d arrange the charts in the cfchart container. The available options are:

horizontal
vertical
r x c (rows x columns)

format

String

png

File format in which to save the graph. The available formats are:

html
png
jpg
svg

renderer

String

Depends on valuesdefined

Specify the rendering method. The supported values are:

svg
canvas
vml

height

Integer

240

Chartset container height in pixels.

width

Integer

320

Chartset container width in pixels.

base64

Boolean

False

This attribute is used for server-side charting.

Examples

Example 1- 3 rows and 2 columns

This following script creates a 3x2 layout of five charts using <cfchartset>. Each chart visualizes data for two companies, Acme Inc. and CFX Tech, with values for Day 1 and Day 2.

</cfchartseries>

</cfchartseries>

</cfchart>

</cfchartseries>

</cfchartseries>

</cfchart>

border={"color":"red"}

</cfscript>

</cfchartseries>

</cfchartseries>

</cfchart>

</cfchartseries>

</cfchartseries>

</cfchart>

</cfchartseries>

</cfchartseries>

</cfchart>

</cfchartset>

<cfchartset format="html" layout="3x2" height="1000" width="1000" name="first viz"> <cfchart type="bar" title="Two-series bar chart" plotarea = "#{"margin"="dynamic"}#" showlegend="yes"> <cfchartseries serieslabel="Acme Inc." markerstyle="circle" color="##0aaa8f"> <cfchartdata item="Day 1" value="19.2"/> <cfchartdata item="Day 2" value="15.2"/> </cfchartseries> <cfchartseries serieslabel="CFX Tech" markerstyle="diamond" color="##0a7caa" > <cfchartdata item="Day 1" value="39.2"/> <cfchartdata item="Day 2" value="35.2"/> </cfchartseries> </cfchart> <cfchart showLegend="no" title="Two-series Line chart" type="area" plotarea = "#{"margin"="dynamic"}#"> <cfchartseries serieslabel="Acme Inc." markerstyle="circle" color="##0aaa8f"> <cfchartdata item="Day 1" value="19.2"/> <cfchartdata item="Day 2" value="15.2"/> </cfchartseries> <cfchartseries serieslabel="CFX Tech" markerstyle="diamond" color="##0a7caa" > <cfchartdata item="Day 1" value="39.2"/> <cfchartdata item="Day 2" value="35.2"/> </cfchartseries> </cfchart> <cfscript> border={"color":"red"} </cfscript> <cfchart showLegend="no" title="Pie chart" type="pie" plotarea = "#{"margin"="dynamic"}#" showborder="yes" border="#border#"> <cfchartseries serieslabel="Acme Inc." markerstyle="circle" color="##0aaa8f"> <cfchartdata item="Day 1" value="19.2"/> <cfchartdata item="Day 2" value="15.2"/> </cfchartseries> <cfchartseries serieslabel="CFX Tech" markerstyle="diamond" color="##0a7caa" > <cfchartdata item="Day 1" value="39.2"/> <cfchartdata item="Day 2" value="35.2"/> </cfchartseries> </cfchart> <cfchart showLegend="no" type="line" title="Two-series Line chart"> <cfchartseries serieslabel="Acme Inc." markerstyle="circle" color="##0aaa8f"> <cfchartdata item="Day 1" value="19.2"/> <cfchartdata item="Day 2" value="15.2"/> </cfchartseries> <cfchartseries serieslabel="CFX Tech" markerstyle="diamond" color="##0a7caa" > <cfchartdata item="Day 1" value="39.2"/> <cfchartdata item="Day 2" value="35.2"/> </cfchartseries> </cfchart> <cfchart showLegend="no" type="ring" title="Ring chart"> <cfchartseries serieslabel="Acme Inc." markerstyle="circle" color="##0aaa8f"> <cfchartdata item="Day 1" value="19.2"/> <cfchartdata item="Day 2" value="15.2"/> </cfchartseries> <cfchartseries serieslabel="CFX Tech" markerstyle="diamond" color="##0a7caa" > <cfchartdata item="Day 1" value="39.2"/> <cfchartdata item="Day 2" value="35.2"/> </cfchartseries> </cfchart> </cfchartset>

<cfchartset format="html" layout="3x2" height="1000" width="1000" name="first viz">     
    <cfchart type="bar" title="Two-series bar chart" plotarea = "#{"margin"="dynamic"}#" showlegend="yes"> 
        <cfchartseries serieslabel="Acme Inc." markerstyle="circle" color="##0aaa8f"> 
            <cfchartdata item="Day 1" value="19.2"/> 
            <cfchartdata item="Day 2" value="15.2"/> 
        </cfchartseries> 
        <cfchartseries serieslabel="CFX Tech" markerstyle="diamond" color="##0a7caa" > 
            <cfchartdata item="Day 1" value="39.2"/> 
            <cfchartdata item="Day 2" value="35.2"/> 
        </cfchartseries> 
    </cfchart> 


    <cfchart showLegend="no" title="Two-series Line chart" type="area" plotarea = "#{"margin"="dynamic"}#"> 
        <cfchartseries serieslabel="Acme Inc." markerstyle="circle" color="##0aaa8f"> 
            <cfchartdata item="Day 1" value="19.2"/> 
            <cfchartdata item="Day 2" value="15.2"/> 
        </cfchartseries> 

        <cfchartseries serieslabel="CFX Tech" markerstyle="diamond" color="##0a7caa" > 
            <cfchartdata item="Day 1" value="39.2"/> 
            <cfchartdata item="Day 2" value="35.2"/> 
        </cfchartseries> 

    </cfchart> 

 <cfscript> 
    border={"color":"red"} 
  </cfscript> 

    <cfchart showLegend="no" title="Pie chart"  type="pie" plotarea = "#{"margin"="dynamic"}#" showborder="yes" border="#border#"> 
        <cfchartseries serieslabel="Acme Inc." markerstyle="circle" color="##0aaa8f"> 
            <cfchartdata item="Day 1" value="19.2"/> 
            <cfchartdata item="Day 2" value="15.2"/> 
        </cfchartseries> 

        <cfchartseries serieslabel="CFX Tech" markerstyle="diamond" color="##0a7caa" > 
            <cfchartdata item="Day 1" value="39.2"/> 
            <cfchartdata item="Day 2" value="35.2"/> 
        </cfchartseries> 
    </cfchart> 

    <cfchart showLegend="no" type="line" title="Two-series Line chart"> 
        <cfchartseries serieslabel="Acme Inc." markerstyle="circle" color="##0aaa8f"> 
            <cfchartdata item="Day 1" value="19.2"/> 
            <cfchartdata item="Day 2" value="15.2"/> 
        </cfchartseries> 

        <cfchartseries serieslabel="CFX Tech" markerstyle="diamond" color="##0a7caa" > 
            <cfchartdata item="Day 1" value="39.2"/> 
            <cfchartdata item="Day 2" value="35.2"/> 
        </cfchartseries> 
    </cfchart> 

    <cfchart showLegend="no" type="ring" title="Ring chart"> 
        <cfchartseries serieslabel="Acme Inc." markerstyle="circle" color="##0aaa8f"> 
            <cfchartdata item="Day 1" value="19.2"/> 
            <cfchartdata item="Day 2" value="15.2"/> 
        </cfchartseries> 

        <cfchartseries serieslabel="CFX Tech" markerstyle="diamond" color="##0a7caa" > 
            <cfchartdata item="Day 1" value="39.2"/> 
            <cfchartdata item="Day 2" value="35.2"/> 
        </cfchartseries> 

    </cfchart> 

</cfchartset>

Output

Example 2- 2 rows and 3 columns

This following script creates a 2x3 layout of five charts using <cfchartset>. Each chart visualizes data for two companies, Acme Inc. and CFX Tech, with values for Day 1 and Day 2.

</cfchartseries>

</cfchartseries>

</cfchart>

</cfchartseries>

</cfchartseries>

</cfchart>

border={"color":"red"}

</cfscript>

</cfchartseries>

</cfchartseries>

</cfchart>

</cfchartseries>

</cfchartseries>

</cfchart>

</cfchartseries>

</cfchartseries>

</cfchart>

</cfchartset>

<cfchartset format="html" layout="2x3" height="1000" width="1000" name="first viz"> <cfchart type="bar" title="Two-series bar chart" plotarea = "#{"margin"="dynamic"}#" showlegend="yes"> <cfchartseries serieslabel="Acme Inc." markerstyle="circle" color="##0aaa8f"> <cfchartdata item="Day 1" value="19.2"/> <cfchartdata item="Day 2" value="15.2"/> </cfchartseries> <cfchartseries serieslabel="CFX Tech" markerstyle="diamond" color="##0a7caa" > <cfchartdata item="Day 1" value="39.2"/> <cfchartdata item="Day 2" value="35.2"/> </cfchartseries> </cfchart> <cfchart showLegend="no" title="Two-series Line chart" type="area" plotarea = "#{"margin"="dynamic"}#"> <cfchartseries serieslabel="Acme Inc." markerstyle="circle" color="##0aaa8f"> <cfchartdata item="Day 1" value="19.2"/> <cfchartdata item="Day 2" value="15.2"/> </cfchartseries> <cfchartseries serieslabel="CFX Tech" markerstyle="diamond" color="##0a7caa" > <cfchartdata item="Day 1" value="39.2"/> <cfchartdata item="Day 2" value="35.2"/> </cfchartseries> </cfchart> <cfscript> border={"color":"red"} </cfscript> <cfchart showLegend="no" title="Pie chart" type="pie" plotarea = "#{"margin"="dynamic"}#" showborder="yes" border="#border#"> <cfchartseries serieslabel="Acme Inc." markerstyle="circle" color="##0aaa8f"> <cfchartdata item="Day 1" value="19.2"/> <cfchartdata item="Day 2" value="15.2"/> </cfchartseries> <cfchartseries serieslabel="CFX Tech" markerstyle="diamond" color="##0a7caa" > <cfchartdata item="Day 1" value="39.2"/> <cfchartdata item="Day 2" value="35.2"/> </cfchartseries> </cfchart> <cfchart showLegend="no" type="line" title="Two-series Line chart"> <cfchartseries serieslabel="Acme Inc." markerstyle="circle" color="##0aaa8f"> <cfchartdata item="Day 1" value="19.2"/> <cfchartdata item="Day 2" value="15.2"/> </cfchartseries> <cfchartseries serieslabel="CFX Tech" markerstyle="diamond" color="##0a7caa" > <cfchartdata item="Day 1" value="39.2"/> <cfchartdata item="Day 2" value="35.2"/> </cfchartseries> </cfchart> <cfchart showLegend="no" type="ring" title="Ring chart"> <cfchartseries serieslabel="Acme Inc." markerstyle="circle" color="##0aaa8f"> <cfchartdata item="Day 1" value="19.2"/> <cfchartdata item="Day 2" value="15.2"/> </cfchartseries> <cfchartseries serieslabel="CFX Tech" markerstyle="diamond" color="##0a7caa" > <cfchartdata item="Day 1" value="39.2"/> <cfchartdata item="Day 2" value="35.2"/> </cfchartseries> </cfchart> </cfchartset>

<cfchartset format="html" layout="2x3" height="1000" width="1000" name="first viz">     
    <cfchart type="bar" title="Two-series bar chart" plotarea = "#{"margin"="dynamic"}#" showlegend="yes"> 
        <cfchartseries serieslabel="Acme Inc." markerstyle="circle" color="##0aaa8f"> 
            <cfchartdata item="Day 1" value="19.2"/> 
            <cfchartdata item="Day 2" value="15.2"/> 
        </cfchartseries> 
        <cfchartseries serieslabel="CFX Tech" markerstyle="diamond" color="##0a7caa" > 
            <cfchartdata item="Day 1" value="39.2"/> 
            <cfchartdata item="Day 2" value="35.2"/> 
        </cfchartseries> 
    </cfchart> 


    <cfchart showLegend="no" title="Two-series Line chart" type="area" plotarea = "#{"margin"="dynamic"}#"> 
        <cfchartseries serieslabel="Acme Inc." markerstyle="circle" color="##0aaa8f"> 
            <cfchartdata item="Day 1" value="19.2"/> 
            <cfchartdata item="Day 2" value="15.2"/> 
        </cfchartseries> 

        <cfchartseries serieslabel="CFX Tech" markerstyle="diamond" color="##0a7caa" > 
            <cfchartdata item="Day 1" value="39.2"/> 
            <cfchartdata item="Day 2" value="35.2"/> 
        </cfchartseries> 

    </cfchart> 

 <cfscript> 
    border={"color":"red"} 
  </cfscript> 

    <cfchart showLegend="no" title="Pie chart"  type="pie" plotarea = "#{"margin"="dynamic"}#" showborder="yes" border="#border#"> 
        <cfchartseries serieslabel="Acme Inc." markerstyle="circle" color="##0aaa8f"> 
            <cfchartdata item="Day 1" value="19.2"/> 
            <cfchartdata item="Day 2" value="15.2"/> 
        </cfchartseries> 

        <cfchartseries serieslabel="CFX Tech" markerstyle="diamond" color="##0a7caa" > 
            <cfchartdata item="Day 1" value="39.2"/> 
            <cfchartdata item="Day 2" value="35.2"/> 
        </cfchartseries> 
    </cfchart> 

    <cfchart showLegend="no" type="line" title="Two-series Line chart"> 
        <cfchartseries serieslabel="Acme Inc." markerstyle="circle" color="##0aaa8f"> 
            <cfchartdata item="Day 1" value="19.2"/> 
            <cfchartdata item="Day 2" value="15.2"/> 
        </cfchartseries> 

        <cfchartseries serieslabel="CFX Tech" markerstyle="diamond" color="##0a7caa" > 
            <cfchartdata item="Day 1" value="39.2"/> 
            <cfchartdata item="Day 2" value="35.2"/> 
        </cfchartseries> 
    </cfchart> 

    <cfchart showLegend="no" type="ring" title="Ring chart"> 
        <cfchartseries serieslabel="Acme Inc." markerstyle="circle" color="##0aaa8f"> 
            <cfchartdata item="Day 1" value="19.2"/> 
            <cfchartdata item="Day 2" value="15.2"/> 
        </cfchartseries> 

        <cfchartseries serieslabel="CFX Tech" markerstyle="diamond" color="##0a7caa" > 
            <cfchartdata item="Day 1" value="39.2"/> 
            <cfchartdata item="Day 2" value="35.2"/> 
        </cfchartseries> 

    </cfchart> 

</cfchartset>

Example 3 - using a horizontal layout

This following script code creates a side-by-side pie and bar chart visualization using <cfchartset> with a horizontal layout. The <cfscript> block defines styling attributes: a background gradient (##10ba9d to white), a pie slice size (56%), and polar chart scaling properties (refAngle and aperture set to 180).

background = {"color" = "##10ba9d", "color-2" = "white"};

plot = {"slice" = "56%"}

scaleR = {"refAngle" = 180, "aperture" = 180}

</cfscript>

</cfchartseries>

</cfchart>

</cfchartseries>

</cfchart>

</cfchartset>

<cfscript> background = {"color" = "##10ba9d", "color-2" = "white"}; plot = {"slice" = "56%"} scaleR = {"refAngle" = 180, "aperture" = 180} </cfscript> <cfchartset format="html" layout="horizontal" height="400" width="1800"> <cfchart format = "html" type = "pie" background="#background#" markersize="5"> <cfchartseries label="Temperatures(°C)- Monthly" seriescolor="white"> <cfchartdata item="Jan" value="5"> <cfchartdata item="Feb" value="70"> <cfchartdata item="Mar" value="10"> <cfchartdata item="Apr" value="40"> <cfchartdata item="May" value="18"> <cfchartdata item="Jun" value="22"> </cfchartseries> </cfchart> <cfchart format = "html" type = "bar" background="#background#"> <cfchartseries label="Temperature(°C) - Monthly" seriescolor="##3a5551"> <cfchartdata item="Jan" value="5"> <cfchartdata item="Feb" value="7"> <cfchartdata item="Mar" value="10"> <cfchartdata item="Apr" value="14"> <cfchartdata item="May" value="18"> <cfchartdata item="Jun" value="22"> </cfchartseries> </cfchart> </cfchartset>

<cfscript>
    background = {"color" = "##10ba9d", "color-2" = "white"};
    plot = {"slice" = "56%"}
    scaleR = {"refAngle" = 180, "aperture" = 180}
</cfscript>

<cfchartset format="html" layout="horizontal" height="400" width="1800">
    <cfchart format = "html" type = "pie" background="#background#" markersize="5">
        <cfchartseries label="Temperatures(°C)- Monthly" seriescolor="white">
                <cfchartdata item="Jan" value="5">
                <cfchartdata item="Feb" value="70">
                <cfchartdata item="Mar" value="10">
                <cfchartdata item="Apr" value="40">
                <cfchartdata item="May" value="18">
                <cfchartdata item="Jun" value="22">
        </cfchartseries>
    </cfchart>

    <cfchart format = "html" type = "bar" background="#background#">
    <cfchartseries  label="Temperature(°C) - Monthly" seriescolor="##3a5551">
            <cfchartdata item="Jan" value="5">
            <cfchartdata item="Feb" value="7">
            <cfchartdata item="Mar" value="10">
            <cfchartdata item="Apr" value="14">
            <cfchartdata item="May" value="18">
            <cfchartdata item="Jun" value="22">
        </cfchartseries>
    </cfchart>
</cfchartset>

Output

Example 4 - using a vertical layout

This following script code creates a side-by-side pie and bar chart visualization using <cfchartset> with a vertical layout. The <cfscript> block defines styling attributes: a background gradient (##10ba9d to white), a pie slice size (56%), and polar chart scaling properties (refAngle and aperture set to 180).

background = {"color" = "##10ba9d", "color-2" = "white"};

plot = {"slice" = "56%"}

scaleR = {"refAngle" = 180, "aperture" = 180}

</cfscript>

</cfchartseries>

</cfchart>

</cfchartseries>

</cfchart>

</cfchartset>

<cfscript> background = {"color" = "##10ba9d", "color-2" = "white"}; plot = {"slice" = "56%"} scaleR = {"refAngle" = 180, "aperture" = 180} </cfscript> <cfchartset format="html" layout="vertical" height="800" width="1000"> <cfchart format = "html" type = "pie" background="#background#" markersize="5"> <cfchartseries label="Temperatures(°C)- Monthly" seriescolor="white"> <cfchartdata item="Jan" value="5"> <cfchartdata item="Feb" value="70"> <cfchartdata item="Mar" value="10"> <cfchartdata item="Apr" value="40"> <cfchartdata item="May" value="18"> <cfchartdata item="Jun" value="22"> </cfchartseries> </cfchart> <cfchart format = "html" type = "bar" background="#background#"> <cfchartseries label="Temperature(°C) - Monthly" seriescolor="##3a5551"> <cfchartdata item="Jan" value="5"> <cfchartdata item="Feb" value="7"> <cfchartdata item="Mar" value="10"> <cfchartdata item="Apr" value="14"> <cfchartdata item="May" value="18"> <cfchartdata item="Jun" value="22"> </cfchartseries> </cfchart> </cfchartset>

<cfscript>
    background = {"color" = "##10ba9d", "color-2" = "white"};
    plot = {"slice" = "56%"}
    scaleR = {"refAngle" = 180, "aperture" = 180}
</cfscript>

<cfchartset format="html" layout="vertical" height="800" width="1000">
    <cfchart format = "html" type = "pie" background="#background#" markersize="5">
        <cfchartseries label="Temperatures(°C)- Monthly" seriescolor="white">
                <cfchartdata item="Jan" value="5">
                <cfchartdata item="Feb" value="70">
                <cfchartdata item="Mar" value="10">
                <cfchartdata item="Apr" value="40">
                <cfchartdata item="May" value="18">
                <cfchartdata item="Jun" value="22">
        </cfchartseries>
    </cfchart>

    <cfchart format = "html" type = "bar" background="#background#">
    <cfchartseries  label="Temperature(°C) - Monthly" seriescolor="##3a5551">
            <cfchartdata item="Jan" value="5">
            <cfchartdata item="Feb" value="7">
            <cfchartdata item="Mar" value="10">
            <cfchartdata item="Apr" value="14">
            <cfchartdata item="May" value="18">
            <cfchartdata item="Jun" value="22">
        </cfchartseries>
    </cfchart>
</cfchartset>

Output