cfchart

<!--- This syntax uses a JSON file to specify the chart style. --->
<cfchart 
    format="html" 
    style = "JSON filename"> 
</cfchart>

<!--- This syntax uses the attributes of the cfchart tag to specify the chart style. --->  
<cfchart  
alpha = "value between 0 and 1"  
arrows = "JSON string representation"  
aspect3D = "JSON string representation"  
background = "JSON string representation"  
base64="true | false" 
bevel = "JSON string representation"  
border = "JSON string representation"  
backgroundColor = "hexadecimal value|web color"  
chartHeight = "integer number of pixels"  
chartWidth = "integer number of pixels"  
crosshair = "JSON string representation"  
dataBackgroundColor = "hexadecimal value|web color"  
fill = "JSON string representation"  
font = "font name"  
fontBold = "yes|no"  
fontItalic = "yes|no"  
fontSize = "font size"  
foregroundColor = "hexadecimal value|web color"  
format = "jpg|png|html"  
gridlines = "integer number of lines"  
height = "height in pixels" 
width = "width in pixels" 
ID = "chart identifier"  
labels = "JSON string representation"  
legend = "JSON string representation"  
labelFormat = "number|currency|percent|date"  
marker = "JSON string representation"  
markerSize = "integer number of pixels"  
name = "string"  
pieSliceStyle = "solid|sliced"  
plot = "JSON string representation"  
plotarea = "JSON string representation"  
preview = "JSON string representation"  
refresh = "canvas|flash|svg|vml"  
renderer = "canvas|flash|svg|vml"  
scales = "comma-seperated list of axes"  
scaleFrom = "integer minimum value"  
scaleTo = "integer maximum value"  
seriesPlacement = "default|cluster| stacked|percent"  
show3D = "yes|no"  
showBorder = "yes|no"  
showLegend = "yes|no"  
showMarkers = "yes|no"  
showXGridlines = "yes|no"  
showYGridlines = "yes|no"  
sortXAxis = "yes|no"  
tipBGColor = "hexadecimal value|web color"  
title = "title of chart"  
tooltip = "JSON string representation"  
url = "onClick destination page"  
xAxis = "JSON string representation"  
xAxis2 = "JSON string representation"  
xAxisTitle = "title text"  
xAxisType = "scale|category"  
xAxisValues = "Array of values"  
xOffset = "number between -1 and 1"  
yAxis = "JSON string representation"  
yAxis2 = "JSON string representation"  
yAxisTitle = "title text"  
yAxisType = "scale|category"  
yAxisValues = "Array of values"  
yOffset = "number between -1 and 1" 
zoom = "JSON string representation"  
</cfchart>

<cfchart format="html" type="bar" showlegend="false" chartHeight="600" chartWidth="400" title="Basic Chart">
    <cfchartseries>
        <cfchartdata item="2015" value=20>
        <cfchartdata item="2016" value=40>
        <cfchartdata item="2017" value=60>
    </cfchartseries>
</cfchart>

<cfchart format="html" type="bar" showlegend="false" chartHeight="400" chartWidth="600" title="Basic Chart" show3d="true">
    <cfchartseries>
        <cfchartdata item="2015" value=20>
        <cfchartdata item="2016" value=40>
        <cfchartdata item="2017" value=60>
    </cfchartseries>
</cfchart>

{
 "graphset" : [
  {
   "type" : "bar",
   "title" : {
    "font-size" : 18,
    "color" : "#FF0000",
    "bold" : true,
    "font-family" : "Verdana",
    "background-color" : "#cccccc",
    "border-color" : "#cccccc",
    "border-width" : 1
   }
  }
 ]
}

<cfchart format="html" type="bar" showlegend="false" chartHeight="400" chartWidth="600"
style="my_custom_style.json" title="Sales report">
    <cfchartseries>
        <cfchartdata item="2012" value=#randrange(10,100)#>
        <cfchartdata item="2013" value=#randrange(10,100)#>
        <cfchartdata item="2014" value=#randrange(10,100)#>
        <cfchartdata item="2015" value=#randrange(10,100)#>
        <cfchartdata item="2016" value=#randrange(10,100)#>
        <cfchartdata item="2017" value=#randrange(10,100)#>
    </cfchartseries>
