We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Drill Down Pie Chart with display of Grid onclick of pie chart region.

Thread ID:





119648 Jul 17,2015 01:32 PM UTC Jul 21,2015 12:03 PM UTC ASP.NET MVC 2
Tags: Chart
Asked On July 17, 2015 01:32 PM UTC

I’m trying to display a grid in piechart region click, I’m facing some issue in doing so,

Find below the code where the javascript exception is thrown.


File Name:“jquery-2.1.0.js”



jQuery.parseJSON = function (data) {


       return JSON.parse( data + "" );



When the data is “”, “Unexpected End of Input Error” is thrown.

This issue occurs when I try to return a view with custom model from my Action method


But if I Include the below code(return a MVCChartModel object instead of custom model) in my OnClick Action method,

the javascript error is not occurring but it shows some bar chart in the next page..


  if (args.ChartAction == ChartHtmlAction.RegionClick || args.ChartAction == ChartHtmlAction.None)



                  return chartModel.ChartActionResult(args);



Please guide me on this, Is it possible to send a sample code to display a grid below the chart onclick of pie chart region.

Sanjith Kesavan [Syncfusion]
Replied On July 20, 2015 01:44 PM UTC

Hi Anjali,
We have updated solution for the same query in the incident id-141611. Please take the follow-up the incident.
Let us know if you have any other concern.
Sanjith K.

Sanjith Kesavan [Syncfusion]
Replied On July 21, 2015 12:03 PM UTC

Hi Anjali,
We have analyzed your query. Drilldown of the chart to grid cannot be achieved directly. For achieving you requirement we had used Ajax postback method. Please find a below code which is used to drilldown a chart according to a region clicked in a pie chart.

Code Snippet:

//Action method to handle postbacks in Grid

public ActionResult GridPartialView(PagingParams args)


    IEnumerable data = new ChartDrillDownMVC.Models.StudentDataContext().Student.Take(100).ToList();

    return data.GridActions<ChartDrillDownMVC.Models.Student>();


//Action method for drilldown       

public ActionResult DrillDown(string Name, int index)


     var data = new ChartDrillDownMVC.Models.StudentDataContext().Student.Take(100).ToList();

     return PartialView("GridPartialView", data);                       

//Client-side function to handle mouse click event of chart

function MouseClick(sender, e)




   //Using ajax request to drill down when chart point is clicked


      url: "/Chart/DrillDown",

      data: { "Name": e._currentItem.SeriesName, "index":e._currentItem.PointIndex },

      success: function (data) {





Normal piechart:

Piechart after one region is clicked:

We have prepared the workaround sample as per your requirement. Please find the sample from below location.

Sanjith K.​


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon