CODEWITHSUNDEEP
jsonajaxlaravelhighcharts
Mohmd Ali
Mohmd Ali

Reputation: 55

Ajax highcharts PieChart not displaying data

Here is my code :

$.ajax({
url: 'dashboard/gender',
type: 'post',
async: true,
dataType: "json",
success: function (data) {
   visitorData(data);
}
});

function visitorData (data) {
$('#gender-pie').highcharts({
 chart: {
             plotBackgroundColor: null,
             plotBorderWidth: null,
             plotShadow: false,
             type: 'pie'
         },
         title: {
             text: 'Genders'
         },
         tooltip: {
             pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
         },
         plotOptions: {
             pie: {
                 allowPointSelect: true,
                 cursor: 'pointer',
                 dataLabels: {
                     enabled: false
                 },
                 showInLegend: true
             }
         },
series: data,
});
}

Here is the response : {"males":9,"females":2}

My controller is 200 ok. Passing data correctly . But data aren't biding inside my div . Title is displayed correctly .

Upvotes: 0

Views: 312

Answers (1)

Dr. Cool
Dr. Cool

Reputation: 3721

Your JSON formatting for the series data is incorrect. It should be formatted like this:

series: [{
    data: [{
        name: 'Males',
        y: 9
    }, {
        name: 'Females',
        y: 2
    }]
}]

Working JSFiddle example

Upvotes: 1

Related Questions