Проблема серии данных Highcharts с ajax / json и PHP

Question

Это моя первая просьба здесь, и я прочитал много других связанных постов по этой же проблеме, но я все еще застреваю и в значительной степени в моем уме остаюсь на этом ... Так что любая помощь очень оценили!

У меня есть следующий объект Highcharts на Page1.php, и я использую AJAX для получения данных из Page2.php при загрузке страницы, а также при изменении параметра раскрывающегося списка.

(усечено для удобства чтения):

$(document).ready(function() {

   var e = document.getElementById("selOption"); //<--- This is the dropdown
   var domText = e.options[0].text;
   var domID = e.options[e.selectedIndex].value;

   var options = {
      chart: {
         renderTo: 'linechart',
         type: 'line'
      },
      title: {
         text: 'Title for ' + domText
      },
      subtitle: {
         text: ''   
      },
      xAxis: {
         type: 'datetime',
         dateTimeLabelFormats: {
            month: '%b %e, %Y',
            year: '%Y'
         }
      },
      yAxis: {
         title: {
            text: 'Important Values'
         },
         reversed: true,
         min: 0,
         max: 100
      },
      tooltip: {
         formatter: function() {
                   return '<b>'+ this.series.name +'</b><br/>'+
               Highcharts.dateFormat('%b %e', this.x) +': '+ this.y;
         }
      },
      series: []

};

$.get('Page2.php?domID=' + domID,function(data) {
    $.each(data, function(key,value) {
        //var series = {};
        //series.name.push(value);
        //series.data.push([value]);
        options.series.push(data);
        //alert(data);
    });

    var linechart = new Highcharts.Chart(options);
});

});

Page2.php имеет следующую отправку json:

$sqlSelect = "SELECT Item1,Item2,Item3 FROM... ";
$result = mysql_query($sqlSelect);

while ($item = mysql_fetch_assoc($result)) {            
    $name = $item['Item1'];
    $date = str_replace("-",",",$item['Item2']);
    $pos = $item['Item3'];

    $arr = array("name"=>$name,"data"=>"[Date.UTC(".$date."), ".$pos." ],");
    echo json_encode($arr);         
}

Мой возврат в json выглядит так:

{"name":"Item1","data":"[Date.UTC(2011,11,08), 4 ],"}
{"name":"Item1","data":"[Date.UTC(2011,11,08), 2 ],"}

Когда моя диаграмма загружается, она заполняет имена 135 серий (?!?!?!) Внизу и не отображает точки на линейном графике.

Если я удаляю двойные кавычки и жестко кодирую результат в массив серий, он прекрасно работает (хотя я заметил, что в примере нет запятой между объектами.

СПАСИБО за помощь ... особенно быстрые ответы! ; -)

Answer 1

РЕШИТЬ:

Я нашел ответ, который наконец-то сработал! Расстраиваю, что это заняло у меня несколько дней, потому что это не было хорошо задокументировано Highcharts (и / или, может быть, мое понимание jQuert и JavaScript все еще находится на уровне новичков).

Ответ: не отправлять данные X / Y в виде предварительно сформированного массива в объекте json, а вместо этого просто отправлять числа, составляющие дату (значение x) и значение (значение y) в виде списка значений, разделенных запятыми, в объекте json, а затем выполните синтаксический анализ и передачу на стороне клиента.

Например: Изначально я пытался заставить мой PHP отправить что-то вроде

