MVC SharedDataSource Between Pie Chart & Grid

[Bill]

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)
                )

 

[Tsvetina]

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

[Bill]

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.

[Tsvetina]

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