</cfchart>

<cfchart format="html" chartHeight="400" chartWidth="600" showLegend="no" title="Two-series chart">
    <cfchartseries type="bar" serieslabel="WBC" markerstyle="circle" color="red">
        <cfchartdata item="Day 1" value="19.2"/>
        <cfchartdata item="Day 2" value="15.2"/>
        <cfchartdata item="Day 3" value="15.1"/>
        <cfchartdata item="Day 4" value="12.6"/>
        <cfchartdata item="Day 5" value="14.2"/>
    </cfchartseries>
    <cfchartseries type="bar" serieslabel="HCT" markerstyle="diamond" color="blue" >
        <cfchartdata item="Day 1" value="39.2"/>
        <cfchartdata item="Day 2" value="35.2"/>
        <cfchartdata item="Day 3" value="35.1"/>
        <cfchartdata item="Day 4" value="32.6"/>
        <cfchartdata item="Day 5" value="34.2"/>
    </cfchartseries>
</cfchart>

<cfchart format="html" chartHeight="400" chartWidth="600" showLegend="no" title="Line chart">
<cfchartseries type="line" serieslabel="WBC" markerstyle="circle" color="red">
<cfchartdata item="Day 1" value="19.2"/>
<cfchartdata item="Day 2" value="15.2"/>
<cfchartdata item="Day 3" value="15.1"/>
<cfchartdata item="Day 4" value="12.6"/>
<cfchartdata item="Day 5" value="14.2"/>
</cfchartseries>
</cfchart>

<cfchart format="html" chartHeight="400" chartWidth="600" showLegend="no" title="Two-series Line chart">
    <cfchartseries type="line" serieslabel="WBC" markerstyle="circle" color="red">
        <cfchartdata item="Day 1" value="19.2"/>
        <cfchartdata item="Day 2" value="15.2"/>
        <cfchartdata item="Day 3" value="15.1"/>
        <cfchartdata item="Day 4" value="12.6"/>
        <cfchartdata item="Day 5" value="14.2"/>
    </cfchartseries>
    <cfchartseries type="line" serieslabel="HCT" markerstyle="diamond" color="blue" >
        <cfchartdata item="Day 1" value="39.2"/>
        <cfchartdata item="Day 2" value="35.2"/>
        <cfchartdata item="Day 3" value="35.1"/>
        <cfchartdata item="Day 4" value="32.6"/>
        <cfchartdata item="Day 5" value="34.2"/>
    </cfchartseries>
</cfchart>

<cfchart format="png" chartWidth="600" chartHeight="400" pieSliceStyle="sliced">
    <cfchartseries type="pie" serieslabel="Website Traffic 2016">
        <cfchartdata item="January" value="#randRange(500000,1000000)#">
        <cfchartdata item="February" value="#randRange(500000,1000000)#">
        <cfchartdata item="March" value="#randRange(500000,1000000)#">
        <cfchartdata item="April" value="#randRange(500000,1000000)#">
        <cfchartdata item="May" value="#randRange(500000,1000000)#">
        <cfchartdata item="June" value="#randRange(500000,1000000)#">
    </cfchartseries>
</cfchart>

<cfquery name="qEmployee" datasource="cfdocexamples" maxRows="6">
    SELECT FirstName, LastName, Salary FROM EMPLOYEE
</cfquery>
<cfchart format="html" pieslicestyle="solid" chartWidth="600" chartHeight="400">
    <cfchartseries query="qEmployee" type="pie" serieslabel="Salary Details 2016" valuecolumn="Salary" itemcolumn="FirstName">
    </cfchartseries>
</cfchart>

<!--- refresh.cfm --->

<cfchart format="html" refresh="#{"type"="full","interval":"2","url":"feed.cfm"}#" chartWidth="800" chartHeight="600"/>

<!--- feed.cfm --->

<cfscript>
       values1=values2=values3=[];
       for (i=1;i<=5;i++){
             values1[i]=randRange(20,40);
       }
       for (i=1;i<=5;i++){
             values2[i]=randRange(40,60);
       }
       for (i=1;i<=5;i++){
             values3[i]=randRange(60,80);
       }
