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
898
Add multible columns to StackedColumn chart - dynamic
posted

Hi I-Team,

I have a set of data with a different amount of columns. The set of columns varies for each query.

If I hardcode the properties in series like on your sample for stackedcolumn bars, everything works fine.

If I try to do it dynamically I get no error message but also no chart values.

Can you please take a look to my code?

Second question: how can I do grouped stackedcolumn bars.

data = [{ "Group": "Current", "Period": "1", "Auditinfoblatt gedruckt": 0, "ausgefallen": 0, "erledigt": 0, "in Planung": 1, "Termin verschoben": 1 },
                            { "Group": "Current", "Period": "2", "Auditinfoblatt gedruckt": 1, "ausgefallen": 0, "erledigt": 0, "in Planung": 2, "Termin verschoben": 0 },
                            { "Group": "Current", "Period": "3", "Auditinfoblatt gedruckt": 1, "ausgefallen": 0, "erledigt": 0, "in Planung": 6, "Termin verschoben": 0 },
                            { "Group": "Current", "Period": "4", "Auditinfoblatt gedruckt": 2, "ausgefallen": 0, "erledigt": 0, "in Planung": 3, "Termin verschoben": 0 },
                            { "Group": "Current", "Period": "5", "Auditinfoblatt gedruckt": 3, "ausgefallen": 0, "erledigt": 0, "in Planung": 3, "Termin verschoben": 0 },
                            { "Group": "Current", "Period": "6", "Auditinfoblatt gedruckt": 0, "ausgefallen": 0, "erledigt": 0, "in Planung": 6, "Termin verschoben": 0 },
                            { "Group": "Current", "Period": "7", "Auditinfoblatt gedruckt": 0, "ausgefallen": 0, "erledigt": 0, "in Planung": 5, "Termin verschoben": 0 },
                            { "Group": "Current", "Period": "8", "Auditinfoblatt gedruckt": 0, "ausgefallen": 0, "erledigt": 0, "in Planung": 5, "Termin verschoben": 0 },
                            { "Group": "Current", "Period": "9", "Auditinfoblatt gedruckt": 0, "ausgefallen": 0, "erledigt": 0, "in Planung": 11, "Termin verschoben": 0 },
                            { "Group": "Current", "Period": "10", "Auditinfoblatt gedruckt": 3, "ausgefallen": 0, "erledigt": 0, "in Planung": 7, "Termin verschoben": 0 },
                            { "Group": "Current", "Period": "11", "Auditinfoblatt gedruckt": 0, "ausgefallen": 0, "erledigt": 0, "in Planung": 2, "Termin verschoben": 0 },
                            { "Group": "Current", "Period": "12", "Auditinfoblatt gedruckt": 0, "ausgefallen": 0, "erledigt": 0, "in Planung": 1, "Termin verschoben": 0 }];

$(selector).igDataChart({
            dataSource: data,
            height: height,
            width: width,
            title: title,
            subtitle: subtitle,
            axes: [{
                name: "Period",
                type: "categoryX",
                label: "Period",
                title: titleX,
                gap: 1,
            },
                {
                    name: "Value",
                    type: "numericY",
                    title: titleY
                }],
            series: [function () { // a self executing function to create the series initialization object
                var seriesObj = [];

                seriesObj.name = "parent";
                seriesObj.xAxis = "Period";
                seriesObj.yAxis = "Value";
                seriesObj.type = chartType;
                seriesObj.outline = "transparent";
                seriesObj.series = [];

                var columnSet = [];

                for (var i = 0, l = data.length; i < l; i++) {
                    for (var key in data[i]) {
                        if (data[i].hasOwnProperty(key) && columnSet.indexOf(key) === -1) {
                            columnSet.push(key);
                        }
                    }
                }

                for (var i = 0, l = columnSet.length; i < l; i++) {
                    if (i > 1) {

                        var fragmentObj = []
                        fragmentObj.name = columnSet[i];
                        fragmentObj.title = columnSet[i];
                        fragmentObj.type = "stackedFragment";
                        fragmentObj.showTooltip = true;
                        fragmentObj.tooltipTemplate = columnSet[i];
                        fragmentObj.valueMemberPath = columnSet[i];
                       
                        seriesObj.series.push(fragmentObj);
                    }
                }
               
                if (isColumnChart) { //for column charts set the radius to 0
                    seriesObj.radius = 0;
                }
                return seriesObj;
            }()],

            horizontalZoomable: true,
            verticalZoomable: true,
            windowResponse: "immediate"
        });