I am trying different ways of rendering json data from mysql/php to Highcharts. So far I've been successful rendering bar charts using this approach but for some reason, I have not been able to render data in a pie chart.
One js file handles the AJAX call:
$(function () {
var select_program = program_type_php;
var select_year = '2016';
console.log ('pie_chart'+program_type_php);
$.ajax({
url: 'model/job_group_pie_chart.php',
data: {user: 2, select_program:select_program, select_year:select_year},
type: 'GET',
async: true,
dataType: "json",
success: function (year_2016) {
pie_chart_2016(year_2016);
console.log('data 2016 job groups'+year_2016);
}
});
Upon success, I call a function in another js file (in this example, 'pie_chart_2016' and pass it the data object.
Here's the other js file responsible for rendering the data into a Highchart:
function pie_chart_2016 (year_2016) {
console.log('year_2016'+year_2016);
$('#pie-chart1').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: ''
},
tooltip: {
pointFormat: '{series.name}: {point.percentage:.1f}%'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '{point.name}: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
},
showInLegend: true
},
series: year_2016
}
});
};
I have checked, and I do get valid json from my php file:
[{name:"Group1",y:829},{name:"Group2",y:9247},{name:"Group3",y:71}]
These are raw counts (829, 9247, 71) but when I was able to get a pie chart to render by inputting values manually, Highcharts calculated the percentages for me - nice!
I've also set up enough console.logs to know that my functions are being called, and that my data object is being processed.
Still, all I get is a blank panel, and 'highcharts.com' in the lower left hand corner, so the html is working too.
The approach I'm using works really well with bar charts, so I am stumped!
Thanks for any help you can provide.
No comments:
Post a Comment