</cfscript>
{
  "graphset" : [
  {
    "type" : "bar",
    "refresh" : {
        "type" : "full",
        "interval" : 2
    },
       "title" : {
             "text" : "Full Refresh Chart"
       },
    "series" : [
     {
        "values" : <cfoutput>#serializeJSON(values1)#</cfoutput>
     },
     {
        "values" : <cfoutput>#serializeJSON(values2)#</cfoutput>
     },
     {
        "values" : <cfoutput>#serializeJSON(values3)#</cfoutput>
     }] 
  }]
}

<cfscript>
       arrows=[{"backgroundColor":"red","label":{"text":"Data for 2017","bold":true,"backgroundColor":"white"},
       "size":6,"from":{"x":200,"y":100},"to":{"x":400,"y":200}}];
</cfscript>
<cfchart format="html" type="bar" showlegend="false" chartHeight="400" chartWidth="600" title="Chart with arrow" show3d="true"
arrows="#arrows#">
       <cfchartseries >
             <cfchartdata item="2015" value=20>
             <cfchartdata item="2016" value=40>
             <cfchartdata item="2017" value=60>
       </cfchartseries>
</cfchart>

<cfscript>
       aspect3d={"angle":90,"depth":100,"true3d":false};
</cfscript>
<cfchart format="html" chartHeight="400" chartWidth="600" showLegend="no" title="Two-series chart" aspect3d="#aspect3d#"
show3d="true">
       <cfchartseries type="bar" serieslabel="WBC" markerstyle="circle" color="red">
             <cfchartdata item="Day 1" value="19.2"/>
             <cfchartdata item="Day 2" value="15.2"/>
             <cfchartdata item="Day 3" value="15.1"/>
             <cfchartdata item="Day 4" value="12.6"/>
             <cfchartdata item="Day 5" value="14.2"/>
       </cfchartseries>
       <cfchartseries type="bar" serieslabel="HCT" markerstyle="diamond" color="blue" >
             <cfchartdata item="Day 1" value="39.2"/>
             <cfchartdata item="Day 2" value="35.2"/>
             <cfchartdata item="Day 3" value="35.1"/>
             <cfchartdata item="Day 4" value="32.6"/>
             <cfchartdata item="Day 5" value="34.2"/>
       </cfchartseries>
</cfchart>

<cfscript>
       aspect3d={"angle":90,"depth":100,"true3d":true};
</cfscript>
<cfchart format="html" chartHeight="400" chartWidth="600" showLegend="no" title="Two-series chart" aspect3d="#aspect3d#"
show3d="true">
       <cfchartseries type="bar" serieslabel="WBC" markerstyle="circle" color="red">
             <cfchartdata item="Day 1" value="19.2"/>
             <cfchartdata item="Day 2" value="15.2"/>
             <cfchartdata item="Day 3" value="15.1"/>
             <cfchartdata item="Day 4" value="12.6"/>
             <cfchartdata item="Day 5" value="14.2"/>
       </cfchartseries>
       <cfchartseries type="bar" serieslabel="HCT" markerstyle="diamond" color="blue" >
             <cfchartdata item="Day 1" value="39.2"/>
             <cfchartdata item="Day 2" value="35.2"/>
             <cfchartdata item="Day 3" value="35.1"/>
             <cfchartdata item="Day 4" value="32.6"/>
             <cfchartdata item="Day 5" value="34.2"/>
       </cfchartseries>
</cfchart>

<cfscript>
       background={};
       background={"color":"red","color-2":"green"};
</cfscript>

<cfchart
   format="html"
   scalefrom="0"
   scaleto="1200000"
   showlegend="true"
   chartheight="400"
   chartwidth="600"
   background="#background#" >
  <cfchartseries
      type="bar"
      serieslabel="Website Traffic 2016"
      seriescolor="blue">
    <cfchartdata item="January" value="503100">
    <cfchartdata item="February" value="720310">
    <cfchartdata item="March" value="688700">
    <cfchartdata item="April" value="986500">
    <cfchartdata item="May" value="1063911">
    <cfchartdata item="June" value="1115321">
   </cfchartseries>
  
  <cfchartseries
      type="bar"
      serieslabel="Website Traffic 2015"
      seriescolor="yellow">
    <cfchartdata item="January" value="#RandRange(300000, 900000)#">
    <cfchartdata item="February" value="#RandRange(300000, 900000)#">
    <cfchartdata item="March" value="#RandRange(300000, 900000)#">
    <cfchartdata item="April" value="#RandRange(300000, 900000)#">
    <cfchartdata item="May" value="#RandRange(300000, 900000)#">
    <cfchartdata item="June" value="#RandRange(300000, 900000)#">
  </cfchartseries>
