Número de serie de datos de Highcharts con ajax/json y PHP

Question

Esta es mi primera solicitud aquí, y he leído muchas de las otras publicaciones relacionadas sobre este mismo tema, pero TODAVÍA me quedo atascado y casi en mi ingenio final en esto ... ¡Así que cualquier ayuda es muy apreciada!

Tengo el siguiente objeto Highcharts en Page1.php, y estoy usando AJAX para obtener datos de Page2.php en la carga de la página, así como cuando se cambia una opción desplegable.

(truncada para facilitar la lectura):

$(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); 
}); 

}); 

pagina2.php tiene la siguiente devolver el 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);   
} 

Mi regreso JSON se parece a esto:

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

Cuando se carga mi tabla, llena los nombres de la serie 135 (?!?!?!) En la parte inferior y no parece mostrar los puntos en el gráfico de líneas

Si quito las comillas dobles y codificar el resultado en la matriz serie, funciona muy bien (aunque me di cuenta el ejemplo no parecen tener una coma entre los objetos.

Gracias por toda la ayuda ... sobre todo respuestas rápidas! ;-)

Answer 1

resuelto:

He encontrado una respuesta que finalmente funcionó! Frustrando que me tomó varios días porque Highcharts no lo documentó bien (y/o quizás mi comprensión de jQuert y JavaScript todavía está en el nivel de principiante).

La respuesta es no enviar los datos de X/como una matriz preformada en su objeto JSON, sino que simplemente enviar los números que componen la fecha (valor x) y el valor (valor y) como una lista de valores separados por comas en un objeto json, y luego hacer el análisis y presionar en el extremo del cliente.

Por ejemplo: que originalmente estaba tratando de conseguir mi PHP para enviar algo así como

[{"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 ]"]} 

pero lo que realmente tenía que hacer era enviar algo así como

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

El primer paso es para asegurarse de que tiene la opción "serie" establecida en una matriz vacía series: []

(menciono esto porque he visto o las respuestas donde esto se hizo de manera diferente).

Luego, en su función getJSON, necesita crear un nuevo objeto para cada objeto que está tirando, que también incluye una matriz vacía de "datos" (consulte "var series" a continuación).

Entonces nido unos $.each bucles para analizar y empujar los datos en sus arreglos necesarios, y llenar el "nombre" de cada objeto:

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

Después de que el código anterior, es necesario crear una instancia de la tabla:

var chart = new Highcharts.Chart(options); 

¡Y así debería ser!

Esperemos que alguien más encuentre útil esta respuesta y no tenga que vencerse en la cabeza durante días tratando de resolverlo. :-)

Answer 2

Sólo comprobado con un código de ejemplo para Highcharts, series tiene que ser un array de objetos JSON que contiene cada {"name":"Item1","data":"[Date.UTC(2011,11,08), 4 ],"} etc.

El principal problema es que su salida de page2, no es una matriz

Tendrá que arreglar su primera $ .Cada, es necesario empujar value, no data:

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

Esto ajustará adecuadamente cada elemento en serie con el objeto JSON completa.

A continuación, para fijar la salida:

$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 "]"; 

Y eso debería hacerlo.

Answer 3

Desde método de Javascript UTC volverá con un entero, es simplemente mejor si sólo pasa la marca de tiempo Unix como un entero cuando se está generando el JSON en el serverside lugar tratando de pasar una función (UTC.Date) en el JSON: ¡eso hace que el JSON completo no sea válido!

Así

En lugar de esto

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

hacer esto:

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

Tenga en cuenta que estamos multiplicando la marca de tiempo Unix PHP antes de 1000 para que sea compatible con JS.

Referencia: http://www.w3schools.com/jsref/jsref_utc.asp

Answer 4

registramos en PHP5.5

Usted puede simplemente añadir esto en el JSON con la serie de datos

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

Answer 5

me encontré con el problema de enviar las marcas de tiempo producido por mktime() porque Highcharts espera tiempo UTC mientras que PHP Timestamp no es UTC. Los datos podrían mostrarse en un día incorrecto en el gráfico, por lo que también debe considerar el huso horario.

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

Ejemplo de código sería:

$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);