Highcharts Column Chart Not Displaying Dynamic Values - php

Question

Hi I need to create one dynamic column chart. But i am not able to put my values to the data field of value how can i do that
function getusercategorygraph()
{
$.getJSON('config/alumniusermodes.php',function(data){
// Create a new array
var finaldata = [];
var chart;
// Perform your operations
$.each(data, function( index, value ) {
// Create a new hash
var currentItem = {}
// Create the proper values in your hash
$.each(value, function( index, value ) {
currentItem[index] = value;
});
finaldata += currentItem;
});
var chart = new Highcharts.Chart({
chart: {
renderTo : 'user-count',
type: 'column',
},
title: {
text: 'Alumni Users By Category Analytics'
},
xAxis: {
color:'#0077CC',
//type: 'category',
categories: []
},
yAxis: {
title: {
text: 'Total Number of Alumni Members'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y} Members'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y} Members</b><br/>'
},
series: [{
name: "Alumni Type",
colorByPoint: true,
//data: [{ name : 'Standard', y : 52, },{ name : 'Silver', y : 24, },{ name : 'Gold', y : 20, },{ name : 'Platinum', y : 6, },]
//data: [{ name : 'Standard', y : 52, },{ name : 'Silver', y : 24, },{ name : 'Gold', y : 20, },{ name : 'Platinum', y : 6, },]
data : finaldata,
}],
});
});
}
But the graph doesnt show anything. Whats wrong in this code. Please help.
this is the result from api that i got
[{"name":"Standard","y":"52"},{"name":"Silver","y":"24"},{"name":"Gold","y":"20"},{"name":"Platinum","y":"6"}]
Thanks in Advance

Answer 1

To get you started, on line 18, change
finaldata += currentItem;
to
finaldata.push({
name: currentItem.name,
y: parseFloat(currentItem.y)
});
See JSFilddle.
Edit: Used suggestions by Sebastian in comments. Thanks!

Answer 2

Here is the working version keeping the highchart code inside $.getJSON callback function.
I added following PHP back-end code to get highchart sample data.
$data[] = array('name' => 'Standard', 'y'=> 52);
$data[] = array('name' => 'Silver', 'y'=> 24);
$data[] = array('name' => 'Gold', 'y'=> 20);
$data[] = array('name' => 'Platinum', 'y'=> 6);
echo json_encode($data);
exit;
This data is nothing but giving me data to use in highchart. Following is the javascript call to get it functional.
getusercategorygraph();
function getusercategorygraph()
{
$.getJSON('http://<mydomain>/getdata.php',function(data){
var chart = new Highcharts.Chart({
chart: {
renderTo : 'container',
type: 'column',
},
title: {
text: 'Alumni Users By Category Analytics'
},
xAxis: {
color:'#0077CC',
//type: 'category',
categories: []
},
yAxis: {
title: {
text: 'Total Number of Alumni Members'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y} Members'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat:'<span style="color:{point.color}">{point.name}</span>:<b>{point.y}Members</b><br/>'
},
series: [{
name: "Alumni Type",
colorByPoint: true,
data: data
}],
});
});
}