</cfchart>

<cfscript>
       border={"color":"blue","radius":6,"width":2};
</cfscript>
<cfchart format="html" type="bar" showlegend="false" chartHeight="400" chartWidth="600" border="#border#">
       <cfchartseries >
             <cfchartdata item="2015" value=20>
             <cfchartdata item="2016" value=40>
             <cfchartdata item="2017" value=60>
       </cfchartseries>
</cfchart>

<cfscript>
       crosshair={"line-color":"green","line-style":"dashed","alpha"=1};
</cfscript>
<cfchart format="html" chartHeight="400" chartWidth="600" showLegend="no" title="Two-series chart" crosshair="#crosshair#">
       <cfchartseries type="bar" serieslabel="WBC" markerstyle="circle" color="red">
             <cfchartdata item="Day 1" value="19.2"/>
             <cfchartdata item="Day 2" value="15.2"/>
             <cfchartdata item="Day 3" value="15.1"/>
             <cfchartdata item="Day 4" value="12.6"/>
             <cfchartdata item="Day 5" value="14.2"/>
       </cfchartseries>
       <cfchartseries type="bar" serieslabel="HCT" markerstyle="diamond" color="blue" >
             <cfchartdata item="Day 1" value="39.2"/>
             <cfchartdata item="Day 2" value="35.2"/>
             <cfchartdata item="Day 3" value="35.1"/>
             <cfchartdata item="Day 4" value="32.6"/>
             <cfchartdata item="Day 5" value="34.2"/>
       </cfchartseries>
</cfchart>

<cfscript>
       fill={"angle":45,"background-color-1":"gray","background-color-2":"yellow"};
</cfscript>
<cfchart format="html" chartHeight="400" chartWidth="600" showLegend="no" title="Two-series chart" fill="#fill#">
       <cfchartseries type="bar" serieslabel="WBC" markerstyle="circle" color="red">
             <cfchartdata item="Day 1" value="19.2"/>
             <cfchartdata item="Day 2" value="15.2"/>
             <cfchartdata item="Day 3" value="15.1"/>
             <cfchartdata item="Day 4" value="12.6"/>
             <cfchartdata item="Day 5" value="14.2"/>
       </cfchartseries>
       <cfchartseries type="bar" serieslabel="HCT" markerstyle="diamond" color="blue" >
             <cfchartdata item="Day 1" value="39.2"/>
             <cfchartdata item="Day 2" value="35.2"/>
             <cfchartdata item="Day 3" value="35.1"/>
             <cfchartdata item="Day 4" value="32.6"/>
             <cfchartdata item="Day 5" value="34.2"/>
       </cfchartseries>
</cfchart>

<cfscript>
       labels=[{"text":"Sample comparison line chart","font-family":"Verdana","font-size":18}];
</cfscript>
<cfchart format="html" chartHeight="400" chartWidth="600" showLegend="no" labels="#labels#">
       <cfchartseries type="line" serieslabel="WBC" markerstyle="circle" color="red">
             <cfchartdata item="Day 1" value="19.2"/>
             <cfchartdata item="Day 2" value="15.2"/>
             <cfchartdata item="Day 3" value="15.1"/>
             <cfchartdata item="Day 4" value="12.6"/>
             <cfchartdata item="Day 5" value="14.2"/>
       </cfchartseries>
       <cfchartseries type="line" serieslabel="HCT" markerstyle="diamond" color="blue" >
             <cfchartdata item="Day 1" value="39.2"/>
             <cfchartdata item="Day 2" value="35.2"/>
             <cfchartdata item="Day 3" value="35.1"/>
             <cfchartdata item="Day 4" value="32.6"/>
             <cfchartdata item="Day 5" value="34.2"/>
       </cfchartseries>
</cfchart>

<cfscript>
       legend={"background-color":"lightgray"};
