Create histograms in ColdFusion

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

A histogram is a graphical representation of a dataset's distribution. It's a bar chart that shows the frequency of data points within specified ranges (bins). Using the cfchart tag, you can create both vertical and horizontal histograms (type=hhist).

Create a histogram

In this example, we’ll create a histogram with some customization options.

The first customization to use is the plot object that defines the rules and the rule-based background color.

plot={"rules":[

{

"rule":"%v<=80",

"background-color":"yellow"

}

]};

plot={"rules":[ { "rule":"%v<=80", "background-color":"yellow" } ]};

plot={"rules":[ 
        { 
            "rule":"%v<=80", 
            "background-color":"yellow" 
        } 
]};

The "rule":"%v<=80" is a condition used within the rules attribute to apply different sets of attributes to parts of your chart that meet the prerequisites listed in your rules.

The %v token represents the value of the plot. So, the rule %v<=80 checks if the plot value is less than or equal to 80.

If this condition is met, the styling attributes you provide in that object will be applied. For example, you could change the color of a bar in a bar chart to yellow if its value is less than or equal to 80.

After you’ve applied the plot customization options, you can proceed to customizing the crosshair styling options. A crosshair is a graphical overlay of horizontal and/or vertical lines that intersect at the cursor's position. A crosshair enhances data visualization and user interaction by providing precise reference points on the chart.

crosshair={"line-color":"green","line-style":"solid","alpha"=0.5};

crosshair={"line-color":"green","line-style":"solid","alpha"=0.5};

In this example, the crosshair has a line color of green, a solid line type, and a transparency of 0.5.

To create a vertical histogram, specify either hist or histogram as type.

Tying it all up, here’s the full code to generate a histogram.

plot={

"rules":[

{ "rule":"%v<=80",

"background-color":"yellow"

}

]

}

crosshair={"line-color":"green","line-style":"solid","alpha"=0.5};

</cfscript>

<cfchart type="hist" format="html" chartWidth="600" chartHeight="400"

showborder="no" title="Website Traffic 2024 ('000s)"

tipbgcolor="##FF0045" showLegend="false" plot="#plot#"

crosshair="#crosshair#" >

</cfchartseries>

</cfchart>

<cfscript> plot={ "rules":[ { "rule":"%v<=80", "background-color":"yellow" } ] } crosshair={"line-color":"green","line-style":"solid","alpha"=0.5}; </cfscript> <cfchart type="hist" format="html" chartWidth="600" chartHeight="400" showborder="no" title="Website Traffic 2024 ('000s)" tipbgcolor="##FF0045" showLegend="false" plot="#plot#" crosshair="#crosshair#" > <cfchartseries serieslabel="Visits" color="gray"> <cfchartdata item="January" value="120"> <cfchartdata item="February" value="80"> <cfchartdata item="March" value="30"> <cfchartdata item="April" value="67"> <cfchartdata item="May" value="50"> <cfchartdata item="June" value="100"> </cfchartseries> </cfchart>

<cfscript> 
    plot={
        "rules":[ 
            { "rule":"%v<=80", 
              "background-color":"yellow" 
            } 
        ]
    }
    crosshair={"line-color":"green","line-style":"solid","alpha"=0.5}; 
</cfscript> 
<cfchart type="hist" format="html" chartWidth="600" chartHeight="400" 
    showborder="no" title="Website Traffic 2024 ('000s)" 
    tipbgcolor="##FF0045" showLegend="false" plot="#plot#" 
    crosshair="#crosshair#" > 
    <cfchartseries serieslabel="Visits" color="gray"> 
        <cfchartdata item="January" value="120"> 
        <cfchartdata item="February" value="80"> 
        <cfchartdata item="March" value="30"> 
        <cfchartdata item="April" value="67"> 
        <cfchartdata item="May" value="50"> 
        <cfchartdata item="June" value="100"> 
    </cfchartseries> 
</cfchart>

Output

Horizontal histogram

Like a histogram (vertical), you can also create a horizontal histogram. Creating a horizontal histogram is almost the same as that of a vertical.

To create a horizontal histogram, specify either hhist or hhistogram as type.

For example,

plot={"rules":[

{

"rule":"%v<=80",

"background-color":"yellow"

}

]};

crosshair={"line-color":"green","line-style":"solid","alpha"=0.5};

</cfscript>

<cfchart type="hhist" format="html" chartWidth="600" chartHeight="400"

showborder="no" title="Website Traffic 2024 ('000s)" tipbgcolor="##FF0045" showLegend="false" plot="#plot#" crosshair="#crosshair#" >

</cfchartseries>

</cfchart>

<cfscript> plot={"rules":[ { "rule":"%v<=80", "background-color":"yellow" } ]}; crosshair={"line-color":"green","line-style":"solid","alpha"=0.5}; </cfscript> <cfchart type="hhist" format="html" chartWidth="600" chartHeight="400" showborder="no" title="Website Traffic 2024 ('000s)" tipbgcolor="##FF0045" showLegend="false" plot="#plot#" crosshair="#crosshair#" > <cfchartseries serieslabel="Visits" color="gray"> <cfchartdata item="January" value="120"> <cfchartdata item="February" value="80"> <cfchartdata item="March" value="30"> <cfchartdata item="April" value="67"> <cfchartdata item="May" value="50"> <cfchartdata item="June" value="100"> </cfchartseries> </cfchart>

<cfscript> 
    plot={"rules":[ 
        { 
            "rule":"%v<=80", 
            "background-color":"yellow" 
        } 
    ]}; 
    crosshair={"line-color":"green","line-style":"solid","alpha"=0.5}; 
</cfscript> 

<cfchart type="hhist" format="html" chartWidth="600" chartHeight="400"  

showborder="no" title="Website Traffic 2024 ('000s)" tipbgcolor="##FF0045" showLegend="false" plot="#plot#" crosshair="#crosshair#" > 
     <cfchartseries serieslabel="Visits" color="gray"> 
        <cfchartdata item="January" value="120"> 
        <cfchartdata item="February" value="80"> 
        <cfchartdata item="March" value="30"> 
        <cfchartdata item="April" value="67"> 
        <cfchartdata item="May" value="50"> 
        <cfchartdata item="June" value="100"> 
    </cfchartseries> 
</cfchart>

Output

Get help faster and easier

New user?

Create histograms in ColdFusion

Create a histogram

Horizontal histogram

Get help faster and easier

Share this page

Ask the Community

Contact Us