Pivot grid bind to multiple chart

2 posts, 1 answers
  1. Ziv
    Ziv avatar
    3 posts
    Member since:
    Feb 2017

    Posted 21 Mar 2017 Link to this post

    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: http://www.telerik.com/forums/combination-of-a-pivot-grid-control-and-a-chart-control  , 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;
    }

     

  2. Answer
    Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 23 Mar 2017 Link to this post

    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.
Back to Top