Highcharts и формат JSON - PullRequest
Новая
       14

Highcharts и формат JSON

0 голосов
/ 29 марта 2012

У меня есть этот код для запроса в файле с именем 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);

данные json имеют следующий формат: 

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

Теперь я бы хотелсоздайте график с библиотекой Highcharts следующим образом, файл называется 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: []

        };
})

Я бы хотел передать данные json напрямую в index.html.

1 Ответ

0 голосов
/ 29 марта 2012

Я сделал что-то похожее на это.То, как я это сделал, я создал диаграмму в отдельном js-файле и просто вызвал диаграмму как функцию, передавая объект JSON как переменную.Это пример одного из моих скриптов, используемых на моем сайте.В вашем случае метки и значения являются одной и той же переменной, поэтому итерация цикла отличается, но идея все та же. 

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