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

[Anjali]

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

    alert(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]

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.
 
Thanks,
Sanjith K.

[Sanjith Kesavan]

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)

{

  if(e._currentItem.IsChartPoint)

   {

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

   $.ajax({

      url: "/Chart/DrillDown",

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

      success: function (data) {

      $("#Chart").html(data);

       }

       });

    }
}


ScreenShot:
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.
http://www.syncfusion.com/downloads/support/forum/119648/ze/Drilldown208885298
 
Regards,

Sanjith K.​