Tuesday, March 6, 2018

Highcharts pie charts served from AJAX call

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

plot explanation - Why did Peaches' mom hang on the tree? - Movies & TV

In the middle of the movie Ice Age: Continental Drift Peaches' mom asked Peaches to go to sleep. Then, she hung on the tree. This parti...