Highcharts et format JSON

Question

Je possède ce code pour une requête dans un fichier appelé 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); 

les données JSON est dans ce format:

[{"UploadSpeed":"0.342153197182936","DownloadSpeed":"4.35602301750153","Latency":"110.290067528565","Jitter":"0.0333323723888251","PacketLoss":"0.164373075044556"}] 

Maintenant, je voudrais créer un graphique avec bibliothèque Highcharts comme celui-ci, le fichier est appelé 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: [] 

     }; 
}) 

Je veux passer j fils données directement à index.html.

Answer 1

J'ai fait quelque chose de similaire. La façon dont je l'ai fait est que j'ai créé le graphique dans un fichier sperate js et que j'ai simplement appelé le graphique en tant que fonction transmettant l'objet JSON en tant que variable. Voici un exemple d'un de mes scripts utilisé sur mon site. Dans votre cas, les étiquettes et les valeurs sont la même variable, donc l'itération de la boucle est différente, mais l'idée est toujours la même.

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 
    }] 
}); 
}