How to add php data into highchart js file in php - php

Question

my code:
series: [{
name: 'Brands',
colorByPoint: true,
<?php
$models="SELECT * FROM purchase_info GROUP BY model_name";
$models_querry=mysql_query($models);
while($models_data=mysql_fetch_assoc($models_querry))
{
$model_name[]=$models_data['model_name'];
}
?>
data: [{
name: ['<?php echo join($model_name, ',') ?>'],
y: 56.33,
drilldown: 'Hero Honda'
}]
}],
In my project i'm using high charts, in that how can i add php data into that, i just collect all data and saved into one variable named as $model_name[], after that i pass the array value into data, but in that it will not spitted, all data's are echoed into single one.

Answer 1

Use ajax for that..see the script code
$.ajax({
type: "POST",
url: 'ajax.php',
success: function(data) {
a = jQuery.parseJSON(data);
i=0;
$.each( a.total_potential_score, function( key, val ) {
data1[i] = parseFloat(val);
i++;
});
rasterize_function(data1);
}
});
Ajax file look like this
$a[0] = "1";
$a[1] = "2";
$a1['total_potential_score'][0] = "1";
$a1['department_name'][0] = "aaaaa";
$a1['total_potential_score'][1] = "3";
$a1['department_name'][1] = "bbbbb";
echo json_encode($a1);
function for the highchart displayed here
function rasterize_function(data1) {
var seriesArray = [];
$.each( data1, function( key, val ) {
seriesArray.push({
name: "aaaa",
data: [val],
animation: false,
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
x: 4,
y: 10,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
});
});
$('#container').highcharts({
chart: {
type: 'column',
width: 700,
height: 400,
borderWidth: 0
},
title: {
text: 'sector',
align: 'left'
},
subtitle: {
text: ''
},
xAxis: {
categories: ['College, Personal Development and Career Scores'],
},
yAxis: {
min: 0,
title: {
text: 'Potential Score'
}
},
legend: {
layout: 'horizontal',
backgroundColor: '#FFFFFF',
verticalAlign: 'bottom',
x: 10,
y: 7,
floating: false,
shadow: true
},
tooltip: {
formatter: function() {
return ''+
this.x +': '+ this.y +' points';
}
},
plotOptions: {
column: {
animation: false,
pointPadding: 0.2,
borderWidth: 0
}
},
series:seriesArray
});
}