Dynamic column based highcharts feeding data with jquery and php - php

Question

I am trying to build column based highcharts, and here is my code in jquery:
var options = {
chart: {
renderTo: 'container',
type: 'column'
},
credits: {
enabled: false
},
title: {
text: 'PCP Histogram',
x: -20
},
xAxis: {
categories: [{}]
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
tooltip: {
formatter: function() {
var s = '<b>'+ this.x +'</b>';
$.each(this.points, function(i, point) {
s += '<br/>'+point.series.name+': '+point.y;
});
return s;
},
shared: true
},
series: [{},{}]
};
$.ajax({
url: "file.php",
type: "post",
dataType: "json",
success: function(data){
options.xAxis.categories = data.categories;
options.series[0].name = 'Avg1';
options.series[0].data = data.avg1;
options.series[1].name = 'Avg2';
options.series[1].data = data.avg2;
var chart = new Highcharts.Chart(options);
And I getting the data from file php like this:
file.php
$graph_data = array('categories'=>$categories, 'avg1'=>$avg, 'avg2'=>$avg);
print json_encode($graph_data, JSON_NUMERIC_CHECK);
It is working fine with two columns per category,
What I want now is: the graph_data can have n number of avg datas,
so basically it will be n number of columns.
$graph_data = array('categories'=>$categories, 'avg1'=>$avg1, ... 'avgn'=>$avgn);
When I do it manually it works, but I will not know how many of them will be there, so I want the code to do i.
Any idea how I can do it?
Any help appreciated.

Answer 1

make an array of avg instead of having avg1, avg2 etc....
$graph_data = array('categories'=>$categories, 'avgs'=>$array_of_avgs)
then in javascript side
success: function(data){
options.xAxis.categories = data.categories;
for(var i in data.avgs){
options.series[i].name = 'Avg'+i;
options.series[i].data = data.avgs[i];
}
var chart = new Highcharts.Chart(options);
And everything will be fine