Customize a ColdFusion chart using cfchart

<cfchart format="html" chartheight="300" chartwidth="500">
    <cfchartseries type="bar">
        <cfchartdata item="Q1" value="100"/>
        <cfchartdata item="Q2" value="150"/>
        <cfchartdata item="Q3" value="200"/>
    </cfchartseries>
</cfchart>

<cfchart format="png" type="bar">
    <cfchartseries type="bar">
        <cfchartdata item="January" value="5000">
        <cfchartdata item="February" value="7000">
        <cfchartdata item="March" value="6000">
    </cfchartseries>
</cfchart>

<cfchart format="html" type="bar">
    <cfchartseries type="bar" seriesLabel="Product A">
        <cfchartdata item="Q1" value="2000">
        <cfchartdata item="Q2" value="3000">
    </cfchartseries>
    <cfchartseries type="bar" seriesLabel="Product B">
        <cfchartdata item="Q1" value="2500">
        <cfchartdata item="Q2" value="3500">
    </cfchartseries>
</cfchart>

<cfquery name="salesData" datasource="myDB">
    SELECT month, revenue FROM sales_table
</cfquery>

<cfchart format="html" type="line">
    <cfchartseries type="line">
        <cfloop query="salesData">
            <cfchartdata item="#month#" value="#revenue#">
        </cfloop>
    </cfchartseries>
</cfchart>

<cfscript>
    tooltipStyle = {
        "background-color" = "##000000",    // black background
        "border-color"     = "##ffffff",    // white border
        "border-width"     = 1,
        "font-color"       = "##ffffff",    // white text
        "font-size"        = 12,
        "padding"          = "6 10",
        "shadow"           = true
    };
</cfscript>

<cfchart 
    format  = "html"
    type    = "line"
    title   = "Monthly Sales"
    tooltip = "#tooltipStyle#">

    <cfchartseries type="line" seriesLabel="Sales (USD)">
        <cfchartdata item="Jan" value="12000" />
        <cfchartdata item="Feb" value="15000" />
        <cfchartdata item="Mar" value="18000" />
    </cfchartseries>

</cfchart>

<cfchart 
    format = "html"
    type   = "line"
    title  = "Actual vs Forecast Sales">

    <!--- Actual series with green tooltip --->
    <cfchartseries 
        type        = "line"
        seriesLabel = "Actual"
        tooltip     = "#actualTooltip#">
        <cfchartdata item="Q1" value="120000" />
        <cfchartdata item="Q2" value="135000" />
        <cfchartdata item="Q3" value="142000" />
        <cfchartdata item="Q4" value="155000" />
    </cfchartseries>

    <!--- Forecast series with blue tooltip --->
    <cfchartseries 
        type        = "line"
        seriesLabel = "Forecast"
        tooltip     = "#forecastTooltip#">
        <cfchartdata item="Q1" value="115000" />
        <cfchartdata item="Q2" value="140000" />
        <cfchartdata item="Q3" value="150000" />
        <cfchartdata item="Q4" value="160000" />
    </cfchartseries>

</cfchart>

<cfscript>
    detailedTooltip = {
        "background-color" = "##343a40",
        "font-color"       = "##ffffff",
        "padding"          = "6 10",
        "border-radius"    = 3,
        // Example text: "Sales / Jan: 12000"
        "text"             = "%t / %k: %v"
    };
</cfscript>

<cfchart 
    format  = "html"
    type    = "line"
    title   = "Monthly Sales (Detailed Tooltips)"
    tooltip = "#detailedTooltip#">

    <cfchartseries 
        type        = "line"
        seriesLabel = "Sales">

        <cfchartdata item="Jan" value="12000" />
        <cfchartdata item="Feb" value="15000" />
        <cfchartdata item="Mar" value="18000" />
    </cfchartseries>

</cfchart>

<cfscript>
    pieTooltip = {
        "background-color" = "##343a40",
        "font-color"       = "##ffffff",
        "border-radius"    = 4,
        "padding"          = "6 10",
        "shadow"           = true,
        "text"             = "%t: $%v"   // %t = slice label, %v = value
    };
</cfscript>

<cfchart 
    format  = "html"
    type    = "pie"
    title   = "Revenue by Channel"
    tooltip = "#pieTooltip#">

    <cfchartseries type="pie" seriesLabel="Channel">
        <cfchartdata item="Web"      value="500000" />
        <cfchartdata item="Retail"   value="350000" />
        <cfchartdata item="Partners" value="200000" />
        <cfchartdata item="Other"    value="75000"  />
    </cfchartseries>

</cfchart>

