Wie csv Datei auslesen und in amCharts einfügen?

Hi,

ich habe amCharts ausprobiert mit ein paar statischen Werten. Das sieht ungefähr so aus:

  // Create chart instance
            var chart = am4core.create("chartdiv2", am4charts.XYChart);
            
            // Add data
            chart.data = [{
              "ax": 5,
              "ay": 20
            
            }, {
              "ax": 2,
              "ay": 1.3
             
            }, {
              "ax": 3,
              "ay": 2.3,
              "bx": 3,
              "by": 5.1
            }, {
              "ax": 4,
              "ay": 2.8,
              "bx": 4,
              "by": 5.3
            }, {
              "ax": 5,
              "ay": 3.5,
              "bx": 5,
              "by": 6.1
            }, {
              "ax": 6,
              "ay": 5.1,
              "bx": 6,
              "by": 8.3
            }, {
              "ax": 7,
              "ay": 6.7,
              "bx": 7,
              "by": 10.5
            }, {
              "ax": 8,
              "ay": 8,
              "bx": 8,
              "by": 12.3
            }, {
              "ax": 9,
              "ay": 8.9,
              "bx": 9,
              "by": 14.5
            }, {
              "ax": 10,
              "ay": 9.7,
              "bx": 10,
              "by": 15
            }, {
              "ax": 11,
              "ay": 10.4,
              "bx": 11,
              "by": 18.8
            }, {
              "ax": 12,
              "ay": 11.7,
              "bx": 12,
              "by": 19
            }];
           

Jetzt würde ich die Werte gerne aus einer csv Datei auslesen. Ich habe mir dieses Beispiel angeschaut, aber ich verstehe nicht ganz, wie das funktioniert. Die csv Datei ist lokal im selben Ordner wie mein HTML-File.

Wie spiel ich die CSV-Daten ein?

Answer 1

[regex9]

Indem du das verlinkte Beispiel nutzt und einfach nur die URL austauschst, die an loadFile übergeben wird. Wie deine CSV-Datei aufgebaut sein sollte, kannst du dir von dem Beispiel abschauen. Rufe die Adresse dieser CSV-Datei im Browser auf und lade sie dann herunter.

Grundvoraussetzung dafür, dass dieses Beispiel funktionieren kann, ist, dass die CSV-Datei über eine URL erreichbar ist. Das heißt, deine komplette Anwendung muss über einen Webserver ausgespielt werden, andernfalls blockiert dein Internetbrowser den Versuch des JavaScript, die CSV-Datei zu laden.

Packe deine Webseite also entweder auf einen Webhost oder richte dir auf deinem Rechner einen Webserver (IIS über die Windows Features, Apache über XAMPP, ...) ein über den die Webseite laufen kann.

Comments

[guschteusz]

Danke für den Tipp mit dem Hosten!
Hab jetzt diesen Fehler: https://imgur.com/a/FiieEX0
Weißt du vielleicht, woran das liegen kann?

[regex9]

@guschteusz

Ich denke, dass das Format der CSV-Datei noch nicht passen wird.