</cfscript>
<cfchart format="html" title="Graph" chartHeight="400" chartWidth="600" showLegend="yes" legend="#legend#">
       <cfchartseries type="line" serieslabel="WBC" markerstyle="circle" color="red">
             <cfchartdata item="Day 1" value="19.2"/>
             <cfchartdata item="Day 2" value="15.2"/>
             <cfchartdata item="Day 3" value="15.1"/>
             <cfchartdata item="Day 4" value="12.6"/>
             <cfchartdata item="Day 5" value="14.2"/>
       </cfchartseries>
       <cfchartseries type="line" serieslabel="HCT" markerstyle="diamond" color="blue" >
             <cfchartdata item="Day 1" value="39.2"/>
             <cfchartdata item="Day 2" value="35.2"/>
             <cfchartdata item="Day 3" value="35.1"/>
             <cfchartdata item="Day 4" value="32.6"/>
             <cfchartdata item="Day 5" value="34.2"/>
       </cfchartseries>
</cfchart>

<cfscript>
       plot={"rules":[           
             {
             "rule":"%v<700000",
             "background-color":"green" // set a rule that all values less than 700000
             },                            // are shown as green colored bars in the graph
             {
             "rule":"%v>700000",   // set a rule that all values more than 700000
             "background-color":"red"   // are shown as green colored bars in the graph
             }
       ]};
</cfscript>

<cfchart
   format="html"
   scalefrom="0"
   scaleto="1200000"
   showlegend="false"
   chartheight="400"
   chartwidth="600"
   plot="#plot#" 
   title="Website Traffic 2016">
  <cfchartseries type="bar">
    <cfchartdata item="January" value="503100">
    <cfchartdata item="February" value="620310">
    <cfchartdata item="March" value="688700">
    <cfchartdata item="April" value="986500">
    <cfchartdata item="May" value="1063911">
    <cfchartdata item="June" value="1115321">
   </cfchartseries>
</cfchart>

<cfscript>
       n=200;
       preview={"visible":true,"live":true,"preserve-zoom":true,"border-width":"3"}; //preview struct
       
       myarray=[];
       for (i=1;i<=n;i++){
             myarray[i]=randrange(1,n);
       }
       strengtharray=[];
       for (i=1;i<=n;i++){
             strengtharray[i]=randrange(15,25);
       }
       myquery=QueryNew("points,data,strength","integer,integer,integer");
       for (i=1;i<=arraylen(myarray);i++){
             queryAddRow(myquery);
             querySetCell(myquery,"points",myarray[i]);
             querySetCell(myquery,"data",i);
             querySetCell(myquery,"strength",strengtharray[i]);
       }
       
       cfchart(format = "html", title = "Report", scalefrom="1", scaleto="#n#",chartheight="400",chartwidth="600",
       preview="#preview#") {
             cfchartseries(query="myquery",type="line" ,valuecolumn="points" ,itemcolumn="data" ,
             zcolumn="strength");
       }
</cfscript>

<cfchart format="html" title="Graph" chartHeight="400" chartWidth="600" showLegend="yes" seriesPlacement="stacked">
       <cfchartseries type="bar" serieslabel="WBC" markerstyle="circle" color="red">
             <cfchartdata item="Day 1" value="19.2"/>
             <cfchartdata item="Day 2" value="15.2"/>
             <cfchartdata item="Day 3" value="15.1"/>
             <cfchartdata item="Day 4" value="12.6"/>
             <cfchartdata item="Day 5" value="14.2"/>
       </cfchartseries>
       <cfchartseries type="bar" serieslabel="HCT" markerstyle="diamond" color="blue" >
             <cfchartdata item="Day 1" value="39.2"/>
             <cfchartdata item="Day 2" value="35.2"/>
             <cfchartdata item="Day 3" value="35.1"/>
             <cfchartdata item="Day 4" value="32.6"/>
             <cfchartdata item="Day 5" value="34.2"/>
       </cfchartseries>
</cfchart>

