I'm trying to create a Pie Graph with High charts. I get all the values from the database through PHP, as well as the series, which are send to jQuery through JSON in which I parse that JSON and get it to the function that creates the graph.
$query = [array('name'=>'SAP', 'id'=>48), array('name'=>'EIS', 'id'=>65), array('name'=>'P2P', 'id'=>84), array('name'=>'Portal Gift Card', 'id'=>92), array('name'=>'Tenants Survey', 'id'=>74), array('name'=>'Outros', 'id'=>17)];
$series = array('name' => 'Effort');
$seriesData = array();
foreach ($query as $data){
$rslt = $this->gm->getEffortApp($data['id']);
array_push($seriesData, array('name' => $data['name'], 'y' => $rslt));
}
$series['data'] = $seriesData;
echo json_encode($series, JSON_NUMERIC_CHECK);
This are the codes that get me the data and send it to the jQuery through JSON.
$(document).ready(function(){
var param = '<?=$graphdata['param']?>';
asyncCall('post', '?/graphAsync/getSeries/'+<?=$graphdata['graph_id']?>,{param: param}, 'text',function(data){ //returns the right array to populate the graph
var series = $.parseJSON(data);
setChartData($('#graph'+<?=$graphdata['id']?>), '<?=$graphdata['graph_type']?>', '<?=$graphdata['graph_title']?>', 'Teste', '<?=$graphdata['graph_titleY']?>', series);
});
});
This is the code that receives all the graph data and parses the JSON string.
function setChartData(elem, type, title, categories, titleY, series){
elem.highcharts({
chart: {
type: type
},
title: {
text: title
},
xAxis: {
categories: categories
},
yAxis: {
min: 0,
title: {
text: titleY
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.textColor) || 'white',
style: {
textShadow: '0 0 3px black'
}
}
},
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: series,
credits: {
enabled: false
}
});
}
This is the function that creates the graph.
The rest of the graph data comes from the controller load (CodeIgniter) and seems to be fine.
The output of the server (JSON string) is as follows:
[{"name":"SAP","y":9420.35},{"name":"EIS","y":2282.5},{"name":"P2P","y":218.5},{"name":"Portal Gift Card","y":203},{"name":"Tenants Survey","y":323},{"name":"Outros","y":1}]
And the input in the function of the series is something like this:
series=[object,object,object,object,object,object]
And each object is as follows:
object:[name:'something', y:*number*]
The graph loads empty, only with the title and the export button. For some reason I can't post images so that's why I didn't put any image of the graph output.
thanks in advance.
EDIT: here is the jsfiddle, although for some reason I can't get it to work the way it is in localhost. That's essentially what I'm doing, but instead i'm passing the arguments through PHP variables.