Highcharts nicht auf Datum Abholung - Daten als Strings interpretiert

Question

Ich versuche, eine highchart mit unregelmäßigen x-Achse zu erzeugen, ein bisschen wie folgt aus: http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/spline-irregular-time/

ich meine Daten von mySQL via PHP ziehen und Verarbeitung im JSON-Format.

Ich kann highcharts/JS nicht die Daten im Datumsformat lesen - es scheint, sie als Strings zu ziehen.

Hier ist mein Skript:

$(document).ready(function() { 
    var options = { 
     chart: { 
      type: 'spline', 
      marginRight: 130, 
      marginBottom: 25 
     }, 
     title: { 
      text: 'some title', 
      x: -20 //center 
     }, 
     subtitle: { 
      text: '', 
      x: -20 
     }, 
     xAxis: { 
      type: 'datetime', 
      dateTimeLabelFormats: { // don't display the dummy year 
       month: '%e. %b', 
       year: '%b' 
      }, 
      categories: [] 
     }, 
     yAxis: { 
      title: { 
       text: 'L/min' 
      }, 
      plotLines: [{ 
       value: 0, 
       width: 1, 
       color: '#808080' 
      }] 
     }, 
     plotOptions: { 
      spline: { 
       marker: { 
        enabled: true 
       } 
      } 
     }, 

     tooltip: { 
      formatter: function() { 
       return '<b>'+ this.series.name +': '+ 
       this.y +'</b><br>'+ this.x; 
      } 
     }, 
     legend: { 
      layout: 'vertical', 
      align: 'right', 
      verticalAlign: 'top', 
      x: -10, 
      y: 100, 
      borderWidth: 0 
     }, 
     series: [] 
    } 

     $.getJSON("allreports/report.php", function(json) { 

     options.xAxis.categories = json[0]['data']; 
     options.series[0] = json[1]; 
     options.chart.renderTo = 'container'; 
     chart = new Highcharts.Chart(options); 
    }); 

und hier ist meine PHP-Seite:

<?php 
    $con = mysql_connect("localhost","db-user","db-pw"); 

    if (!$con) { 
     die('Could not connect: ' . mysql_error()); 
    } 

    mysql_select_db("db", $con); 

    $sth = mysql_query("SELECT v1,v2 FROM table"); 
    $rows = array(); 
    $rows['name'] = 'v1'; 
    while($r = mysql_fetch_array($sth)) { 
     $rows['data'][] = $r['v1']; 
    } 

    $result = array(); 
    array_push($result,$rows1); 
    array_push($result,$rows); 


    print json_encode($result, JSON_NUMERIC_CHECK); 


    mysql_close($con); 
?> 

Dies gibt der folgende:

[{"name":"medicinetime","data":["01,01,1970,01,00,00","01,01,1970,01,33,36","01,01,1970,01,33,36","01,01,1970,01,33,36"]},{"name":"units","data":[1,3,2,2]}] 

Aber mein Diagramm ist wie folgt:

Irgendwelche Gedanken darüber, was ich falsch mache, bitte? Was muss ich tun, damit PHP/JS dieses Array als eine Reihe von Datumsangaben und nicht als Zeichenfolgen auffängt?

Vielen Dank!

Answer 1

Sie haben zwei Probleme. Zuerst müssen Sie Ihre Datumskomponentenwerte in ein tatsächliches Javascript-Datumsobjekt konvertieren. Das Format, nach dem Sie für Ihre Seriendaten suchen, ist ein Array von X/Y-Paaren. Es wird so aussehen, Ihre Daten mit:

[ 
    [Date.UTC(1970,1,1,1,0,0),1], 
    [Date.UTC(1970,1,1,1,33,36),3], 
    [Date.UTC(1970,1,1,1,33,36),2], 
    [Date.UTC(1970,1,1,1,33,26),2] 
] 

so etwas wie dieses Versuchen:

var xVals= json[0].data.map(item => { 
    var dateArr = point[0].join(','); 
    return Date.UTC(dateArr[2],dateArr[1],dateArr[0],dateArr[3],dateArr[4],dateArr[5]); 
}); 

var yVals = json[1].data; 

options.series[0] = { 
    name: json[1].name, 
    data: xVals.map((x,i) => [x,yVals[i]]) 
} 

Dokumentation über gültige Formate für die Seriendaten hier: http://www.highcharts.com/docs/chart-concepts/series

Zweitens Sie habe da ein paar doppelte X-Werte, und das wird verwirrend sein ... du wirst wollen, dass deine Zeitstempel einzigartig sind, oder es wird schwer sein, daraus ein Liniendiagramm zu machen.