Qerjiuthn Qerjiuthn - 2 months ago 8
Javascript Question

HighCharts : 3D Pie Chart Not Displaying

Below is my code:

exec_dashboard_load_chart('exec_dashboard_gender_chart',response);

/**
* A function that loads a chart.
*/
function exec_dashboard_load_chart(id , data){
var myChart = Highcharts.chart(id, {
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 45,
beta: 0
}
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
series: data
});
}


The data variable contains the value below:

enter image description here

Here is my fiddle.

Why does my 3d chart doesnt display? I have found no error. I think there's something wrong with my data. Can someone point me, where am I missing?

Answer

Check out this Working Fiddle

function exec_dashboard_load_chart(id , data){      
var myChart = Highcharts.chart(id, {
    chart: {
        type: 'pie',
        options3d: {
           enabled: true,
           alpha: 45,
           beta: 0
        }
    },           
    tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            depth: 35,
            dataLabels: {
                enabled: true,
                format: '{point.name}'
            }
        }
    },
    series: [{
        type: 'pie',
        name: 'Browser share',
        data: data.data
    }]
});
}