Highcharts and json format - highcharts

Question

I have this code for a query in a file called querytojson.php:
if(!$query = #pg_query("SELECT AVG(\"UploadSpeed\") AS \"UploadSpeed\",
AVG(\"DownloadSpeed\") AS \"DownloadSpeed\",
AVG(\"Latency\") AS \"Latency\",
AVG(\"Jitter\") AS \"Jitter\",
AVG(\"PacketLoss\") AS \"PacketLoss\" FROM \"ZipPerformance\" "))
die("<br>Errore nella query: " . pg_last_error($query));
while($row = pg_fetch_assoc($query)){
// aggiungo all'array
$risultati[] = $row;
}
// stampo a video i risultati formattati secondo la sintassi di JSON
echo json_encode($risultati);
the json data is in this format:
[{"UploadSpeed":"0.342153197182936","DownloadSpeed":"4.35602301750153","Latency":"110.290067528565","Jitter":"0.0333323723888251","PacketLoss":"0.164373075044556"}]
Now I'd want to create a graph with Highcharts library like this, the file is called index1.html:
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'column'
},
title: {
text: 'HOBBIT'
},
tooltip: {
},
labels: {
html: 'index.html'
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Velocità di connessione'
}
},
series: []
};
})
I'd want to pass json data directly to index.html.

Answer 1

I've done somthing similar to this. The way i did it was I created the chart in a sperate js file and just called the chart as a function passing in the JSON object as a variable. This is an example of one of my scripts in use on my site. In your case the labels and values are the same variable so the loop iteration is different, but the idea is still the same.
var chart;
function pieChart(id, values, labels, animate){
if (animate === undefined ){
animate = true;
}
var arrays = new Array();
for (i=0;i<values.length;i++) {
arrays[i] = [labels[i], values[i]];
}
chart = new Highcharts.Chart({
chart: {
renderTo: id,
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
credits: {
enabled: false
},
title: {
text: 'Event Occurrence',
style: {
color: '#000000'
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
}
}
},
series: {
animation: animate
}
},
series: [{
type: 'pie',
name: 'Probability',
data: arrays
}]
});
}