Chart from PivotGrid, Multiple Series.

[Lee]

Hi,

 

I have a PivotGrid (MVC) and im using it's datasource to generate the Chart. This has gone well, apart from the Series. I've worked out how to get one working using the example here: https://docs.telerik.com/kendo-ui/controls/data-management/pivotgrid/how-to/integration/chart-integration

 

For my PivotGrid i have two values for my 'Rows', but the Chart only displays one, see attached image, here's my Chart:

$(container).kendoChart({
               title: {
                   text: title
               },
               dataSource: {
                   data: data,
                   group: "row"
               },
               series: [{
                   type: "column",
                   field: "measure",
                   name: "#= group.value # (category)",
                   categoryField: "column"
               }],
               legend: {
                   position: "bottom"
               },
               valueAxis: {
                   labels: {
                       format: "{0:N}"
                   }
               },
               dataBound: function (e) {
                   var categoryAxis = e.sender.options.categoryAxis;

                   if (categoryAxis && categoryAxis.categories) {
                       categoryAxis.categories.sort();
                   }
               }
           });

 

I'm sure it's most likely to-do with the Series, but using the integration provide i'm not sure how to add it.

 

Thanks,

Lee.

[Lee]

Ideally i'd like something like the attached image.

[Lee]

Sorry it didn't attach the image :(

[Konstantin Dikov]

Hello Lee,

For displaying two stacked values you should define second series for the other field that you want to display and furthermore, set the categoryField to "row" or to the nested "Month" property.

If any further assistance is needed on this matter, if you can share a dojo example with a sample data, we should be able to modify the code according to the attached screenshot.


Regards,
Konstantin Dikov
Progress Telerik

[Lee]

Hi Konstantin,

It seems to be an issue with the Data when it's requested from the PivotGrid:

[…]
0: Object { measure: 16813.749999999996, column: "Overhead", row: "2017" }
1: Object { measure: 3411.9499999999994, column: "Annual Leave", row: "2017" }
2: Object { measure: 794.5000000000003, column: "Sick Leave", row: "2017" }
3: Object { measure: 38494.49999999991, column: "Chargeable", row: "2017" }

 

For some reason it's only getting the 'Year' in the 'row' filed it doesn't bring over the Month.

Here's my PivotGrid:

@(
        Html.Kendo().PivotGrid<UserUtilisationView>()
            .Name("Overview")
            .Excel(excel => excel
                .FileName("User Utilisation Pivot - Overall.xlsx")
                .Filterable(true)
                .ProxyURL(Url.Action("ExcelExportSave", "Kendo"))
            )
            .ColumnWidth(200)
            .Height(580)
            .HtmlAttributes(new { @class = "hidden-on-narrow" })
            //.Filterable(true)
            //.Sortable(x => x.AllowUnsort(false))
            .DataSource(dataSource => dataSource
                .Ajax()
                .Transport(transport => transport.Read("UserUtilisationListAjax", "Kendo", new { AssignedTo = ViewBag.Name }))
                .Schema(schema => schema
                    .Cube(cube => cube
                        .Dimensions(dimensions =>
                        {
                            //dimensions.Add(model => model.Year).Caption("All Years");
                            //dimensions.Add(model => model.Month).Caption("All Months");
                            //dimensions.Add(model => model.TimesheetOverhead).Caption("Charge Type");
                        })
                        .Measures(measures => measures.Add("Hours").Field(model => model.TimesheetHours).AggregateName("sum").Format("{0:N}"))

                    ))
                .Columns(columns =>
                {
                    columns.Add("TimesheetOverhead").Expand(true);
                })
                .Rows(rows =>
                {
                    rows.Add("Year").Expand(true);
                    rows.Add("Month").Expand(true);
                })
                .Measures(measures => measures.Values("Hours"))
                .Events(e =>
                {
                    e.Error("onError");
                    e.RequestEnd("onRequestEndOverall");
                })
            )
 )

 

Also for some reason my 'rows.Add("Month").Expand(true);' doesn't expand the PivotGrid 'row' month when it loads, but the 'All' Months at the bottom.(See attached Image)

A. Why?

B. Can i get ride of the All row?

Thanks,
Lee.

 

[Konstantin Dikov]

Hello Lee,

You will have to return the Month values in the records holding the Year values from the controller. Please take a look at the following online demo for Local Binding to flat data:

• https://demos.telerik.com/aspnet-mvc/pivotgrid/local-flat-data-binding

Please have in mind that there are many limitations when the PivotGrid is bound to flat data and working with dates in the same way as with OLAP binding in not possible, but in your scenario you are working with string values, so this should not be a problem.


Regards,
Konstantin Dikov
Progress Telerik