1
votes

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. ExampleStacked Chart

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?

2
Can you pls include some code of what you've already tried.Adam Cameron
I dunno if you can do this "natively" in CF, but you could simply stack all the series, but alter the dta in the second line series to be offset by the value of the first series, which would cancel out the stacking. This is a slightly jerry-built approach, but should workAdam Cameron
The question is not clear. Specifically, I don't understand the phrase, "the lines (Max and Min) as default".Dan Bracuk
@DanBracuk: where "default" is unstacked (ie: the default for seriesplacement), as opposed to stacked as was stated in the preceding clause.Adam Cameron

2 Answers

3
votes

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>
2
votes

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