How to show the json data in Pie chart HighChart? - asp.net-mvc-3

Question

HI all i have a json data which looks like this
[ "Data":[
{"Id":"1 ","EmployeeName":Anil},
]
which i am geting from my controller action
public ActionResult Index()
{
var data = GetData();
return View();
}
public JsonResult GetData()
{
int Param1;
Param1 = 1;
var EmployeeDetails = db.EmployeeDetails.ToList<EmployeeDetail>().Select(e =>
new
{
id=e.EmployeId,
Name = e.EmployeeName
});
return Json(EmployeeDetails , JsonRequestBehavior.AllowGet);
}
now i want this json data to a pie chart..how can i do this

Answer 1

Here instead of calling your jsonresult method in action method do it using $.getJSON method
public ActionResult Index()
{
return View();
}
public JsonResult GetData()
{
int Param1;
Param1 = 1;
var EmployeeDetails = db.EmployeeDetails.ToList<EmployeeDetail>().Select(e =>
new
{
id=e.EmployeId,
Name = e.EmployeeName
});
return Json(EmployeeDetails , JsonRequestBehavior.AllowGet);
}
here u can call your method like this and bind it to your chart
<script type="text/javascript">
$(function () {
$.getJSON('<%= Url.Action("YourMethod","YourControllerName") %>', {}, function (data) {
var json = data;
var jsondata = [];
for (var i in json) {
// var serie = new Array(json[i].Projects, json[i].Bugs);
jsondata.push([json[i].EmployeId, json[i].EmployeeName]);
}
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Resource Reports of BugTracker'
},
plotOptions: {
pie: {
showInLegend: true,
animation: false,
allowPointSelect: true,
cursor: 'pointer'
}
},
legend: {
enabled: true
},
series: [{
type: 'pie',
data: jsondata
}]
});
});
});
</script>

Answer 2

Regardless of what type of data you have, creating a pie chart is fairly straightforward. See a working example here: http://livecoding.io/3437833
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
plotOptions: {
pie: {
animation: false,
allowPointSelect: true,
cursor: 'pointer'
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});