CfChart Stacked bars and unstacked Lines

Question

I am trying to create a CFChart with Stacked Bars and unstacked Lines. Have been trying to work around in the Webcharts Tool but no luck so far.

In the example image all the series are seriesplacement=stacked, but I want to have the bars(Avg and TDD) as stacked and the lines (Max and Min) as seriesplacement=default. Is there a way to achieve the same in Cfchart?

Answer 1

If I am understanding correctly, just set the placement of the line series in your xml style:

<?xml version="1.0" encoding="UTF-8"?>
<frameChart>
    <elements place="Stacked" drawOutline="false">
        <series index="0" place="Default" shape="Line" />
        <series index="1" place="Default" shape="Line" />
  </elements>
</frameChart>

Then generate a "stacked" chart as usual:

<cfchart format="png" style="#yourCustomStyle#">
    <cfchartseries type="line" serieslabel="Min">
      ...
    </cfchartseries>
    <cfchartseries type="line" serieslabel="Max">
        ...
    </cfchartseries>
    <cfchartseries type="bar" serieslabel="Avg" >
        ...
    </cfchartseries>
    <cfchartseries type="bar" serieslabel="TDD">
        ... 
    </cfchartseries>
</cfchart>

Answer 2

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"
        }
    }
]
}