Highcharts converting a column chart to a pie chart - highcharts

Question

After reading many posts and tutorials concerning pie charts I am totally stuck. I have a column chart which work fine but I need to convert/change it to a pie chart.
The data for the chart comes from a data table via a query and is returns in Json format.
[{"name":"Month","data":["Jun"]},{"name":"percent","data":[55.68]},{"data":[20.45]},{"data":[7.95]},{"data":[15.91]}]
The big issue I am having is using the json result as I do when using a column chart.
My current column chart:
$(function () {
var categories=[];
var data4 =[];
var chart;
$(document).ready(function() {
$.getJSON("../charts/1-2-4-overall_month_chart.php?From=<?php echo $StartDate;?>&To=<?php echo $EndDate;?>", function(json) {
$.each(json,function(i,el) {
if (el.name=="Month")
categories = el.data;
else data4.push(el);
});
$('#container1').highcharts({
chart: {
renderTo: 'container',
type: 'column',
marginTop: 25,
marginRight: 25,
marginBottom: 25,
plotBackgroundColor: '#FCFFC5'
},
title: {
text: '',
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: categories,
labels: {
enabled: true
}
},
yAxis: {
endOnTick: false,
max:101,
showFirstLabel: false,
lineColor:'#999',
lineWidth:1,
tickColor:'#666',
tickWidth:1,
tickLength:2,
tickInterval: 10,
gridLineColor:'#ddd',
title: {
text: 'Percentage %',
style: {
fontFamily: 'Tahoma',
color: '#000000',
fontWeight: 'bold',
fontSize: '10px'
}
},
plotLines: [{
color: '#808080'
}],
labels: {
align: 'left',
x: 0,
y: -2
}
},
legend: {
enabled: false,
itemStyle: {
font: '11px Trebuchet MS, Verdana, sans-serif',
color: '#000000'
},
itemHoverStyle: {
color: '#000000'
},
itemHiddenStyle: {
color: '#444'
}
},
colors: [
'#ff0000',
'#f49004',
'#3abf05',
'#8b8c8a',
],
plotOptions: {
column: {
colorByPoint: false
},
series: {
pointPadding: 3.25,
cursor: 'pointer',
pointWidth:30,
point: {
events: {
click: function() {
window.location.href = "1-4-detractors_chart_month.php";
}
}
},
legendIndex:0,
dataLabels: {
enabled: true,
//rotation: -90,
color: '#000000',
align: 'right',
cursor: 'pointer',
format: '{point.y:.2f}', // one decimal
y: -20, // 10 pixels down from the top
style: {
textShadow: false,
fontSize: '8px',
fontFamily: 'Verdana, sans-serif'
}
}
}
},
tooltip: {
enabled: false,
},
navigation: {
buttonOptions: {
verticalAlign: 'top',
y: -10
}
},
credits: {
enabled: false
},
series: data4,
lang: {
noData: "No data for your date<br /> selection"
},
noData: {
style: {
fontWeight: 'bold',
fontSize: '12px',
color: '#303030'
}
},
});
});
});
});

Answer 1

check Basic pie for more info. I have made some change in code specially in processing data for pie chart from ajax response. Check for the comments and I have also commented out code which are not required by pie chart
$(function() {
var categories = [];
var data4 = [];
var chart;
$(document).ready(function() {
/* $.getJSON("../charts/1-2-4-overall_month_chart.php?From=<?php echo $StartDate;?>&To=<?php echo $EndDate;?>", function(json) {
$.each(json,function(i,el) {
if (el.name=="Month")
categories = el.data;
else data4.push(el);
}); */
var data = [{
"name": "Month",
"data": ["Jun"]
}, {
"name": "percent",
"data": [55.68]
}, {
"data": [20.45]
}, {
"data": [7.95]
}, {
"data": [15.91]
}]
$.each(data, function(i, el) {
if (el.name == "Month")
categories = el.data;
//below is some change check https://www.highcharts.com/demo/pie-basic
else data4.push({
name: el.name,
y: el.data[0]
});
});
//console.log(JSON.stringify(data4))
$('#container').highcharts({
chart: {
renderTo: 'container',
type: 'pie', //change to pie
marginTop: 25,
marginRight: 25,
marginBottom: 25,
plotBackgroundColor: '#FCFFC5'
},
title: {
text: '',
},
subtitle: {
text: '',
x: -20
},
/* xAxis: {
categories: categories,
labels: {
enabled: true
}
},
yAxis: {
endOnTick: false,
max: 101,
showFirstLabel: false,
lineColor: '#999',
lineWidth: 1,
tickColor: '#666',
tickWidth: 1,
tickLength: 2,
tickInterval: 10,
gridLineColor: '#ddd',
title: {
text: 'Percentage %',
style: {
fontFamily: 'Tahoma',
color: '#000000',
fontWeight: 'bold',
fontSize: '10px'
}
},
plotLines: [{
color: '#808080'
}],
labels: {
align: 'left',
x: 0,
y: -2
}
},*/
legend: {
enabled: false,
itemStyle: {
font: '11px Trebuchet MS, Verdana, sans-serif',
color: '#000000'
},
itemHoverStyle: {
color: '#000000'
},
itemHiddenStyle: {
color: '#444'
}
},
colors: [
'#ff0000',
'#f49004',
'#3abf05',
'#8b8c8a',
],
plotOptions: {
/* column: {
colorByPoint: false
},*/
series: {
pointPadding: 3.25,
cursor: 'pointer',
pointWidth: 30,
point: {
events: {
click: function() {
window.location.href = "1-4-detractors_chart_month.php";
}
}
},
legendIndex: 0,
dataLabels: {
enabled: true,
//rotation: -90,
color: '#000000',
align: 'right',
cursor: 'pointer',
format: '{point.y:.2f}', // one decimal
y: -20, // 10 pixels down from the top
style: {
textShadow: false,
fontSize: '8px',
fontFamily: 'Verdana, sans-serif'
}
}
}
},
tooltip: {
enabled: false,
},
navigation: {
buttonOptions: {
verticalAlign: 'top',
y: -10
}
},
credits: {
enabled: false
},
series: [{
data: data4
}],
lang: {
noData: "No data for your date<br /> selection"
},
noData: {
style: {
fontWeight: 'bold',
fontSize: '12px',
color: '#303030'
}
},
});
});
//});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>