This is a migrated thread and some comments may be shown as answers.

Pivot grid bind to multiple chart

1 Answer 89 Views
PivotGrid
This is a migrated thread and some comments may be shown as answers.
Ziv
Top achievements
Rank 1
Ziv asked on 21 Mar 2017, 09:44 AM

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;
}

 

1 Answer, 1 is accepted

Sort by
0
Accepted
Tsvetina
Telerik team
answered on 23 Mar 2017, 08:59 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
PivotGrid
Asked by
Ziv
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
Share this question
or