<cfscript>
    barTooltip = {
        "background-color" = "##212529",
        "font-color"       = "##f8f9fa",
        "border-radius"    = 3,
        "padding"          = "6 8",
        "shadow"           = true,
        "text"             = "%t: %v%%"  // e.g., “Open Rate: 35.1%”
    };
</cfscript>

<cfchart 
    format  = "html"
    type    = "bar"
    title   = "Email Open Rate by Campaign"
    tooltip = "#barTooltip#">

    <cfchartseries 
        type       = "bar"
        seriesLabel= "Open Rate"
        dataFormat = "decimal">

        <cfchartdata item="Welcome"       value="42.5" />
        <cfchartdata item="Promotion"     value="35.1" />
        <cfchartdata item="Re‑engagement" value="28.7" />
    </cfchartseries>

</cfchart>

<cfscript>
    bootstrapTooltip = {
        "background-color" = "##000000",
        "font-color"       = "##ffffff",
        "font-size"        = 12,
        "border-radius"    = 4,
        "padding"          = "4 8",
        "shadow"           = true
    };
</cfscript>

<cfchart 
    format  = "html"
    type    = "line"
    title   = "Daily Active Users"
    tooltip = "#bootstrapTooltip#">

    <cfchartseries type="line" seriesLabel="DAU">
        <cfchartdata item="Mon" value="1023" />
        <cfchartdata item="Tue" value="1150" />
        <cfchartdata item="Wed" value="1234" />
        <cfchartdata item="Thu" value="1198" />
        <cfchartdata item="Fri" value="1302" />
    </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>

<cfchart type="bar" title="Sample two-series Line chart" height=600 width=800 plotarea = "#{"margin"="dynamic"}#" showlegend="yes" show3d="no" format="html">
        <cfchartseries serieslabel="WBC" markerstyle="circle" color="red">
            <cfchartdata item="Day 1" value="19.2"/>
            <cfchartdata item="Day 2" value="15.2"/>
        </cfchartseries>
        <cfchartseries serieslabel="HCT" markerstyle="diamond" color="blue" >
            <cfchartdata item="Day 1" value="39.2"/>
            <cfchartdata item="Day 2" value="35.2"/>
        </cfchartseries>
</cfchart>

<cfchart type="bar" title="Sample two-series Line chart" height=50% width=50% plotarea = "#{"margin"="dynamic"}#" showlegend="yes" show3d="no" format="html">
        <cfchartseries serieslabel="WBC" markerstyle="circle" color="red">
            <cfchartdata item="Day 1" value="19.2"/>
            <cfchartdata item="Day 2" value="15.2"/>
        </cfchartseries>
        <cfchartseries serieslabel="HCT" markerstyle="diamond" color="blue" >
            <cfchartdata item="Day 1" value="39.2"/>
            <cfchartdata item="Day 2" value="35.2"/>
        </cfchartseries>
</cfchart>

<cfchart type="bar" title="Sample two-series Line chart" x=0 y=35% plotarea = "#{"margin"="dynamic"}#" showlegend="yes" show3d="no" format="html">
        <cfchartseries serieslabel="WBC" markerstyle="circle" color="red">
            <cfchartdata item="Day 1" value="19.2"/>
            <cfchartdata item="Day 2" value="15.2"/>
        </cfchartseries>
        <cfchartseries serieslabel="HCT" markerstyle="diamond" color="blue" >
            <cfchartdata item="Day 1" value="39.2"/>
            <cfchartdata item="Day 2" value="35.2"/>
        </cfchartseries>
</cfchart>

<cfquery name="empQuery" datasource="cfdocexamples">
    SELECT * FROM EMPLOYEE ORDER BY SALARY DESC
    FETCH FIRST 10 ROWS ONLY
</cfquery>

<cfscript>
    bevel={
        "blur-x"=5,
        "blur-y"=6,
        "angle"=45,
        "distance"=5
    }
    scaley={"min-value"="0","max-value"="15000"}
</cfscript>

<cfchart  format="html" type="hbar"  query="empQuery"  height="600" width="800" showLegend="FALSE"  xaxis="#scaley#" title="Employee salary" xaxistitle="Lastname" yaxistitle="Salary">
    <cfchartseries  itemcolumn="LASTNAME" valuecolumn="SALARY"  bevel="#bevel#" color="green"> 
</cfchart>

<cfscript>
    xAxis={"label"={"text":"Monthly temperature in Chartville","color"="##3a5551"}}
</cfscript>

<cfchartset format="html" layout="vertical" height="800" width="1000">
    <cfchart format = "html" type = "curve" markersize="5" xAxis="#xAxis#">
        <cfchartseries label="Temperatures(°C)- Monthly" seriescolor="white" color="##3a5551">
                <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" xAxis="#xAxis#">
    <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>