Trying to have Doughnut chart with dql result chartjs

Question

I have looked at few tutorials and searched online but couldn't figure out what i am missing. I have tried various possibility to make it work but no luck. Would really appreciate help with this as i am new to this.

$(document).ready(function () {
//  var ctx1 = $("#mycanvas");

 $.ajax({
  url:"http://localhost/multi000web/InspectionMenu.html",
    type: 'GET',
         dataType: 'json',
        success : function(data){

console.log(data);

            var Sitename =[];
            var CountOf =[];

            for (var i = 0; i < data.lenght ; i++){
                Sitename.push(data[i].Sitename);
                CountOf.push(data[i].CountOf);
            }

            var chartdata ={
                labels:Sitename,
                dataset: [
                   {
                   label: "Sitename",
               //    backgroundColor:["#F4A460","#2E8B57","#E0E0E0"],

                   data: [data]
                       }

                ]

            };

               //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) {

            }
 });



 });

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