Putting data from a database into highcharts using $.getJSON - highcharts

Question

I'm having some problems with $.getJSON, I really need some help because I don't know how to solve the problem and I've been stuck here for days. This is the js file that should generate highcharts when selecting a select option in HTML:
$(document).ready(function() {
$("#paese").change(function(){
var seriesOptions = [];
$.getJSON("prova.php", function(data) {
seriesOptions = data;
});
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
spacingLeft: 20,
borderWidth: 1
},
....
series: [{
name: 'Italia',
data: seriesOptions
}],
Is there anything wrong in the first part? When I select an option, it seems like highcharts don't get the php file, but I'm pretty sure it's correct, here it is(PHP file):
<?PHP
header("Content-Type: application/json; charset=UTF-8");
$conn = mysql_connect("localhost", "root");
$paese = null;
if(isset($_GET['paese'])) $paese = $_GET['paese'];
$ok = mysql_select_db("liberta", $conn);
$response = array();
$sql="SELECT `valori`.Punteggio FROM `valori` INNER JOIN `nazioni` ON `valori`.Nazione
= `nazioni`.ID WHERE `nazioni`.Nome = '$paese'";
$res=mysql_query($sql);
while($record=mysql_fetch_row($res)){
$response[] = intval("$record[0]");
}
mysql_close($conn);
print(json_encode($response));
I'm trying to get the data from a database I created with PHPmyadmin and put them directly into highcharts, but it doesn't work. I'd be very pleased if you could help me, also because this is is an exam I have to sit. Thank you very much.

Answer 1

I advice to familair with article about preprocessing data http://docs.highcharts.com/#preprocessing.
You need to have strucuture like:
{
data:[1,2,3]
}
Try to replace
while($record=mysql_fetch_row($res)){
$response[] = intval("$record[0]");
}
with
while($record=mysql_fetch_row($res)){
$response['data'][] = intval($record[0]);
}

Answer 2

Your problem is with the javascript part. When you call $.getJSON, the callback you provide will be called asynchronously when the server responds. Howether in your code you are calling the Highcharts() constructor immediately in a synchronous way. At the point its called the seriesOption variable still equals to []. Try calling the constructor from the callback like this:
$.getJSON("prova.php", function(data) {
var chart1 = new Highcharts.Chart(....
series: [{
name: 'Italia',
data: data}])});