如何推送数据以创建饼图-图表JS

Question

I have data from SQL in json code file (checked in Fiddler)

{"d":[{"__type":"Dashboards.Employee","name":"Test Hen","turnover":"1500000,0000","color":"#231F20"},{"__type":"Dashboards.Employee","name":"Test Bai","turnover":"130000,0000","color":"#FFC200"}]}

but i dont know, how to push them correctly in order to create pie chart

my ajax/javascript is here:

  $.ajax({
                   url: 'HelloService.asmx/GetEmployeeDetail',
                   contentType: 'application/json;charset=utf-8',
                   data: JSON.stringify({ month: number }),
                   dataType: 'json',
                   method: 'post',                     
                   success: OnSuccess_,
                   error: OnErrorCall_
               });

               function OnSuccess_(response) {


                   var aData = response.d;
                   var arr = [];
                   //var ctx = document.getElementById('pele').getContext('2d');
                   $.each(aData, function (inx, val) {
                       var obj = {};
                       obj.label = val.name;
                       obj.value = val.turnover;
                       obj.color = val.color;
                       arr.push(obj);
                   });
                   var ctx = $("#pele").get(0).getContext("2d");
                   var myPieChart = new Chart(ctx).Pie(arr);}


                   function OnErrorCall_(response) {
                   console.log(error);
                     }

                 });

             });

Am I missing something?

If i use static values (value, label, color) pie chart works without problem.
Thank you

Answer 1

I created the following FiddleJS for you: https://jsfiddle.net/cukyrh5h/1/

You need to replace the URL of the Ajax call with yours of course. You had some wrong syntax (too much braches in the end of your Snippet) and the API you were using was not working with ChartJS 2.4 anymore.

The code looks like the following:

$.ajax({
    url:"/echo/json/",
    data:data,
    type:"POST",
    success:OnSuccess_
});

function OnSuccess_(response) {
  var aData = response.d;
  var data = {
    labels: [],
    datasets: [{
      data: [],
      backgroundColor: []
    }]
  };

  $.each(aData, function (inx, val) {
    data.labels.push(val.name);
    data.datasets[0].data.push(val.turnover);
    data.datasets[0].backgroundColor.push(val.color);
  });

  var ctx = $("#pele").get(0).getContext("2d");
  var myPieChart = new Chart(ctx, {
    type: 'pie',
    data: data
  });
}

function OnErrorCall_(response) {
  console.log(error);
}

Answer 2

Ok, i found problem, why i cant see my Chart. Maybe it will be useful for another members. Data in Database (turnover was daclared as money, i changed it to int .... and it works)