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

MVC SharedDataSource Between Pie Chart & Grid

3 Answers 144 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Bill
Top achievements
Rank 1
Bill asked on 08 Jan 2019, 02:32 PM

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

 

3 Answers, 1 is accepted

Sort by
0
Tsvetina
Telerik team
answered on 10 Jan 2019, 11:22 AM
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.
0
Bill
Top achievements
Rank 1
answered on 10 Jan 2019, 01:51 PM

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.

0
Tsvetina
Telerik team
answered on 11 Jan 2019, 10:19 AM
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.
Tags
Chart
Asked by
Bill
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
Bill
Top achievements
Rank 1
Share this question
or