Tutorials / Anleitungen

Tutorials von wetterbinningen.ch:


Achtung: Neue und aktualisierte Versionen der Tutorials finden Sie hier:

http://www.pscl.ch


Diagramme mit amcharts / stockcharts:


1  - Grundlagen (stockcharts)
1.1 - Diagramm mit mehreren Panels
1.2 - Panel mit mehreren Graphen
1.3 - Diagramm Eigenschaften

2 - Datenquellen: Text
2.1 - Textdateien mit WsWin
2.2 - Textdateien diverse .csv

3 - Datenquellen: Datenbank
3.1 - Datenbank: Trennkomma


4. Grundlagen (amcharts)
4.1 Diagrammtypen



Achtung: Neue und aktualisierte Versionen der Tutorials finden Sie hier:

http://www.pscl.ch

Wetterdaten und Datenbanken (MySQL)


3.1 - Archiv importieren (wswin)
3.2 - Livedaten importieren (wswin)

35 Kommentare:

  1. Hi,

    das Tutorial ist super.
    Ich versuche Diagramme von Wetterdaten mit Stockcharts zu erstellen, dazu würde ich gerne eine *.csv Datei einlesen.

    Datumformat ist DD.MM.YYYY und Zeitformat entsprechend hh:mm:ss.
    Die Spalten werden durch semicolon (;) und die Dezimalzahlen durch commas (,) getrennt.

    Siehe Beispiel (Datei ohne Kopfzeile):

    26.12.2013;14:00:00;10,2;21,7;10,8
    26.12.2013;15:00:00;11,1;18,9;12,2
    26.12.2013;16:00:00;11,4;16,8;12,4
    26.12.2013;17:00:00;11,2;14,9;12,1
    26.12.2013;18:00:00;10,8;13;11,4

    Dabei würde ich gerne (categoryField = "date";) den Temperaturverlauf nach Tagen und Stunden in X Achse anzeigen.

    Die Daten in die var chartData = [] versuche ich folgendermassen einlesen, siehe Code Snippets,
    dabei habe ich Probleme mit "parsen" des Datums und der Zeit. Erste und zweite Spalte.


    // WRITE
    chart.write("chartdiv");
    loadCSV("data.csv");
    });

    function loadCSV(file) {
    if (window.XMLHttpRequest) {
    // IE7+, Firefox, Chrome, Opera, Safari
    var request = new XMLHttpRequest();
    }
    else {
    // code for IE6, IE5
    var request = new ActiveXObject('Microsoft.XMLHTTP');
    }
    // load
    request.open('GET', file, false);
    request.send();
    parseCSV(request.responseText);
    }

    function parseCSV(data){
    //replace UNIX new lines
    data = data.replace (/\r\n/g, "\n");
    //replace MAC new lines
    data = data.replace (/\r/g, "\n");
    //split into rows
    var rows = data.split("\n");
    // loop through all rows
    for (var i = 0; i < rows.length; i++) {
    // this line helps to skip empty rows
    if (rows[i]) {
    // our columns are separated by semicolon
    var column = rows[i].split(";");
    // column is array now
    // first item is date
    var date = column[0];
    // second item is value of the second column
    var value1 = column[1];
    var value2 = column[2];
    // create object which contains all these items:
    var dataObject = {
    date: date,
    visits1: value1, visits2: value2,
    };
    // add object to chartData array
    chartData.push(dataObject);
    }
    }
    chart.validateData();
    }

    Wie könte ich das realisieren? Vielen Dank im Voraus.

    AntwortenLöschen
  2. Siehe Tutorial Amcharts Teil 2.2

    AntwortenLöschen
  3. Hallo,

    im Teil 4.1 - Diagrammtypen (amcharts) werden gezeigt einige Diagrammtypen von amcharts,
    so zum Beispiel einfaches Liniendiagramm mit einer Temperaturlinie: valueField: "t",

    Ich versuchte es mit valueField: "h", für den zweiten Wert:

    graphs2: [{
    type: "line",
    title: "Temp2",
    valueField: "h",
    fillAlphas:0,
    }],

    funktioniert leider nicht. Wie kann ich eine multiple line graph erstellen?
    Vielen Dank für die Hilfe.

    AntwortenLöschen
  4. Versuche:

    graphs: [
    {
    type: "line",
    title: "Temp",
    valueField: "t",
    fillAlphas:0,
    },
    {
    type: "line",
    title: "Hum",
    valueField: "h",
    fillAlphas:0,
    }
    ],

    AntwortenLöschen
  5. Ja es funktioniert. vielen Dank

    AntwortenLöschen
  6. Hallo,

    das einlesen einer *.csv Datei mittels PHP Script funktioniert bestens.

    Die Datei wird aber mit der Zeit sehr groß, daher die Überlegung nur eine bestimmte Anzahl an Zeilen einlesen. Zum Beispiel die letzten 12 Zeilen einlesen.

    Ist das Möglich oder nicht wenn ja, dann wie ?

    Vieln Dank im Voraus für die Antwort.

    AntwortenLöschen
    Antworten
    1. Das könnte man schon machen. Bei sehr grossen Dateien würd ich das aber nicht mehr machen. Wie gross ist/wird denn die csv Datei ?

      Löschen
  7. Hallo,

    vielen Dank für die Antwort.

    Das sind Stundenwerte die mittels amChart grafisch dargestellt werden sollen, daher so die Idee, reicht es auch wenn, nur 12 bzw. 24 Stunden angezeigt werden. Das heißt, ausschließlich die aktuellen und keine historischen Daten sollen angezeigt werden.

    Es wäre nett, wenn Sie mir dabei weiterhelfen.
    Vielen Dank im Voraus.

    AntwortenLöschen
    Antworten
    1. Bei jeder Anfrage muss die ganze Datei abgearbeitet werden, um die letzten Zeilen zu finden. Die perfomance würde mit zunehmender dateigrösse dadurch immer schlechter. Ich würde daher eine Datenbanklösung vorziehen.

      Löschen
  8. Die geloggten Daten werden als csv Datei auf den Server uploaded die jährliche Dateigröße wird zunehmend bis ca. 400 KB. Ich würde gerne ausprobieren mit PHP script, mal schauen wie die perfomance wird.

    Vielen Dank im Voraus.

    AntwortenLöschen
    Antworten
    1. Ok. Werden neue zeilen unten angefügt oder oben ?

      Löschen
    2. Hallo,

      vielen Dank für die Hilfe.
      Die neuen Werte werden unten hinzugefügt.

      Vielen Dank im Voraus.

      Löschen
    3. hallo, das ist jetzt eine recht dreckige Lösung, aber zumindest einfach einzubauen ;)


      //Start Datenzeile der Importdatei
      //$startzeile = 1;

      $anzahlZeilen = 24;
      $cFile = file($dateiname);
      $startzeile = count($cFile) - $anzahlZeilen + 1;

      Löschen
    4. Hallo,

      es funktioniert einwandfrei und die perfomance ist auch gut.
      Ich möchte mich dafür recht herzlich bedanken.Danke für die Hilfe.
      Danke für das super Tutorial.

      Löschen
  9. Der Kommentar wurde von einem Blog-Administrator entfernt.

    AntwortenLöschen
  10. Ich möchte mich nochmals für die großartige Hilfestellung bei der Erstellung von Am Stock Charts bedanken. Ohne Sie "Fredy" hätte ich das nie so zum Laufen bekommen.
    Herzliche Grüße aus dem Münsterland (DE) in die Schweiz
    Hans

    AntwortenLöschen
  11. Hallo Fredy vieleicht können Sie mir doch noch einmal Helfen.
    Ich versuche verzweifelt die Gitternetzlinien sprich "Gridcolor" in eine andere Farbe zu ändern und hier scheitere ich kläglich.
    Vielen Dank
    Hans

    AntwortenLöschen
    Antworten
    1. Hallo Hans

      Für die categorieAxis alle Panels :

      categoryAxesSettings:
      {
      minPeriod: "mm",
      maxSeries: 1000,
      gridColor: "#cc0000"
      },



      für einzelne panels:

      //Chart Panels
      panels:
      [
      {
      title: "Panel 1",
      percentHeight: 50,

      categoryAxis:
      {
      gridColor: "#cc0000",
      },




      Für einzelne ValueAxes:

      valueAxes:
      [
      {
      id: "p2va1",
      position: "left",
      gridColor: "#0000cc"
      }
      ]


      Für alle valueAxes:

      valueAxesSettings:{
      gridColor: "#cc0000"
      },

      Grüsse

      Löschen
    2. Hallo Fredy,
      vielen Dank für die schnelle Antwort.
      Aber ich kann machen was ich will, es funktioniert nicht.
      Wenn ich aber zb. bei der Windgeschwindigkeit gridalpha von 0 auf 5 erhöhe werden Linien in gewünschte Farbe angezeigt.
      id: "p2va2",
      color:"#000000",
      position: "right",
      gridColor: "#0000CD",
      gridAlpha: 5,
      Evtl habe ich es falsch geschrieben, ich meinte die grauen hinterlegten Linien (gridCount)
      Vielen Dank
      Grüsse Hans

      Löschen
    3. Hallo Hans

      Das maximum von alpha ist 1 (keine transparenz). bei alpha 0 (volle transparenz) wird nichts mehr angezeigt, egal welche Farbe.

      Falls du aber nicht diese Linien meintest, weis ich nicht genau was dann. Kannst du mir nochmals erklären was du genau haben möchtest. Evtl. Screenshot ?

      Grüsse Fredy

      Löschen
    4. Hallo Fredy,
      ich hab mal ein Screenshot gemacht.
      Die roten Pfeile weisen auf die Linien hin.
      http://www.wetter-herbern.de/charts/gitter.png
      Vielen Dank für die Hilfe.
      Grüsse

      Hans

      Löschen
    5. Ja, das sind die Gridlines, und werden wie oben beschrieben geändert. Hast du mir ein Link auf ein Beispiel wo es nicht geht ?

      Hier ein Beispiel von mir:
      www.wetterbinningen.ch/demo/charts/amsc/sc03-2panel4graph.php


      Löschen
  12. Hallo Fredy,

    hier der Link zu meiner Testseite:
    http://www.wetter-herbern.de/charts/chart22.php

    AntwortenLöschen
    Antworten
    1. Hallo Hans

      Das hat schon funktioniert. Es war nur sehr schwer zu sehen. Die grids sind ja leicht transparent, dadurch sah man das dunkle blau kaum.
      Wie du bereits bemerkt hast kannst du mit " gridAlpha: 1, " die transparenz ausschalten. Versuche daher :

      categoryAxesSettings:
      {
      minPeriod: "mm",
      gridColor: "#000080",
      gridAlpha: 1
      },

      Löschen
  13. Hallo,

    die Textdaten werden via PHP Script mittels:
    echo "{date: $jsDate,t:".$data[2].",h:".$data[3].",p:".$data[4]."}";
    in ein amchart eingelesen, dabei werden die Linienfarben vom Script rein
    zufällig vorgegeben.

    Ich würde gerne die Farben für die Linien selbst bestimmen.
    Versucht habe ich mit: graph.lineColor = "#FF6600";
    Das funktioniert leider nicht.

    Wo und wie kann ich die Linienfarben selbst definieren?

    Vielen Dank

    AntwortenLöschen
    Antworten
    1. versuche für jeden graph:

      useDataSetColors: false,
      oder
      useDataSetColors = false;
      (je nach schreibweise)

      Löschen
    2. Ja das ist's. Vielen Dank

      Löschen
  14. Hallo Fredy,
    das wars. Super und vielen, vielen Dank.

    http://www.wetter-herbern.de/charts/chart22.php

    Herzliche Grüße aus dem Münsterland in die Schweiz

    Hans :-))))

    AntwortenLöschen
  15. Hallo,

    erstmal großes Lob für das Tutorial. Es ist leicht nachvollziehbar und sehr
    ausführlich geschrieben. Danke.

    Ich hab' da mal 'ne Frage: Ist das möglich, aus den Stundenwerten einer csv
    Datei Tageswerte zu generieren via PHP Script und die letzten 5 ober 7 Tage
    in einem amChart einzulesen? Ist der Programmieraufwand zu groß um ein Beispiel zu zeigen?

    Vielen Dank im Voraus.

    Grüße

    AntwortenLöschen
    Antworten
    1. Hallo,

      Besten Dank für den Kommentar.

      Tageswerte aus Stundenwerten mit php ist sicher möglich. Wäre mir persönlich aber zu aufwändig und würde eine Datenbanklösung vorziehen.

      Grüsse

      Löschen
    2. Ich verstehe kein Problem.

      Grüße

      Löschen
  16. Hallo.

    vieleicht können Sie mir helfen.

    Ich habe das Datum im Format: DD/MM/YYYY und in der zweiten Spalte die Zeit im Format: HH:MM:SS. Ich versuche das Datum und die Zeit zerlegen in Variable $jsDate, wie im Tutorial 2.2 - Textdateien CSV beschrieben, leider hat das Beispeil keine Sekunden. Wie kann ich die Sekunden in die Variable $jsDate aufnehmen?

    Würde mich sehr freuen, wenn sie mir helfen könnten. Vielen Dank im Voraus.
    Grüße

    AntwortenLöschen
    Antworten
    1. Hallo
      Die Zeile:
      $splitTime = explode(":", $data[1]);

      zerlegt ja die Zeit in Einzelteile. Diese Einzelteile weisen wir neuen Variablen zu:

      $csvHour = $splitTime[0];
      $csvMinute = $splitTime[1];

      Die Sekunden wären dann in $splitTime[2]

      $csvSeconds = $splitTime[2];

      Viel Erfolg und Grüsse

      Löschen
    2. Hallo,

      vielen, vielen Dank. Alles läuft bestens!
      Danke für das Tutorial.

      Grüße

      Löschen
  17. Hallo,

    ein sehr gutes Tutorial, vielen Dank dafür. Sehr gut beschrieben!

    Ist das Moeglich ein amcharts mit periodSelector zu ergaenzen wie beim stockcharts?

    Ich habe bereits im head-Element den Link auf amstock.js definiert wie im Tutorial.

    Habe eine andere Schreibweise,weiss nicht welche ist die Richtige ist, daher kann ich nicht eins zu eins dein Beispiel uebernehmen und habe versucht wie folgt:

    ....

    Da ich beim Versenden die Meldung bekomme:
    "Ihr PHP, ASP und andere serverseitige Scripting-Methoden sind nicht zulässig.-Code kann nicht übernommen werden." kann ich mein Beispiel nicht senden.

    Ich wuerde mich sehr freuen, wenn du mir helfen koenntest.

    Vielen Dank im Voraus. Gruesse

    AntwortenLöschen