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

Chart from PivotGrid, Multiple Series.

5 Answers 34 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Lee
Top achievements
Rank 1
Veteran
Lee asked on 06 Apr 2018, 08:53 AM

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.

5 Answers, 1 is accepted

Sort by
0
Lee
Top achievements
Rank 1
Veteran
answered on 06 Apr 2018, 09:03 AM
Ideally i'd like something like the attached image.
0
Lee
Top achievements
Rank 1
Veteran
answered on 06 Apr 2018, 09:04 AM
Sorry it didn't attach the image :(
0
Konstantin Dikov
Telerik team
answered on 10 Apr 2018, 08:42 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Lee
Top achievements
Rank 1
Veteran
answered on 11 Apr 2018, 09:39 AM

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.

 

0
Konstantin Dikov
Telerik team
answered on 13 Apr 2018, 08:41 AM
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:
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Charts
Asked by
Lee
Top achievements
Rank 1
Veteran
Answers by
Lee
Top achievements
Rank 1
Veteran
Konstantin Dikov
Telerik team
Share this question
or