Chart from PivotGrid, Multiple Series.

6 posts, 0 answers
  1. Lee
    Lee avatar
    53 posts
    Member since:
    Feb 2018

    Posted 06 Apr Link to this post

    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.

  2. Lee
    Lee avatar
    53 posts
    Member since:
    Feb 2018

    Posted 06 Apr in reply to Lee Link to this post

    Ideally i'd like something like the attached image.
  3. Lee
    Lee avatar
    53 posts
    Member since:
    Feb 2018

    Posted 06 Apr in reply to Lee Link to this post

    Sorry it didn't attach the image :(
  4. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2323 posts

    Posted 10 Apr Link to this post

    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.
  5. Lee
    Lee avatar
    53 posts
    Member since:
    Feb 2018

    Posted 11 Apr in reply to Konstantin Dikov Link to this post

    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.

     

  6. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2323 posts

    Posted 13 Apr Link to this post

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