Pivot grid bind to multiple chart

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

    Posted 21 Mar 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. 

     

    001.functionloadPivotWWvsBoard() {
    002.    $("#divPivot").html("");
    003.    $("#divConfigurator").html("");
    004.    var collapsed = {
    005.        columns: [],
    006.        rows: []
    007.    };
    008.    /*define the data source*/var DataSource;
    009. 
    010.    jQuery.ajaxSetup({
    011.        async: false
    012.    });
    013. 
    014.    $.get("/Report/GetDeliveredReportJSON", { fromWW: $("#FromWW").val(), toWW: $("#ToWW").val() }).done(function (data) {
    015.        DataSource = data;
    016.    })
    017. 
    018.    var dataSource = new kendo.data.PivotDataSource({
    019.        data: DataSource
    020.        , type: "xmla"
    021.        , schema: {
    022.            model: {
    023.                fields: {
    024.                    "Project": {
    025.                        type: "string"
    026.                    }
    027.                    , Board: {
    028.                        type: "string"
    029.                    }
    030.                    , WW: {
    031.                        type: "string"
    032.                    }
    033.                    , "ApproveDate": {
    034.                        field: "ApproveDate"
    035.                        , type: "date"
    036.                    }
    037.                    , ReceiverName: {
    038.                        field: "ReceiverName"
    039.                    }
    040.                    , RequestorName: {
    041.                        field: "RequestorName"
    042.                    }
    043.                    , ApprovingManager: {
    044.                        field: "ApprovingManager"
    045.                    }
    046.                    , PartTrans: {
    047.                        field: "PartTrans"
    048.                    }
    049.                    , SerialNumber: {
    050.                        field: "SerialNumber"
    051.                    }
    052.                    , OpeningDate: {
    053.                        field: "OpeningDate"
    054.                    }
    055.                    , DeliveredDate: {
    056.                        field: "DeliveredDate"
    057.                    }
    058.                    , ApprovalType: {
    059.                        field: "ApprovalType"
    060.                    }
    061.                    , DateDifference: {
    062.                        field: "DateDifference"
    063.                    }
    064.                    , ReportType: {
    065.                        field: "ReportType"
    066.                    }
    067.                    , BusinessLine: {
    068.                        field: "BusinessLine"
    069.                    }
    070.                    , Branch: {
    071.                        field: "Branch"
    072.                    }
    073.                    , ManagerType: {
    074.                        field: "ManagerType"
    075.                    }
    076.                    , CostCenter: {
    077.                        field: "CostCenter"
    078.                    }
    079.                    , SapOrder: {
    080.                        field: "SapOrder"
    081.                    }
    082.                ,
    083.                }
    084.            }
    085.            , cube: {
    086.                dimensions: {
    087.                    "Project": {
    088.                        caption: "Project"
    089.                    }
    090.                    , Board: {
    091.                        caption: "Board"
    092.                    }
    093.                    , WW: {
    094.                        caption: "WW"
    095.                    }
    096.                    , "ApproveDate": {
    097.                        caption: "Approve Date"
    098.                    }
    099.                }
    100.                , measures: {
    101.                    "Delivered Quantity": {
    102.                        field: "SerialNumber"
    103.                        , aggregate: "count"
    104.                    }
    105.                }
    106.            }
    107.        }
    108.        , columns: [{
    109.            name: "Project", expand: true
    110.        },
    111.        {
    112.            name: "Board", expand: true
    113.        }]
    114.        , rows: [{
    115.            name: "WW"
    116.        }]
    117.        , measures: ["Delivered Quantity"]
    118.    });
    119. 
    120.    dataSource.filter(loadFiltersForGrid(false))
    121.    dataSource.fetch(function () {
    122.        console.log("data source created successfuly", dataSource);
    123.    });
    124. 
    125.    /*define the pivot*/var pivotgrid = $("#divPivot")
    126.        .kendoPivotGrid({
    127.            filterable: true,
    128.            sortable: true,
    129.            collapseMember: function (e) {
    130.                var axis = collapsed[e.axis];
    131.                var path = e.path[0];
    132. 
    133.                if (axis.indexOf(path) === -1) {
    134.                    axis.push(path);
    135.                }
    136.            },
    137.            expandMember: function (e) {
    138.                var axis = collapsed[e.axis];
    139.                var index = axis.indexOf(e.path[0]);
    140. 
    141.                if (index !== -1) {
    142.                    axis.splice(index, 1);
    143.                }
    144.            },
    145.            dataSource: dataSource
    146.            , dataBound: function () {
    147.                this.dataSource.expandColumn(["Project", "Board"]);
    148.                this.dataSource.expandColumn(["Project"]);
    149.                this.dataSource.expandRow(["WW"]);
    150.                // this.dataSource.filter(filters);
    151.                initChart(convertData(this.dataSource, collapsed, "Project"));
    152.                initChart2(convertData(this.dataSource, collapsed, "Board"));
    153.            }
    154.        })
    155.        .data("kendoPivotGrid");
    156. 
    157. 
    158.    /*define the chart*/functioninitChart(data) {
    159. 
    160.        $("#divChart1").kendoChart({
    161.            dataSource: {
    162.                data: data,
    163.                group: "column"
    164.            },
    165.            title: {
    166.                text: "Delivered quantity by project"
    167.            },
    168.            legend: {
    169.                position: "top"
    170.            },
    171.            seriesDefaults: {
    172.                type: "bar"
    173.            },
    174.            series: [{
    175.                type: "column",
    176.                field: "measure",
    177.            }],
    178.            categoryAxis: {
    179.                field: "row"
    180.                , padding: {
    181.                    top: 135
    182.                }
    183.                 , majorGridLines: {
    184.                     visible: true
    185.                 }
    186.            },
    187.            valueAxis: {
    188.               majorGridLines: {
    189.                    visible: true
    190.                }
    191.            },
    192.            tooltip: {
    193.                visible: true,
    194.                format: "{0}",
    195.                template: "#= series.name #: #= value #"
    196.            },
    197.            dataBound: function (e) {
    198.                // e.sender.options.categoryAxis.categories.sort()
    199.            }
    200.        });
    201.    }
    202.    functioninitChart2(data) {
    203. 
    204.        $("#divChart2").kendoChart({
    205.            dataSource: {
    206.                data: data,
    207.                group: "column"
    208.            },
    209.            title: {
    210.                text: "Delivered quantity by board"
    211.            },
    212.            legend: {
    213.                position: "top"
    214.            },
    215.            seriesDefaults: {
    216.                type: "bar"
    217.            },
    218.            series: [{
    219.                type: "column",
    220.                field: "measure",
    221.            }],
    222.            categoryAxis: {
    223.                field: "row"
    224.                , padding: {
    225.                    top: 135
    226.                }
    227.                 , majorGridLines: {
    228.                     visible: true
    229.                 }
    230.            },
    231.            valueAxis: {
    232.                 majorGridLines: {
    233.                    visible: true
    234.                }
    235.            },
    236.            tooltip: {
    237.                visible: true,
    238.                format: "{0}",
    239.                template: "#= series.name #: #= value #"
    240.            },
    241.            dataBound: function (e) {
    242.                // e.sender.options.categoryAxis.categories.sort()
    243.            }
    244.        });
    245.    }
    246.}
    247. 
    248.functionflattenTree(tuples) {
    249.    tuples = tuples.slice();
    250.    var result = [];
    251.    var tuple = tuples.shift();
    252.    var idx, length, spliceIndex, children, member;
    253. 
    254.    while (tuple) {
    255.        //required for multiple measuresif (tuple.dataIndex !== undefined) {
    256.            result.push(tuple);
    257.        }
    258. 
    259.        spliceIndex = 0;
    260.        for (idx = 0, length = tuple.members.length; idx < length; idx++) {
    261.            member = tuple.members[idx];
    262.            children = member.children;
    263.            if (member.measure) {
    264.                [].splice.apply(tuples, [0, 0].concat(children));
    265.            } else {
    266.                [].splice.apply(tuples, [spliceIndex, 0].concat(children));
    267.            }
    268.            spliceIndex += children.length;
    269.        }
    270. 
    271.        tuple = tuples.shift();
    272.    }
    273. 
    274.    return result;
    275.}
    276. 
    277.functionisCollapsed(tuple, collapsed) {
    278.    var name = tuple.members[0].parentName;
    279. 
    280.    for (var idx = 0, length = collapsed.length; idx < length; idx++) {
    281.        if (collapsed[idx] === name) {
    282.            console.log(name);
    283.            returntrue;
    284.        }
    285.    }
    286. 
    287.    returnfalse;
    288.}
    289. 
    290.functionconvertData(dataSource, collapsed, type) {
    291.    var columnTuples = flattenTree(dataSource.axes().columns.tuples || [], collapsed.columns);
    292.    var rowTuples = flattenTree(dataSource.axes().rows.tuples || [], collapsed.rows);
    293.    var data = dataSource.data();
    294.    var rowTuple, columnTuple;
    295. 
    296.    var idx = 0;
    297.    var result = [];
    298.    var columnsLength = columnTuples.length;
    299. 
    300.    for (var i = 0; i < rowTuples.length; i++) {
    301.        rowTuple = rowTuples[i];
    302. 
    303.        if (!isCollapsed(rowTuple, collapsed.rows)) {
    304.            for (var j = 0; j < columnsLength; j++) {
    305.                columnTuple = columnTuples[j];
    306. 
    307.                if (!isCollapsed(columnTuple, collapsed.columns)) {
    308.                    if (idx > columnsLength && idx % columnsLength !== 0) {
    309. 
    310.                        var memebrtype;
    311.                        if (type == "Board") {
    312.                            memebrtype = 1
    313.                        } else {
    314.                            memebrtype = 0
    315.                        }
    316.                        var columninfo =  GetChildren(columnTuple.members[memebrtype], type);
    317.                        if (columninfo) {
    318.                            result.push({
    319.                                measure: Number(data[idx].value),
    320.                                column: columninfo,
    321.                                row: rowTuple.members[0].caption
    322.                            });
    323.                        }
    324.                       
    325.                    }
    326.                }
    327.                idx += 1;
    328.            }
    329.        }
    330.    }
    331. 
    332.    return result;
    333.}
    334. 
    335. 
    336.functionGetChildren(parent, type) {
    337.    var result = undefined;
    338. 
    339.    if (parent.hasChildren || result != undefined) {
    340.        for (var i = 0; i < parent.children.length; i++) {
    341.            result = GetChildren(parent.children[i], type);
    342.        }
    343.    } else {
    344.        result = parent.caption;
    345.    }
    346.    if (result == type) {
    347.        result = undefined;
    348.    }
    349. 
    350. 
    351.    return result;
    352.}

    .

     

     
  2. Ziv
    Ziv avatar
    3 posts
    Member since:
    Feb 2017

    Posted 21 Mar in reply to Ziv Link to this post

    Hi,

    we have opened this post here by mistake and should be opened at UI for ASP.NET MVC or at Kendo UI Forum (javascript html5). 

    please close / delete this post.

    thanks 

Back to Top