Как загрузить данные из JSON в Highchart?

Question

my Json выглядит так:

[{"1332879360000.0": 300.0, "1332797760000.0": 353.0,

"1332799320000.0": 358.0, "1332879780000.0": 302.0, 

"1332800160000.0": 359.0, "1332880200000.0": 299.0, 

"1332880620000.0": 298.0, "1332881040000.0": 301.0, 

"1332881460000.0": 402.0, "1332880020000.0": 330.0, 

"1332882300000.0": 466.0, "1332796620000.0": 519.0, 

"1332800520000.0": 447.0, "1332797460000.0": 359.0, 

"1332801000000.0": 442.0}]

И я хочу показать эти данные в Highchart, с осью X в формате даты,

("1332801000000.0" in JSON), а ось Y - это данные (300.0 in JSON),

как точка.

Я заметил, что на Highchart.com есть демоверсия, и она запускает живые данные. Я копирую это, но я не хочу показывать в живую. Просто покажите эти точки сразу и составьте график. Любое решение? Я не очень знаком с JavaScript. Но я думаю, что это может использовать тот же метод.

<script type="text/javascript">
    var chart; // global

    /**
     * Request data from the server, add it to the graph and set a timeout to request again
     */
    function requestData() {
        $.ajax({
            url: '/get_data', 
            success: function(point) {
                var series = chart.series[0],
                    shift = series.data.length > 20; // shift if the series is longer than 20

                // add the point
                chart.series[0].addPoint(eval(point), true, shift);


                // call it again after one second
                setTimeout(requestData, 5000);  
            },
            cache: false
        });
    }

    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'test',
                defaultSeriesType: 'spline',
                events: {
                    load: requestData
                }
            },
            title: {
                text: 'Live random data'
            },
            xAxis: {
                type: 'datetime',
                tickPixelInterval: 150,
                maxZoom: 20 * 1000
            },
            yAxis: {
                minPadding: 0.2,
                maxPadding: 0.2,
                title: {
                    text: 'Value',
                    margin: 80
                }
            },
            series: [{
                name: 'Random data',
                data: []
            }]
        });



    });
    </script>

Answer 1

Я не уверен, что понял ваш вопрос .... поэтому, если я неправильно понял, пожалуйста, исправьте меня.

Вы можете просто скопировать your json data в файл с именем example.json и затемВаш запрос ajax делает следующее:

function requestData() {
    $.ajax({
        url: './example.json',  // depending which directory you save your file
        // the other code
  });
};

Answer 2

Вот минимальный рабочий пример решения.Вы можете проанализировать ваш объект данных, используя Object.keys и Array.prototype.map, в конце вы хотите отсортировать массив данных с помощью Array.prototype.sort.

const json = [{
  "1332879360000.0": 300.0,
  "1332797760000.0": 353.0,
  "1332799320000.0": 358.0,
  "1332879780000.0": 302.0,
  "1332800160000.0": 359.0,
  "1332880200000.0": 299.0,
  "1332880620000.0": 298.0,
  "1332881040000.0": 301.0,
  "1332881460000.0": 402.0,
  "1332880020000.0": 330.0,
  "1332882300000.0": 466.0,
  "1332796620000.0": 519.0,
  "1332800520000.0": 447.0,
  "1332797460000.0": 359.0,
  "1332801000000.0": 442.0
}]

const options = {
  xAxis: { type: 'datetime' },
  series: [{
    // Get array of keys from your json object
    data: Object.keys(json[0])
      // Map your keys to arrays with x and y values
      .map((key) => [Number(key), json[0][key]])
      // Sort your data
      .sort((a, b) => a[0] - b[0]),
  }]
}

const chart = Highcharts.chart('container', options);

Пример: https://jsfiddle.net/33hd8jog/

[EDIT]

Я также создал пример использования выборки данных с сервера:

const url = 'https://rawgit.com/stpoa/7d44ff0db61515dae80ad021b7c6c01a/raw/800735764d6596512a5fbc69acad019ed0416d8f/data.json'

window.fetch(url).then(response => response.json()).then(json => {
  const options = {
    xAxis: { type: 'datetime' },
    series: [{
      // Get array of keys from your json object
      data: Object.keys(json[0])
        // Map your keys to arrays with x and y values
        .map((key) => [Number(key), json[0][key]])
        // Sort your data
        .sort((a, b) => a[0] - b[0]),
    }]
  }

  const chart = Highcharts.chart('container', options)
})

Пример в реальном времени: https://jsfiddle.net/gxb6j2tz/

Answer 3

Я сделал это в javascript с помощью JSON ..

"onResultHttpService": function (result, properties) {

            var json_str = Sys.Serialization.JavaScriptSerializer.deserialize(result);
            var data = [];
            var cat = [];

            var categoryField = properties.PodAttributes.categoryField;
            var valueField = properties.PodAttributes.valueField;
            for (var i in json_str) {
                var serie = new Array(json_str[i][categoryField], json_str[i][valueField]);
                var tmpCat = new Array(json_str[i][categoryField]);
                data.push(serie);
                cat.push(tmpCat);
            }
            //cat = 'Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'

            chart = new Highcharts.Chart({
                chart: {
                    renderTo: properties.id,
                    type: 'column'
                },
                title: {
                    text: ''
                },
                subtitle: {
                    text: ''
                },
                xAxis: {
                    categories: cat
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: ''
                    }
                },
                legend: {
                    layout: 'vertical',
                    backgroundColor: '#FFFFFF',
                    align: 'left',
                    verticalAlign: 'top',
                    x: 100,
                    y: 70,
                    floating: true,
                    shadow: true
                },
                tooltip: {
                    formatter: function () {
                        return '' +
                    this.x + ': ' + this.y + ' mm';
                    }
                },
                plotOptions: {
                    column: {
                        pointPadding: 0.2,
                        borderWidth: 0
                    }
                },
                series: [{ data: data}]
            });


        }

    };

Answer 4

попробуйте

}
// Set the JSON header
header("Content-type: text/json");

// The x value is the current JavaScript time, which is the Unix time multiplied by       1000.
$x = time() * 1000;
$y = rand(0,100) ; 
mysql_query("INSERT INTO `apak`.`mach_1` (`id`, `temp`, `date_time`) VALUES           (NULL,'".$y."', CURRENT_TIMESTAMP);") ; 


// Create a PHP array and echo it as JSON
$ret = array($x, $y);
echo json_encode($ret);
?>

теперь скрипт старшей диаграммы