<cfchart format="html" chartHeight="400" chartWidth="600" showLegend="no" title="Two-series Line chart" scales="x,y">
       <cfchartseries type="line" serieslabel="WBC" markerstyle="circle" color="red" scales="x2,y2">
             <cfchartdata item="Day 1" value="19.2"/>
             <cfchartdata item="Day 2" value="15.2"/>
             <cfchartdata item="Day 3" value="15.1"/>
             <cfchartdata item="Day 4" value="12.6"/>
             <cfchartdata item="Day 5" value="14.2"/>
       </cfchartseries>
       <cfchartseries type="line" serieslabel="HCT" markerstyle="diamond" color="blue" >
             <cfchartdata item="Day 1" value="39.2"/>
             <cfchartdata item="Day 2" value="35.2"/>
             <cfchartdata item="Day 3" value="35.1"/>
             <cfchartdata item="Day 4" value="32.6"/>
             <cfchartdata item="Day 5" value="34.2"/>
       </cfchartseries>
</cfchart>

<cfchart format="html" chartHeight="400" chartWidth="600" showLegend="no" title="Two-series Line chart" scales="x,y">
       <cfchartseries type="line" serieslabel="WBC" markerstyle="circle" color="red">
             <cfchartdata item="Day 1" value="19.2"/>
             <cfchartdata item="Day 2" value="15.2"/>
             <cfchartdata item="Day 3" value="15.1"/>
             <cfchartdata item="Day 4" value="12.6"/>
             <cfchartdata item="Day 5" value="14.2"/>
       </cfchartseries>
       <cfchartseries type="line" serieslabel="HCT" markerstyle="diamond" color="blue" scales="x2,y2">
             <cfchartdata item="Day 1" value="39.2"/>
             <cfchartdata item="Day 2" value="35.2"/>
             <cfchartdata item="Day 3" value="35.1"/>
             <cfchartdata item="Day 4" value="32.6"/>
             <cfchartdata item="Day 5" value="34.2"/>
       </cfchartseries>
</cfchart>

<cfscript>
       n=200;
       preview={"visible":true,"live":true,"preserve-zoom":true,"border-width":"0"}; //preview struct
       xAxis={"label":{"text":"Drag the handles to zoom in to the chart","color":"red"},"zooming":true};
       myarray=[];
       for (i=1;i<=n;i++){
             myarray[i]=randrange(1,n);
       }
       strengtharray=[];
       for (i=1;i<=n;i++){
             strengtharray[i]=randrange(15,25);
       }
       myquery=QueryNew("points,data,strength","integer,integer,integer");
       for (i=1;i<=arraylen(myarray);i++){
             queryAddRow(myquery);
             querySetCell(myquery,"points",myarray[i]);
             querySetCell(myquery,"data",i);
             querySetCell(myquery,"strength",strengtharray[i]);
       }
       
       cfchart(format = "html", title = "Report", scalefrom="1", scaleto="#n#",chartheight="600",chartwidth="800",
       preview="#preview#",xaxis="#xaxis#") {
             cfchartseries(query="myquery",type="line" ,valuecolumn="points" ,itemcolumn="data" ,
             zcolumn="strength");
       }
</cfscript>

<cfscript>
       n=200;
       preview={"visible":true,"live":true,"preserve-zoom":true,"border-width":"0"}; //preview struct
       xAxis={"label":{"text":"Drag the handles to zoom in to the chart","color":"red"},"zooming":true};
       zoom={"alpha":"0.3","border-color":"black","border-width":4,"background-color":"gray","label":{"border-color":"red","border-width":2,"font-size":10}};
       myarray=[];
       for (i=1;i<=n;i++){
             myarray[i]=randrange(1,n);
       }
       strengtharray=[];
       for (i=1;i<=n;i++){
             strengtharray[i]=randrange(15,25);
       }
       myquery=QueryNew("points,data,strength","integer,integer,integer");
       for (i=1;i<=arraylen(myarray);i++){
             queryAddRow(myquery);
             querySetCell(myquery,"points",myarray[i]);
             querySetCell(myquery,"data",i);
             querySetCell(myquery,"strength",strengtharray[i]);
       }
       
       cfchart(format = "html", title = "Report", scalefrom="1", scaleto="#n#",chartheight="600",chartwidth="800",
       preview="#preview#",xaxis="#xaxis#",zoom="#zoom#") {
             cfchartseries(query="myquery",type="line" ,valuecolumn="points" ,itemcolumn="data" ,
             zcolumn="strength");
       }
</cfscript>