Pivot grid bind to multiple chart

[Ziv]

Hello,
I have pivot grid control and I'm trying to display several charts according to this pivot.
when the data is expanded the charts present correct data but when I start collapsing the columns the data in the charts starts freaking out and some of the data is missing and the other one is incorrect or displaying duplicated values.
I have tried the solutions proposed in the following thread:  but seems like it still doesn't work. 
any idea?
Please see the code below. 

functionloadPivotWWvsBoard() {
    $("#divPivot").html("");
    $("#divConfigurator").html("");
    var collapsed = {
        columns: [],
        rows: []
    };
    /*define the data source*/var DataSource;

    jQuery.ajaxSetup({
        async: false
    });

    $.get("/Report/GetDeliveredReportJSON", { fromWW: $("#FromWW").val(), toWW: $("#ToWW").val() }).done(function (data) {
        DataSource = data;
    })

    var dataSource = new kendo.data.PivotDataSource({
        data: DataSource
        , type: "xmla"
        , schema: {
            model: {
                fields: {
                    "Project": {
                        type: "string"
                    }
                    , Board: {
                        type: "string"
                    }
                    , WW: {
                        type: "string"
                    }
                    , "ApproveDate": {
                        field: "ApproveDate"
                        , type: "date"
                    }
                    , ReceiverName: {
                        field: "ReceiverName"
                    }
                    , RequestorName: {
                        field: "RequestorName"
                    }
                    , ApprovingManager: {
                        field: "ApprovingManager"
                    }
                    , PartTrans: {
                        field: "PartTrans"
                    }
                    , SerialNumber: {
                        field: "SerialNumber"
                    }
                    , OpeningDate: {
                        field: "OpeningDate"
                    }
                    , DeliveredDate: {
                        field: "DeliveredDate"
                    }
                    , ApprovalType: {
                        field: "ApprovalType"
                    }
                    , DateDifference: {
                        field: "DateDifference"
                    }
                    , ReportType: {
                        field: "ReportType"
                    }
                    , BusinessLine: {
                        field: "BusinessLine"
                    }
                    , Branch: {
                        field: "Branch"
                    }
                    , ManagerType: {
                        field: "ManagerType"
                    }
                    , CostCenter: {
                        field: "CostCenter"
                    }
                    , SapOrder: {
                        field: "SapOrder"
                    }
                ,
                }
            }
            , cube: {
                dimensions: {
                    "Project": {
                        caption: "Project"
                    }
                    , Board: {
                        caption: "Board"
                    }
                    , WW: {
                        caption: "WW"
                    }
                    , "ApproveDate": {
                        caption: "Approve Date"
                    }
                }
                , measures: {
                    "Delivered Quantity": {
                        field: "SerialNumber"
                        , aggregate: "count"
                    }
                }
            }
        }
        , columns: [{
            name: "Project", expand: true
        },
        {
            name: "Board", expand: true
        }]
        , rows: [{
            name: "WW"
        }]
        , measures: ["Delivered Quantity"]
    });

    dataSource.filter(loadFiltersForGrid(false))
    dataSource.fetch(function () {
        console.log("data source created successfuly", dataSource);
    });

    /*define the pivot*/var pivotgrid = $("#divPivot")
        .kendoPivotGrid({
            filterable: true,
            sortable: true,
            collapseMember: function (e) {
                var axis = collapsed[e.axis];
                var path = e.path[0];

                if (axis.indexOf(path) === -1) {
                    axis.push(path);
                }
            },
            expandMember: function (e) {
                var axis = collapsed[e.axis];
                var index = axis.indexOf(e.path[0]);

                if (index !== -1) {
                    axis.splice(index, 1);
                }
            },
            dataSource: dataSource
            , dataBound: function () {
                this.dataSource.expandColumn(["Project", "Board"]);
                this.dataSource.expandColumn(["Project"]);
                this.dataSource.expandRow(["WW"]);
                // this.dataSource.filter(filters);
                initChart(convertData(this.dataSource, collapsed, "Project"));
                initChart2(convertData(this.dataSource, collapsed, "Board"));
            }
        })
        .data("kendoPivotGrid");


    /*define the chart*/functioninitChart(data) {

        $("#divChart1").kendoChart({
            dataSource: {
                data: data,
                group: "column"
            },
            title: {
                text: "Delivered quantity by project"
            },
            legend: {
                position: "top"
            },
            seriesDefaults: {
                type: "bar"
            },
            series: [{
                type: "column",
                field: "measure",
            }],
            categoryAxis: {
                field: "row"
                , padding: {
                    top: 135
                }
                 , majorGridLines: {
                     visible: true
                 }
            },
            valueAxis: {
               majorGridLines: {
                    visible: true
                }
            },
            tooltip: {
                visible: true,
                format: "{0}",
                template: "#= series.name #: #= value #"
            },
            dataBound: function (e) {
                // e.sender.options.categoryAxis.categories.sort()
            }
        });
    }
    functioninitChart2(data) {

        $("#divChart2").kendoChart({
            dataSource: {
                data: data,
                group: "column"
            },
            title: {
                text: "Delivered quantity by board"
            },
            legend: {
                position: "top"
            },
            seriesDefaults: {
                type: "bar"
            },
            series: [{
                type: "column",
                field: "measure",
            }],
            categoryAxis: {
                field: "row"
                , padding: {
                    top: 135
                }
                 , majorGridLines: {
                     visible: true
                 }
            },
            valueAxis: {
                 majorGridLines: {
                    visible: true
                }
            },
            tooltip: {
                visible: true,
                format: "{0}",
                template: "#= series.name #: #= value #"
            },
            dataBound: function (e) {
                // e.sender.options.categoryAxis.categories.sort()
            }
        });
    }
}

