Получить данные json в точечную диаграмму Highcharts

Я не могу заставить Highcharts отображать точечный график из 2 серий. На самом деле, график даже не отображается. Пожалуйста, помогите мне определить, что я делаю неправильно. Я не могу найти пример графика рассеяния, и я очень новичок в этом. У меня есть данные json из файла php, который выглядит так:

[[65,44],[66,37],[67,42],[68,55],[65,50],[65,41],[65,41],[68,41],[69,42],[70,47],[69,55],[67,45],[67,49],[67,53],[67,49],[68,51],[68,55],[68,57],[70,53],[69,66],[68,54],[69,52],[68,48]][[75,36],[72,42],[75,44],[69,56],[72,40],[73,37],[77,34],[77,40],[74,50],[77,45],[77,43],[75,47],[73,52],[73,50],[75,44],[72,54],[71,57],[72,57],[74,55],[74,54],[75,47],[78,45],[75,43]]

Это должны быть две серии в формате (x,y). Я хочу изобразить их на точечной диаграмме в HighCharts. Мой код HighCharts:

  <script type="text/javascript">
$(function () {
    var chart;
    $(document).ready(function() {
        $.getJSON("comfortgb1b.php", function(json) {

               chart = new Highcharts.Chart({
                    chart: {
                    renderTo: 'container4',
                    type: 'scatter',
                    marginRight: 175,
                    marginBottom: 50
                },
                title: {
                    text: 'Comfort Level',
                    x: -20 //center
                },
                subtitle: {
                    text: '',
                    x: -20
                },
                xAxis: {
                    title: {
                        enabled: true,
                        text: 'Temp (F)'
                    },
                    min: 60,
                    max: 85,
                    startOnTick: true,
                    endOnTick: true,
                    showLastLabel: true
                },
                yAxis:  {
                    title: {
                        text: 'Humidity (%RH)'
                    },                  
                    min: 30,
                    max: 100
                },                
                plotOptions: {
                scatter: {
                    marker: {
                        radius: 5,
                        states: {
                            hover: {
                                enabled: true,
                                lineColor: 'rgb(100,100,100)'
                            }
                        }
                    },
                    states: {
                        hover: {
                            marker: {
                                enabled: false
                            }
                        }
                    },
                     tooltip: {
                        headerFormat: '<b>{series.name}</b><br>',
                        pointFormat: '{point.x} F, {point.y} %RH'
                    }
                },
                 series: [{
                    name: 'Night',
                    data: json(1)
                               }, {
                                    name: 'Night',
                    data: json(2)
                     });
        });

    });

});
        </script>

Заранее спасибо!

Файл php, который создает данные json, приведен ниже. Как бы я разделил эти массивы запятой?

  $result1 = mysql_query("SELECT round(AVG(d_internal_duct_return),0) AS 'avg_return', round(AVG(d_evap_pre_humidity),0) AS 'avg_hum' FROM pheom.pheom_gb WHERE timestamp between subdate(curdate(), interval 2 month) and curdate()  AND HOUR(Timestamp) NOT BETWEEN 9 AND 22 GROUP BY DAY(Timestamp) ORDER BY Timestamp");
$ret1 = array();
while($item = mysql_fetch_array($result1)) {
    $avg_return1 = $item['avg_return'];
    $avg_hum1 = $item['avg_hum'];
    $ret1[] = array($avg_return1,$avg_hum1);
}

$result2 = mysql_query("SELECT round(AVG(d_internal_duct_return),0) AS 'avg_return', round(AVG(d_evap_pre_humidity),0) AS 'avg_hum' FROM pheom.pheom_gb WHERE timestamp between subdate(curdate(), interval 2 month) and curdate()  AND HOUR(Timestamp) BETWEEN 9 AND 22 GROUP BY DAY(Timestamp) ORDER BY Timestamp");
$ret2 = array();
while($item = mysql_fetch_array($result2)) {
    $avg_return2 = $item['avg_return'];
    $avg_hum2 = $item['avg_hum'];
    $ret2[] = array($avg_return2,$avg_hum2);
}
echo json_encode($ret1, JSON_NUMERIC_CHECK);
echo json_encode($ret2, JSON_NUMERIC_CHECK);

json php highcharts scatter
person user2686567    schedule 15.08.2013    source источник
comment
этот PHP-скрипт даст вам только 1 серию. Вы уверены, что он дает тот же результат, что вы упомянули в начале? Вы запускаете скрипт дважды?   -  person fijas    schedule 15.08.2013
comment
Да, прости. Я вставил неправильный. См. исправленную версию выше.   -  person user2686567    schedule 15.08.2013

Ответы (2)


arrow_upward
2
arrow_downward

Не уверен в этом, но на первый взгляд я думаю, что массив, возвращаемый из файла php, требует дополнительной квадратной скобки снаружи, чтобы его можно было проанализировать как правильный json. В настоящее время это:

[[65,44],[66,37]..][[75,36],[72,42]..]

Насколько я знаю, это всего два массива. Что вы хотите, так это заключить эти массивы в массив. Попробуйте изменить это на:

[[[65,44],[66,37]..],[[75,36],[72,42]..]]

То есть добавьте дополнительную квадратную скобку снаружи и разделите два массива запятой.

Кроме того, здесь:

series: [{
        name: 'Night',
        data: json(1)
    }, {
        name: 'Night',
        data: json(2)
});

json(1) и json(2) интерпретируются как вызовы функций. Вместо этого вы должны использовать:

series: [{
        name: 'Night',
        data: json[0]
    }, {
        name: 'Night',
        data: json[1]
});

РЕДАКТИРОВАТЬ ---- Отредактировано в соответствии с правками OP

Также по запросу, чтобы добавить запятые и правильное форматирование, файл php можно изменить в последних двух строках следующим образом:

echo "[".json_encode($ret1, JSON_NUMERIC_CHECK).",";
echo json_encode($ret2, JSON_NUMERIC_CHECK)."]";
person fijas    schedule 15.08.2013
comment
Замечательно! Благодарю вас! Теперь последняя проблема. как мне отредактировать файл Highcharts, чтобы получить эти данные? Я использовал скрипку Джека, и она работает. Но когда я пытаюсь вытащить данные json из файла php, это не работает. - person user2686567; 15.08.2013

arrow_upward
1
arrow_downward

У вас есть несколько вещей, доставляющих вам проблемы. См. эту скрипту: http://jsfiddle.net/nbwN9/1/

Во-первых, я не думаю, что ваш json имеет правильный формат для сюжета из 2 серий. У вас есть два массива данных, которые просто соприкасаются друг с другом, а не в другом массиве. Связанная скрипка исправляет это (и помещает ее в переменную, поскольку вызов getJSON() не будет работать в jsFiddle). Каждая точка представляет собой массив координат (x, y). Каждая серия.данные представляет собой массив точек. Ваш json должен быть массивом массивов series.data. Итак, мы рассматриваем вложенные массивы глубиной 3.

Во-вторых, у вас, похоже, неверный набор параметров диаграммы. Наиболее примечательным является то, что ваш узел серии (с именем и данными) находится внутри вашего узла plotOptions, когда он должен быть за его пределами. И этот последовательный узел не завершен должным образом.

В-третьих, как только вы правильно отформатируете данные json и параметры диаграммы, доступ к массиву json будет осуществляться следующим образом:

    series: [{
        name: 'Night',
        data: json[0]
    }, {
        name: 'Day',
        data: json[1]
    }]

Массив основан на 0 (поэтому первая запись будет проиндексирована с 0, вторая запись с 1 и т. д.), и доступ к нему осуществляется с использованием квадратных скобок [], а не скобок ()

Извините, я переименовал одну из ваших серий в «День», чтобы увидеть разницу в диаграмме.

Что касается скрипта PHP... попробуйте следующее:

  $result1 = mysql_query("SELECT round(AVG(d_internal_duct_return),0) AS 'avg_return', round(AVG(d_evap_pre_humidity),0) AS 'avg_hum' FROM pheom.pheom_gb WHERE timestamp between subdate(curdate(), interval 2 month) and curdate()  AND HOUR(Timestamp) NOT BETWEEN 9 AND 22 GROUP BY DAY(Timestamp) ORDER BY Timestamp");

  $ret1 = array();
  while($item = mysql_fetch_array($result1)) {
      $avg_return1 = $item['avg_return'];
      $avg_hum1 = $item['avg_hum'];
      $ret1[] = array($avg_return1,$avg_hum1);
  }

  $result2 = mysql_query("SELECT round(AVG(d_internal_duct_return),0) AS 'avg_return', round(AVG(d_evap_pre_humidity),0) AS 'avg_hum' FROM pheom.pheom_gb WHERE timestamp between subdate(curdate(), interval 2 month) and curdate()  AND HOUR(Timestamp) BETWEEN 9 AND 22 GROUP BY DAY(Timestamp) ORDER BY Timestamp");

  $ret2 = array();
  while($item = mysql_fetch_array($result2)) {
      $avg_return2 = $item['avg_return'];
      $avg_hum2 = $item['avg_hum'];
      $ret2[] = array($avg_return2,$avg_hum2);
  }

  echo json_encode(array($ret1,$ret2), JSON_NUMERIC_CHECK);
person Jack.R.Abbit    schedule 15.08.2013
comment
Спасибо. Я разместил свой код json php выше. Можете ли вы помочь мне получить запятую между массивами? - person user2686567; 15.08.2013