Forum: PC-Programmierung Nutzen von Date in chart.js


von Tim (Gast)


Lesenswert?

Hallo,

ich stelle mit chart.js einen Graphen da. Eine Datenbank liefert mir auf 
Abfrage eine json, die 3 Werte enthält. Der erste ist ein Datum.
Ich würde gerne bei chart.js die xAxes als type: time definieren, sodass 
sich die Werte besser formatieren lassen.
Allerdings gelingt das nicht. Sobald ich die xAxes als type: "time" 
angebe, bleibt die Seite weiß. Und das, obwohl die Json doch bereits ein 
passendes Format liefert!?.

So sieht die followersdata.php aus. Json:
1
[{"Zeit":"2020-04-29 13:00:06","Abstand":"96.8","Temperatur":"12.2"},{"Zeit":"2020-04-29 05:00:06", ........

Und so versuche ich die zu js übermittelten Daten aufzuteilen
1
$.ajax({
2
  url : "followersdata.php",
3
  type : "POST",
4
  success : function(data){
5
    console.log(data);
6
    
7
      
8
    var Zeit = [];
9
    var Abstand = [];
10
    var Temperatur = [];
11
    
12
    for(var i in data) {
13
      Zeit.push(data[i].Zeit);
14
      Abstand.push(data[i].Abstand);
15
      Temperatur.push(data[i].Temperatur);
16
    }
17
        ...

Das klappt auch soweit. Also ein Graph wird angezeigt.
Füge ich allerdings type: "time" für die xAchse an, geht nichts mehr
1
var options = {
2
  scales: {
3
    xAxes: [{
4
      type: "time",
5
      ticks: {
6
        fontSize: 12,
7
        reverse: true
8
      }
9
          }],
10
......

Habt ihr da vielleicht eine Idee? Ich stehe etwas auf dem Schlauch

von DPA (Gast)


Lesenswert?

Ich hab da jetzt nichts getestet, aber das wird wohl am Datumsformat 
liegen. "2020-04-29 13:00:06" ist kein gültiges ISO Datum. new 
Date("2020-04-29 13:00:06") kann damit nichts anfangen. Ich weiss auch 
nicht, ob die chart.js die Umwandlung überhaupt selbst machen kann, oder 
ob man das noch manuell machen müsste. Am besten würde man das wohl im 
PHP Script beheben. DB Session Zeitzohne auf UTC stellen und mit PHP das 
Datum in ein ISO Format convertieren (z.B. "2020-04-29T11:00:06Z"). 
Eventuell reich das shon, eventuell muss man js seitig noch nen new 
Date(darumsstring) reinbringen, keine ahnung. Man könnte die Umwandlung 
zwar auch JS Seitig machen, davon würde ich aber abraten, weil dann 
kommen die Zeitzohnen durcheinander, btw. du müsstest die auf dem Server 
sonst wissen.

Bitte melde dich an um einen Beitrag zu schreiben. Anmeldung ist kostenlos und dauert nur eine Minute.
Bestehender Account
Schon ein Account bei Google/GoogleMail? Keine Anmeldung erforderlich!
Mit Google-Account einloggen
Noch kein Account? Hier anmelden.