Tutorials von wetterbinningen.ch:
Diagramme mit amcharts / 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.chWetterdaten und Datenbanken (MySQL)
3.1 - Archiv importieren (wswin)
Hi,
AntwortenLöschendas 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.
Siehe Tutorial Amcharts Teil 2.2
AntwortenLöschenHallo,
AntwortenLöschenim 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.
Versuche:
AntwortenLöschengraphs: [
{
type: "line",
title: "Temp",
valueField: "t",
fillAlphas:0,
},
{
type: "line",
title: "Hum",
valueField: "h",
fillAlphas:0,
}
],
Ja es funktioniert. vielen Dank
AntwortenLöschenHallo,
AntwortenLöschendas 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.
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öschenHallo,
AntwortenLöschenvielen 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.
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öschenDie 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.
AntwortenLöschenVielen Dank im Voraus.
Ok. Werden neue zeilen unten angefügt oder oben ?
LöschenHallo,
Löschenvielen Dank für die Hilfe.
Die neuen Werte werden unten hinzugefügt.
Vielen Dank im Voraus.
hallo, das ist jetzt eine recht dreckige Lösung, aber zumindest einfach einzubauen ;)
Löschen//Start Datenzeile der Importdatei
//$startzeile = 1;
$anzahlZeilen = 24;
$cFile = file($dateiname);
$startzeile = count($cFile) - $anzahlZeilen + 1;
Hallo,
Löschenes 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.
Der Kommentar wurde von einem Blog-Administrator entfernt.
AntwortenLöschenIch 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.
AntwortenLöschenHerzliche Grüße aus dem Münsterland (DE) in die Schweiz
Hans
Hallo Fredy vieleicht können Sie mir doch noch einmal Helfen.
AntwortenLöschenIch versuche verzweifelt die Gitternetzlinien sprich "Gridcolor" in eine andere Farbe zu ändern und hier scheitere ich kläglich.
Vielen Dank
Hans
Hallo Hans
LöschenFü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
Hallo Fredy,
Löschenvielen 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
Hallo Hans
LöschenDas 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
Hallo Fredy,
Löschenich 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
Ja, das sind die Gridlines, und werden wie oben beschrieben geändert. Hast du mir ein Link auf ein Beispiel wo es nicht geht ?
LöschenHier ein Beispiel von mir:
www.wetterbinningen.ch/demo/charts/amsc/sc03-2panel4graph.php
Hallo Fredy,
AntwortenLöschenhier der Link zu meiner Testseite:
http://www.wetter-herbern.de/charts/chart22.php
Hallo Hans
LöschenDas 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
},
Hallo,
AntwortenLöschendie 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
versuche für jeden graph:
LöschenuseDataSetColors: false,
oder
useDataSetColors = false;
(je nach schreibweise)
Ja das ist's. Vielen Dank
LöschenHallo Fredy,
AntwortenLöschendas 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 :-))))
Hallo,
AntwortenLöschenerstmal 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
Hallo,
LöschenBesten 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
Ich verstehe kein Problem.
LöschenGrüße
Hallo.
AntwortenLöschenvieleicht 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
Hallo
LöschenDie 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
Hallo,
Löschenvielen, vielen Dank. Alles läuft bestens!
Danke für das Tutorial.
Grüße
Hallo,
AntwortenLöschenein 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