CFChart is based on ZingCharts which is formatted using JSON. They have some good docs and a builder to develop with. I haven't figured out how to get the left y-scale to adjust to MIN value, MAX seems to be automatic. Below I put together some sample data and code (.cfm & .json) for you to get started with.
Some starter data and the CFChart info (Lines-StackedBars.cfm)
<cfscript>
GraphData = queryNew("");
queryAddColumn(GraphData, "dates", "Integer", ['1/1/11','1/2/11','1/3/11','1/4/11','1/5/11']);
queryAddColumn(GraphData, "MIN", "Integer", [42,37,45,29,61]);
queryAddColumn(GraphData, "MAX", "Integer", [110,98,82,103,94]);
queryAddColumn(GraphData, "AVG", "Integer", [80,75,80,65,85]);
queryAddColumn(GraphData, "TDD", "Integer", [23,33,32,28,26]);
</cfscript>
<cfchart chartwidth="800"
chartheight="500"
format="html"
style="LineStackedBar.json"
title="Unstacked Lines w/ Stacked Bars">
<cfchartseries query="GraphData"
type="Bar"
itemcolumn="dates"
valuecolumn="AVG"
color="blue"
serieslabel="AVG">
<cfchartseries query="GraphData"
type="Bar"
itemcolumn="dates"
valuecolumn="TDD"
color="green"
serieslabel="TDD">
<cfchartseries query="GraphData"
type="Line"
itemcolumn="dates"
valuecolumn="MIN"
color="red"
serieslabel="MIN">
<cfchartseries query="GraphData"
type="Line"
itemcolumn="dates"
valuecolumn="MAX"
color="orange"
serieslabel="MAX">
</cfchart>
The code above uses LineStackedBar.json to handle the formatting
{
"graphset":[
{
"legend":{
"position":"30%, 0%",
"border-color":"#CCCCCC",
"background-color":"#FFFFFF",
"margin-top":40,
"layout":"x4",
"shadow":false,
"alpha":1
},
"border-color":"#cccccc",
"tooltip":{
"font-size":11,
"font-color":"#FFFFFF",
"bold":true,
"font-family":"Helvetica",
"padding":5
},
"series":[
{
"hover-state":{
"visible":false
},
"shadow-blur-y":1,
"shadow-color":"#cccccc",
"shadow-alpha":1,
"shadow":true,
"background-color-2":"#FFCF8C",
"background-color":"#735328",
"type":"bar",
"stacked":"true",
"shadow-distance":2,
"shadow-blur-x":2
},
{
"hover-state":{
"visible":false
},
"shadow-blur-y":1,
"shadow-color":"#cccccc",
"shadow-alpha":1,
"shadow":true,
"background-color-2":"#FEFFD1",
"background-color":"#9D9C5D",
"type":"bar",
"stacked":"true",
"shadow-distance":2,
"shadow-blur-x":2
},
{
"hover-state":{
"visible":false
},
"line-color":"#699EBF",
"border-color":"#699EBF",
"line-width":3,
"type":"line",
"scales":"scale-x,scale-y-2",
"stacked":"false"
},
{
"hover-state":{
"visible":false
},
"line-color":"#143F59",
"border-color":"#143F59",
"line-width":3,
"type":"line",
"scales":"scale-x,scale-y-2",
"stacked":"false"
}
],
"scale-y":{
"tick":{
"line-gap-size":0,
"line-color":"#cccccc",
"line-width":1,
"size":10
},
"font-size":16,
"line-color":"#cccccc",
"bold":true,
"format":"%v",
"item":{
"font-size":11,
"font-family":"Helvetica",
"color":"#333333"
},
"label":{
"color":"#333333"
},
"line-width":2,
"font-family":"Helvetica",
"color":"#333333"
},
"scale-y-2":{
"tick":{
"line-gap-size":0,
"line-color":"#cccccc",
"line-width":1,
"size":10
},
"font-size":16,
"line-color":"#cccccc",
"bold":true,
"format":"%v",
"item":{
"font-size":11,
"font-family":"Helvetica",
"color":"#333333"
},
"label":{
"color":"#333333"
},
"line-width":2,
"font-family":"Helvetica",
"color":"#333333"
},
"plotarea":{
"margin-top":80,
"margin-left":70,
"margin-right":30
},
"scale-x":{
"tick":{
"line-gap-size":0,
"line-color":"#cccccc",
"line-width":1,
"size":10
},
"font-size":16,
"line-color":"#cccccc",
"bold":true,
"item":{
"font-size":11,
"font-family":"Helvetica",
"color":"#333333"
},
"guide":{
"line-width":0
},
"label":{
"color":"#333333"
},
"line-width":2,
"font-family":"Helvetica",
"color":"#333333"
},
"3d-aspect":{
"true3d":false
},
"background-color":"white",
"border-width":1,
"plot":{
"hover-marker":{
"background-color":"#888888",
"size":3
},
"marker":{
"background-color":"#cccccc",
"size":3
},
"preview":true,
"tooltip-text":"%v"
},
"type":"mixed",
"title":{
"border-width":1,
"border-color":"#cccccc",
"background-color":"white",
"font-size":18,
"bold":true,
"font-family":"Helvetica",
"color":"#333333"
}
}
]
}
unstacked
(ie: the default forseriesplacement
), as opposed tostacked
as was stated in the preceding clause. – Adam Cameron