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. 

 

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

.

 

 

[Ziv]

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