2

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

3
  • How does your view look like? How have you tried to setup the pie chart? By the way your Index action does nothing with the result of the GetData method...
    – nemesv
    Aug 23, 2012 at 13:53
  • Are you using HighCharts or do you just want to create a pie chart? Asp.net has the ability to generate pie charts in MVC without needing a third party solution, and there are a ton of tutorial online on how to use it. Also as nemesv pointed out, var data = GetData(); is not doing anything. Aug 23, 2012 at 14:40
  • What information will be represented by each slice? Aug 23, 2012 at 15:48

2 Answers 2

6

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

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]
    ]
  }]
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.