简体   繁体   中英

How to push data to create pie chart - chart js

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

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

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)

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM