Line on stacked bar graph in coldfusion

Question

I'm trying to add two vertical lines across this chart,

 <cfchartseries type="line" seriescolor="Red">
                                <cfloop index="ScoringPercent" array="#ScoringPercents[1]#" >  

                                    <cfchartdata item="#ScoringPercent#" value="74" >

                                </cfloop>
                            </cfchartseries>


                            <cfchartseries type="line" seriescolor="Yellow">
                                <cfloop index="ScoringPercent" array="#ScoringPercents[1]#" >  

                                    <cfchartdata item="#ScoringPercent#" value="53" >

                                </cfloop>
                            </cfchartseries

Bizarrely, it adds the lines above the chart

Why is this? Shouldn't the lines be across the 74 and 53 lines ?

score 1 · Accepted Answer · edited May 23 '17 at 11:44

As you are using stacked bar graph, every series you add will display above each other.

So, the red line series is above the bar chart 74 points above the 100 point mark (at 174 point mark on Y-axis). Similarly the yellow line series is above the red line 53 points above the red line (at 227 point mark on Y-axis).

Update

If you are on ColdFusion version 10 and above you can do it like this. From ColdFusion version 10, ColdFusion uses ZingCharts that allow more customization via JSON style file. Note: This is a sample code you need to replace it with yours.

<cfset arr1 = [10,20,30,40,50] />
<cfset arr2 = [20,10,60,70,30] />
<cfset arr3 = [90,50,40,10,80] />

<cfchart chartwidth="1000" chartheight="750" format="html" style="LineStackedBar.json">

    <cfchartseries type="Bar" seriescolor="Green">

        <cfloop index="ScoringPercent2" array="#arr1#" > 

            <cfchartdata item="#ScoringPercent2#" value="#ScoringPercent2#">

         </cfloop>

     </cfchartseries>

    <cfchartseries type="Bar" seriescolor="Yellow">

        <cfloop index="ScoringPercent2" array="#arr2#" > 

            <cfchartdata item="#ScoringPercent2#" value="#ScoringPercent2#">

         </cfloop>

     </cfchartseries>

    <cfchartseries type="Bar" seriescolor="Red">

        <cfloop index="ScoringPercent2" array="#arr3#" > 

            <cfchartdata item="#ScoringPercent2#" value="#ScoringPercent2#">

         </cfloop>

     </cfchartseries>

     <cfchartseries type="line" seriescolor="Red">
        <cfloop index="ScoringPercent2" array="#arr3#" >  

            <cfchartdata item="#ScoringPercent2#" value="74" >

        </cfloop>
    </cfchartseries>


    <cfchartseries type="line" seriescolor="Yellow">
        <cfloop index="ScoringPercent2" array="#arr2#" >  

            <cfchartdata item="#ScoringPercent2#" value="53" >

        </cfloop>
    </cfchartseries>

</cfchart>

LineStackedBar.json

{
"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
                },  
                "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",   
                "stacked":"false"
            },
            {
                "hover-state":{ 
                    "visible":false
                },  
                "line-color":"#143F59",
                "border-color":"#143F59",
                "line-width":3,
                "type":"line",   
                "stacked":"false"
            }
        ],
        "plotarea":{
            "margin-top":80,
            "margin-left":70,
            "margin-right":30
        },
        "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"
        }
    }
]
}

It generates the following output:

Refer to @Mike's answer CfChart Stacked bars and unstacked Lines

@PatrickSchomburg I don't think it is possible but this link may be helpful for what you are trying to accomplish http://stackoverflow.com/questions/25130890/cfchart-stacked-bars-and-unstacked-lines — Pankaj, Jun 29 '16 at 14:34

Line on stacked bar graph in coldfusion

1 Answers1