[{"name":"Name 1","data":["[Date.UTC(2011,11,08), 4 ]","[Date.UTC(2011,11,09), 4 ]","[Date.UTC(2011,11,10), 4 ]","[Date.UTC(2011,11,11), 4 ]","[Date.UTC(2011,11,14), 3 ]"]}

но мне действительно нужно было отправить что-то вроде

[{"name":"Name 1","data":["2011,11,08, 4","2011,11,09,4"....`

Первый шаг - убедиться, что для опции «series» задан пустой массив series: []

(я упоминаю об этом, потому что видел другие ответы, где это было сделано по-другому).

Затем в функции getJSON вам нужно создать новый объект для каждого объекта, который вы извлекаете, который также включает пустой массив «data» (см. «Var series» ниже).

Затем вложите несколько циклов $.each для анализа и вставки данных в их необходимые массивы и заполните «имя» каждого объекта:

    $.getJSON('http://exmaple.com/getdata.php?ID=' + id, function(data) {           
        $.each(data, function(key,value) {
            var series = { data: []};
            $.each(value, function(key,val) {
                if (key == 'name') {
                    series.name = val;
                }
                else
                {
                    $.each(val, function(key,val) {
                        var d = val.split(",");
                        var x = Date.UTC(d[0],d[1],d[2]);
                        series.data.push([x,d[3]]);
                    });
                }
            });
            options.series.push(series);
        });

После приведенного выше кода вам нужно создать экземпляр диаграммы:

var chart = new Highcharts.Chart(options);

И это должно быть!

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

Answer 2

Поскольку метод Javascript UTC будет возвращаться с целым числом, будет лучше, если вы просто передадите метку времени Unix как целое число при создании JSON на стороне сервера, вместо того, чтобы пытаться передать функцию (UTC.Date) в JSON- это делает весь JSON недействительным!

Итак

Вместо этого

while ($item = mysql_fetch_assoc($result)) {            
    $name = $item['Item1'];
    $date = str_replace("-",",",$item['Item2']);
    $pos = $item['Item3'];

    $arr = array("name"=>$name,"data"=>"[Date.UTC(".$date."), ".$pos." ],");
    echo json_encode($arr);         
}

Сделайте это:

while ($item = mysql_fetch_assoc($result)) {            
    $name = $item['Item1'];
    $unix_date = date("Y-m-d", strtotime($item['Item2']));
    $pos = $item['Item3'];

    $arr = array("name"=>$name,"data"=>"[".($unix_date*1000).", ".$pos." ],");
    echo json_encode($arr);         
}

Обратите внимание, что мыумножение отметки времени PHP unix на 1000, чтобы сделать ее совместимой с JS.

Ссылка: http://www.w3schools.com/jsref/jsref_utc.asp

Answer 3

Только что проверил пример кода для Highcharts, series должен быть массивом объектов JSON, каждый из которых содержит {"name":"Item1","data":"[Date.UTC(2011,11,08), 4 ],"} и т. Д.

Основная проблема - это ваш вывод из page2, а не массив.

Сначала вам нужно будет исправить ваш $ .each, нужно нажать value, а не data:

$.each(data, function(key,value) {
    options.series.push(value);
});

. Это позволит правильно настроить каждый элемент в серии наполный объект JSON.

Затем, чтобы исправить вывод:

$output = [];
while ($item = mysql_fetch_assoc($result)) {            
    $name = $item['Item1'];
    $date = str_replace("-",",",$item['Item2']);
    $pos = $item['Item3'];

    //I don't think there's supposed to be a comma after this square bracket
    $arr = array("name"=>$name,"data"=>"[Date.UTC(".$date."), ".$pos." ]");
    array_push($output, json_encode($arr));     
}

echo "[";
foreach($output as $val){
    echo $val;
    if($val != end($output)) echo ",";
}
echo "]";

И это должно сделать это.

Answer 4

Я столкнулся с проблемой отправки меток времени, созданных mktime (), потому что старшие диаграммы ожидают время UTC, а PHP Timestamp не UTC. Данные могут отображаться в неправильный день на графике, поэтому вы также должны учитывать часовой пояс.

function _convertToUTC($timeStamp) {
    return (int)$timeStamp + (int)date('Z', $timeStamp);
}

Пример кода:

$serie = array(
    'name' => 'title',
    'data' => array(
        // multiply timestamp by 1000 to get milliseconds
        array(_convertToUTC(mktime(0,0,0,1,1,2016)) * 1000, 15),
        array(_convertToUTC(mktime(0,0,0,2,1,2016)) * 1000, 18),
        array(_convertToUTC(mktime(0,0,0,3,1,2016)) * 1000, 13),
    ),
);
echo json_encode($serie);

Answer 5

Проверено в PHP5.5

Вы можете просто добавить это в JSON с серией данных

$date = '31-12-2015 00:00:00';
$datetimeUTC = (strtotime($date) * 1000);
$data[] = [$datetimeUTC, (float) $value];