Brauche Chart.js Unterstützung

[Ha23fa]

Hallo, ich arbeite an einem Django-Projekt mit Chart.js. Ich habe ein gestapeltes Diagramm mit 3 Diagrammen übereinander. Die x-Achse ist die Zeit und ich möchte der x-Achse 2 Daten geben und es sollte mir die x-Achse in bestimmten Schritten geben. Zum Beispiel alle 30 Sekunden. Kann mir jemand hierbei helfen?
Link zum code: https://jsfiddle.net/ha23fa/tdcsejL1/21

 

[dr_tommi]

Die x-Achse ist die Zeit und ich möchte der x-Achse 2 Daten geben und es sollte mir die x-Achse in bestimmten Schritten geben. Zum Beispiel alle 30 Sekunden.

Also was denn nun? X und X und X?
Und warum alle 30 Sekunden wenn die Werte nur im Minutenabstand vorhanden sind?
Was willst du sehen bzw. erreichen?
Eine Einteilung der X-Achse mit Zwischenmarkierungen?

 

[Ha23fa]

Ich will das die X-Achse linear verläuft bzw. jede 30 Sekunden ein wert hat und keine krumme Sekundenzahlen hat.
Das ist die Aufgabe, die ich bekommen habe.
VG

 

[dr_tommi]

Also bei deinen Werten sollen Markierungen bzw. die Beschriftungen jeweils bei :0 und :30 sein, und das obwohl die Werte bei :12 oder :31 liegen?
Aber die Daten sollen schon noch bei :12 und :31 gezeichnet werden?
Das Skript kann nur darstellen was auch geliefert wird.
Das einzige was man machen kann, ist die Zwischenwerte ausblenden so dass nur bestimmte Werten als Beschriftung genommen wird.
Bei Datums- bzw. Zeitwerten sollte das klappen.

 

[Ha23fa]

Hallo Tommi,
Genau das was Du gesagt hast ist richtig.
Kannst Du mir anhand von der code im link sagen wie die Lösung aussehen könnte.

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

(https://jsfiddle.net/ha23fa/tdcsejL1/21)

 

[dr_tommi]

Bisher nur eine grobe Vermutung, aber ich gehe davon aus, dass man das auf dieser Basis machen müsste.

 scales: {
        xAxes: [{
            type: 'time',
            ticks: {
                minRotation: 30,
                maxRotation: 60,
            },
            time: {
                min: __T_MIN__,
                max: __T_MAX__,
                minUnit: 'second',
                displayFormats: {
                    second: 'YYYY-MM-DD HH:mm:ss',
                    minute: 'YYYY-MM-DD HH:mm',
                    hour: 'YYYY-MM-DD HH',
                    day: 'YYYY-MM-DD',
                    week: 'YYYY-MM-DD',
                    month: 'YYYY-MM',
                    quarter: 'YYYY [Q]Q',
                    year: 'YYYY',
                },
                tooltipFormat: 'YYYY-MM-DD HH:mm:ss',
            },
        }],

Das ist jetzt nur aus einem Beispiel rauskopiert und nicht vollständig, sollte aber in die richtige Richtung gehen.
Soweit ich das verstanden habe geht das mit einer Kombination von "Displayformat" für die Darstellung und "ticks" für die Zwischenwerte.

Vielleicht schaffe ich es nachher mal das in das Beispiel einzubauen, jetzt gibt es erstmal Frühstück.

 

[Ha23fa]

Danke Dir.
Du würdest mich retten.

 

[Ha23fa]

Vielleicht hilft dieses Video:

Die adapters können helfen.

 

[dr_tommi]

Ich habe mich jetzt mal etwas mit dem Problem beschäftigt.
Solange es nur eine Datenreihe im Diagramm ist klappt das alles wie gewünscht.

00:01:00
00:01:20
00:01:36
00:02:56
00:03:33
00:04:40
00:04:48
00:05:54

Diese x-Werte werden genutzt und die Beschriftung sieht dann so aus.

Aber sobald es mehr sind scheinen die Formatierungen anders zu funktionieren.

 

[Ha23fa]

Danke Dir