title: using ajax populate dynamic piechart from chartjs
body: <p>Hello there stack overflow programmers, i have a question related to getting data from my database using ajax and display it in piechart from chartjs library. Now i am trying to make dynamic data to be accepted by format within piechart format. </p>
  
  <p>Here is my ajax and its response: ( still it doesn't show my piegraph.  i dont know why)</p>
  
  <pre><code>    function getpieclinic() {
      $.ajax({
              type: "POST",
              url: siteurl+"patients_report/piedataclinic",
              contentType: "application/json; charset=utf-8",
              dataType: "json",
              success: OnSuccess_,
              error: OnErrorCall_
      });
  
      function OnSuccess_(response) {
        // alert("hi");
              var aData = response.d;
              var arr = [];
              $.each(aData, function (inx, val) {
                  var obj = {};
                  obj.color = val.color;
                  obj.value = val.value;
                  obj.label = val.label;
                  arr.push(obj);
              });
              var ctx = $("#myChart").get(0).getContext("2d");
              var myPieChart = new Chart(ctx).Pie(arr);
          }
  
          function OnErrorCall_(response) {}
  }
  </code></pre>
  
  <p>the response of my ajax is these:</p>
  
  <pre><code>[{"clinic_name":"Clinic 1","total_checked_up":"4"},{"clinic_name":"Clinic 2","total_checked_up":"0"},{"clinic_name":"Clinic 3","total_checked_up":"0"},{"clinic_name":"Clinic 4","total_checked_up":"0"}]
  </code></pre>
  
  <p>now, i want to make a dynamic format of piechart chartjs data format to be able to display it. this is the default format from the example:</p>
  
  <pre><code>var pieChartCanvas = $("#pieChart").get(0).getContext("2d");
      var pieChart = new Chart(pieChartCanvas);
      var PieData = [
        {
          value: 700,
          color: "#f56954",
          highlight: "#f56954",
          label: "Chrome"
        },
        {
          value: 500,
          color: "#00a65a",
          highlight: "#00a65a",
          label: "IE"
        },
        {
          value: 400,
          color: "#f39c12",
          highlight: "#f39c12",
          label: "FireFox"
        },
        {
          value: 600,
          color: "#00c0ef",
          highlight: "#00c0ef",
          label: "Safari"
        },
        {
          value: 300,
          color: "#3c8dbc",
          highlight: "#3c8dbc",
          label: "Opera"
        },
        {
          value: 100,
          color: "#d2d6de",
          highlight: "#d2d6de",
          label: "Navigator"
        }
      ];
      var pieOptions = {
        //Boolean - Whether we should show a stroke on each segment
        segmentShowStroke: true,
        //String - The colour of each segment stroke
        segmentStrokeColor: "#fff",
        //Number - The width of each segment stroke
        segmentStrokeWidth: 2,
        //Number - The percentage of the chart that we cut out of the middle
        percentageInnerCutout: 50, // This is 0 for Pie charts
        //Number - Amount of animation steps
        animationSteps: 100,
        //String - Animation easing effect
        animationEasing: "easeOutBounce",
        //Boolean - Whether we animate the rotation of the Doughnut
        animateRotate: true,
        //Boolean - Whether we animate scaling the Doughnut from the centre
        animateScale: false,
        //Boolean - whether to make the chart responsive to window resizing
        responsive: true,
        // Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
        maintainAspectRatio: true,
        //String - A legend template
        legendTemplate: "&lt;ul class=\"&lt;%=name.toLowerCase()%&gt;-legend\"&gt;&lt;% for (var i=0; i&lt;segments.length; i++){%&gt;&lt;li&gt;&lt;span style=\"background-color:&lt;%=segments[i].fillColor%&gt;\"&gt;&lt;/span&gt;&lt;%if(segments[i].label){%&gt;&lt;%=segments[i].label%&gt;&lt;%}%&gt;&lt;/li&gt;&lt;%}%&gt;&lt;/ul&gt;"
      };
      //Create pie or douhnut chart
      // You can switch between pie and douhnut using the method below.
      pieChart.Doughnut(PieData, pieOptions);
  </code></pre>