MVC SharedDataSource Between Pie Chart & Grid

4 posts, 0 answers
  1. Bill
    Bill avatar
    13 posts
    Member since:
    Jul 2018

    Posted 08 Jan Link to this post

    I have a pie chart that is populated via a remote datasource that returns JSON.  I now want to add a grid that will use the same data.  When I implement the shared data source for the pie chart it calls the action to get the data but the pie chart no longer shows.

    This Works:

    @(Html.Kendo().Chart<PortalApp.Areas.TaskManagement.Features.Reporting.Index.Vendor> ()
                        .Name("chart1")
                        .Title(title => title
                            //.Text("Vendor - Total Assigned: 27564")
                            .Text("Vendor")
                            .Position(ChartTitlePosition.Top))
                        .Legend(legend => legend
                            .Visible(false)
                        )
                        .ChartArea(chart => chart
                            .Background("transparent")
                        .Height(300)
                        )
                        .SeriesColors(new string[] { "#9de219", "#90cc38", "#068c35", "#006634", "#004d38", "#033939" })
                        .DataSource(ds => ds.Read(read => read.Action("GetVendorGraph", "Reporting")))
                        //.DataSource("graphOneDS")
                        .Series(series =>
                        {
                            series.Pie(m => m.value, m => m.category)
                            .Padding(0)
                            .Labels(labels => labels
                                .Template("#= dataItem.category #:  #= dataItem.value2 #")
                                .Background("transparent")
                                .Visible(true)
                            )
                            .StartAngle(210);
                        })
                        .Tooltip(tooltip => tooltip
                            .Visible(true)
                            .Template("#= dataItem.category #:  #= dataItem.value #% (#= dataItem.value2 # Review Tasks Assigned)</br>Outstanding Requests: #= dataItem.value3 #</br>Outstanding Questions: #= dataItem.value4 #")
                        )
                    .Deferred(true)
                    )

    This Doesn't

    @(Html.Kendo().DataSource<PortalApp.Areas.TaskManagement.Features.Reporting.Index.Vendor>()
                        .Name("graphOneDS")
                        .Ajax(dataSource => dataSource
                           .Read(read => read.Action("GetVendorGraph", "Reporting"))
                        )
                        .Deferred(true)
                    )
                    @(Html.Kendo().Chart<PortalApp.Areas.TaskManagement.Features.Reporting.Index.Vendor> ()
                        .Name("chart1")
                        .Title(title => title
                            //.Text("Vendor - Total Assigned: 27564")
                            .Text("Vendor")
                            .Position(ChartTitlePosition.Top))
                        .Legend(legend => legend
                            .Visible(false)
                        )
                        .ChartArea(chart => chart
                            .Background("transparent")
                        .Height(300)
                        )
                        .SeriesColors(new string[] { "#9de219", "#90cc38", "#068c35", "#006634", "#004d38", "#033939" })
                        //.DataSource(ds => ds.Read(read => read.Action("GetVendorGraph", "Reporting")))
                        .DataSource("graphOneDS")
                        .Series(series =>
                        {
                            series.Pie(m => m.value, m => m.category)
                            .Padding(0)
                            .Labels(labels => labels
                                .Template("#= dataItem.category #:  #= dataItem.value2 #")
                                .Background("transparent")
                                .Visible(true)
                            )
                            .StartAngle(210);
                        })
                        .Tooltip(tooltip => tooltip
                            .Visible(true)
                            .Template("#= dataItem.category #:  #= dataItem.value #% (#= dataItem.value2 # Review Tasks Assigned)</br>Outstanding Requests: #= dataItem.value3 #</br>Outstanding Questions: #= dataItem.value4 #")
                        )
                    .Deferred(true)
                    )

     

  2. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 10 Jan Link to this post

    Hi Bill,

    It could be that the DataSource is not yet initialized when the Chart tries to use it. I would suggest you to check for any JavaScript errors regarding the DataSource assignment. 
    Also, can you show me the code where you call DeferredScripts() to initialize the widgets? If there aren't visible errors, I would like to try to reproduce the problem locally with similar initialization logic to yours.

    Regards,
    Tsvetina
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Bill
    Bill avatar
    13 posts
    Member since:
    Jul 2018

    Posted 10 Jan in reply to Tsvetina Link to this post

    Thanks, there are no javascript errors.  The controller action is called both time it's just when using the shareddatasource the chart doesn't have any results.

    I will send the code for the scripts.

  4. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 11 Jan Link to this post

    Hello Bill,

    I figured out one possible scenario in which this code will not work, as it is. If you initially created the GetVendorGraph controller method to return a flat list of data, as required by the Chart DataSource, an external DataSource will not be able to parse this data without a custom configuration.
    The idea is that the Grid and the standalone DataSource expect the data to be returned as a DataSourceResult object from the controller method, which results in the following response:
       "Data":[ 
          
             "value":5,
             "value2":4,
             "value3":6,
             "value4":8,
             "category":"category 1"
          },
          
             "value":7,
             "value2":6,
             "value3":4,
             "value4":2,
             "category":"category 2"
          },
          
             "value":2,
             "value2":7,
             "value3":3,
             "value4":7,
             "category":"category 3"
          },
          
             "value":9,
             "value2":5,
             "value3":5,
             "value4":6,
             "category":"category 4"
          },
          
             "value":3,
             "value2":2,
             "value3":9,
             "value4":3,
             "category":"category 5"
          }
       ],
       "Total":5,
       "AggregateResults":null,
       "Errors":null
    }

    To be able to return the data in this format, you can add a ToDataSourceResult() call at the end of your controller method:
    public ActionResult GetVendorGraph([DataSourceRequest] DataSourceRequest request) {
        List<Vendor> data = new List<Vendor>();
        data.Add(new Vendor { category = "category 1", value = 5, value2 = 4, value3 = 6, value4 = 8 });
        data.Add(new Vendor { category = "category 2", value = 7, value2 = 6, value3 = 4, value4 = 2 });
        data.Add(new Vendor { category = "category 3", value = 2, value2 = 7, value3 = 3, value4 = 7 });
        data.Add(new Vendor { category = "category 4", value = 9, value2 = 5, value3 = 5, value4 = 6 });
        data.Add(new Vendor { category = "category 5", value = 3, value2 = 2, value3 = 9, value4 = 3 });
     
        return Json(data.ToDataSourceResult(request));
    }

    I am attaching a sample project where you can see such scenario implemented and the Chart loading the data from the external DataSource.

    Regards,
    Tsvetina
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top