functionflattenTree(tuples) {
    tuples = tuples.slice();
    var result = [];
    var tuple = tuples.shift();
    var idx, length, spliceIndex, children, member;

    while (tuple) {
        //required for multiple measuresif (tuple.dataIndex !== undefined) {
            result.push(tuple);
        }

        spliceIndex = 0;
        for (idx = 0, length = tuple.members.length; idx < length; idx++) {
            member = tuple.members[idx];
            children = member.children;
            if (member.measure) {
                [].splice.apply(tuples, [0, 0].concat(children));
            } else {
                [].splice.apply(tuples, [spliceIndex, 0].concat(children));
            }
            spliceIndex += children.length;
        }

        tuple = tuples.shift();
    }

    return result;
}

functionisCollapsed(tuple, collapsed) {
    var name = tuple.members[0].parentName;

    for (var idx = 0, length = collapsed.length; idx < length; idx++) {
        if (collapsed[idx] === name) {
            console.log(name);
            returntrue;
        }
    }

    returnfalse;
}

functionconvertData(dataSource, collapsed, type) {
    var columnTuples = flattenTree(dataSource.axes().columns.tuples || [], collapsed.columns);
    var rowTuples = flattenTree(dataSource.axes().rows.tuples || [], collapsed.rows);
    var data = dataSource.data();
    var rowTuple, columnTuple;

    var idx = 0;
    var result = [];
    var columnsLength = columnTuples.length;

    for (var i = 0; i < rowTuples.length; i++) {
        rowTuple = rowTuples[i];

        if (!isCollapsed(rowTuple, collapsed.rows)) {
            for (var j = 0; j < columnsLength; j++) {
                columnTuple = columnTuples[j];

                if (!isCollapsed(columnTuple, collapsed.columns)) {
                    if (idx > columnsLength && idx % columnsLength !== 0) {

                        var memebrtype;
                        if (type == "Board") {
                            memebrtype = 1
                        } else {
                            memebrtype = 0
                        }
                        var columninfo =  GetChildren(columnTuple.members[memebrtype], type);
                        if (columninfo) {
                            result.push({
                                measure: Number(data[idx].value),
                                column: columninfo,
                                row: rowTuple.members[0].caption
                            });
                        }

                    }
                }
                idx += 1;
            }
        }
    }

    return result;
}


functionGetChildren(parent, type) {
    var result = undefined;

    if (parent.hasChildren || result != undefined) {
        for (var i = 0; i < parent.children.length; i++) {
            result = GetChildren(parent.children[i], type);
        }
    } else {
        result = parent.caption;
    }
    if (result == type) {
        result = undefined;
    }


    return result;
}

 

[Tsvetina]

Hello Ziv,

I replied in the support thread you opened. Please, check the response there and post back if you have additional questions or comments.

If someone else is trying to achieve identical behavior, check the following resources:
PivotGrid and Chart integration example
Discussion about the Chart and PivotGrid integration

Regards,
Tsvetina
Telerik by Progress