Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
655
How to implement a stacked column chart (see the attached image)?
posted

Hello,

How can I implement the stacked column chart? See the attachment.

 

Thanks

Parents
  • 30692
    Suggested Answer
    Offline posted

    Stacked column charts are a future feature of the igDataChart. If you submit a feature request it will help to make sure that the feature is prioritized correctly.
    In the interim, you can emulate a stack column chart by summing the data yourself and using the overlap property of the x axis as in this example:

    <script>
            $(function () {
                var data = [{
                    category: 'shoes',
                    bob: 5,
                    david: 6,
                    jen: 10
                }, {
                    category: 'hats',
                    bob: 15,
                    david: 8,
                    jen: 11
                }, {
                    category: 'coats',
                    bob: 7,
                    david: 6,
                    jen: 9
                }, {
                    category: 'slippers',
                    bob: 7,
                    david: 2,
                    jen: 12
                }], stackData;
    
                stackData = function (data, order) {
                    var i, j, accum;
    
                    for (i = 0; i < data.length; i++) {
                        accum = 0;
                        for (j = 0; j < order.length; j++) {
                            accum += data[i][order[j]];
    
                            if (j > 0) {
                                data[i][order[j] + "_sum"] = accum;
                            }
                        }
                    }
                }
    
                console.log(data[0]);
                stackData(data, ["bob", "david", "jen"]);
    
                $("#container").igDataChart({
                    width: "500px",
                    height: "500px",
                    dataSource: data,
                    axes: [{
                        name: "xAxis",
                        type: "categoryX",
                        label: "category",
                        overlap: 1
                    },
                    {
                        name: "yAxis",
                        type: "numericY",
                        minimumValue: 0
                    }],
                    series: [{
                        name: "jen",
                        title: "jen",
                        type: "column",
                        xAxis: "xAxis",
                        yAxis: "yAxis",
                        valueMemberPath: "jen_sum"
                    }, {
                        name: "david",
                        title: "david",
                        type: "column",
                        xAxis: "xAxis",
                        yAxis: "yAxis",
                        valueMemberPath: "david_sum"
                    }, {
                        name: "bob",
                        title: "bob",
                        type: "column",
                        xAxis: "xAxis",
                        yAxis: "yAxis",
                        valueMemberPath: "bob"
                    }],
                    horizontalZoomable: true,
                    verticalZoomable: true,
                    windowResponse: "immediate",
                    overviewPlusDetailPaneVisibility: "visible",
                    legend: { element: "legend" }
                });
    
    
    
            });
        </script>
    

    which produces the following output:

Reply Children