Chartjs-Trying to have Doughnut chart with dql result chartjs

by

1👍

✅

Assuming, your response json (format) looks somewhat like this …

[{"Sitename": "Google", "CountOf": 75}, {"Sitename": "Facebook", "CountOf": 35}]

You need to generate and use the labels and data array properly to make the doughnut chart work.

Here is how the doughnut chart should be created …

$(document).ready(function() {
   $.ajax({
      url: "https://istack.000webhostapp.com/json/t3.json",
      type: 'GET',
      dataType: 'json',
      success: function(data) {
         var Sitename = [];
         var CountOf = [];
         
         data.forEach(function(e) {
            Sitename.push(e.Sitename);
            CountOf.push(e.CountOf);
         })
         
         var chartdata = {
            labels: Sitename,
            datasets: [{
               label: "Sitename",
               data: CountOf,
               backgroundColor: ["#F4A460", "#2E8B57"],
            }]
         };
         
         //options
         var options = {
            responsive: true,
            title: {
               display: true,
               position: "top",
               text: "Doughnu Chart",
               fontSize: 18,
               fontColor: "#111"
            },
            legend: {
               display: true,
               position: "bottom",
               labels: {
                  fontColor: "#333",
                  fontSize: 16
               }
            }
         };
         
         //get the doughnut chart canvas
         var ctx1 = $("#mycanvas");
         //create Chart class object
         var chart1 = new Chart(ctx1, {
            type: "doughnut",
            data: chartdata,
            options: options
         });
      },
      error: function(data) {}
   });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="mycanvas"></canvas>

Leave a comment