csv zu einer HTML Tabelle und ein Diagramm

[kosovafan]

Hallo,

ich habe verschiedene CSV Files die als HTML Tabelle wiedergegeben werden, zurzeit macht das ein Jquery Addon das aber für jedes html file das csv File übergeben werden muss. Das ist logisch, aber ich frage mich ob es nicht eine Möglichkeit gibt das csv File aus den Link zu ziehen. Zum Beispiel.

CsvToHtmlTable.init({
csv_path: 'csv/machinery.csv',
element: 'table-container',
allow_download: false,
csv_options: {separator: ','},
datatables_options: {"paging": false}
});

Mit 30 csv Files ist das ein wenig Arbeit insbesondere weil ich wegen der einfachen Pflege gerne zu Middleman konvertieren möchte. Hier wird ja mehr oder weniger mit Templates gearbeitet.

Zweite Frage wäre ob ein Addon für Jquery bekannt ist der Rechnen könnte und Daten als Diagramme darstellen könnte? Ich habe zwar ein paar Mathe Addons gefunden aber die wirken irgendwie ein wenig zu overload.

Berechnet werden sollen die Daten aus den entsprechenden CSV Feldern und in der HTML Tabelle eingetragen werden. Es wäre zwar super wenn das auch mit mehreren Files funktionieren könnte, aber das ist glaube ich mit JavaScript nicht möglich.

Wäre über Tips, Links und Infos dankbar.

Danke / Schönen Tag
Silvio

 

[Sempervivum]

zurzeit macht das ein Jquery Addon das aber für jedes html file das csv File übergeben werden muss. Das ist logisch, aber ich frage mich ob es nicht eine Möglichkeit gibt das csv File aus den Link zu ziehen.

Bin mir nicht ganz sicher, wie Du das meinst, aber wäre es eine Möglichkeit, die CSV-Datei als URL-Parameter zu übergeben: http://domain.de/pfad/datei.html&csv-file=data/machinery.csv? Das kann man dann mit Javascript heraus ziehen und an CsvToHtmlTable.init() übergeben. Dann würdest Du nur noch eine HTML-Datei brauchen.

Zweite Frage wäre ob ein Addon für Jquery bekannt ist der Rechnen könnte und Daten als Diagramme darstellen könnte? Ich habe zwar ein paar Mathe Addons gefunden aber die wirken irgendwie ein wenig zu overload.

Auch hier weiß ich nicht genau, was Du dir vorstellst. Ein Plugin, das Charts darstellen kann, so wie sie hier aufgelistet sind?:
https://www.sitepoint.com/15-best-javascript-charting-libraries/

 

[kosovafan]

http://domain.de/pfad/datei.html&csv-file=data/machinery.csv? Das kann man dann mit Javascript heraus ziehen und an CsvToHtmlTable.init() übergeben. Dann würdest Du nur noch eine HTML-Datei brauchen.

wenn der link zum Beispiel meinlink.com/section/farming.html ist, wäre es nicht möglich mit JavaScript den Link zu lesen und alles vor farming und die extension zu löschen und das dann als csv in die entsprechende Zeile eintragen? Das wäre sicher nicht so performant, aber für interne Seiten reicht das sicher aus.

Auch hier weiß ich nicht genau, was Du dir vorstellst. Ein Plugin, das Charts darstellen kann, so wie sie hier aufgelistet sind?:
https://www.sitepoint.com/15-best-javascript-charting-libraries/

Year,ZA,NA,BW,MG,ZW,AO,ZM,KE,NG,CF,GH,CM,CD,ET,UG,EG,DZ,MA,MR,NE,SD,TN,SO
2000,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
2001,36,14,11,0,0,13,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
2002,43,14,13,0,0,21,0,14,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0

Das ist das CSV File, naja leicht verkürzt. Es geht bis 2016. Wenn ich die ganzen Addons richtig verstehe muss man die Daten vorgeben. Aber gibt es auch eine Möglichkeit das man mit JavaScript die jeweiligen Zeilen des Jahren zusammenrechnet und das Ergebnis dann in das Diagramm einträgt.


Jahr 2000 > 0 > Diagramm 2000 0
Jahr 2001 > 75 > Diagramm 2001 74
Jahr 2002 > 106 > Diagramm 2002 106

Das praktisch gerechnet und in das Diagramm eingesetzt werden kann. Wenn das nicht geht, wäre ja okay dann rechne ich das mit CSV zusammen und dann soll JavaScript für das Diagramm die Spalten und Zeilen Gesamt + Jahr darstellen.

Danke / Schönen Abend
Silvio

 

[Sempervivum]

wenn der link zum Beispiel meinlink.com/section/farming.html ist, wäre es nicht möglich mit JavaScript den Link zu lesen und alles vor farming und die extension zu löschen und das dann als csv in die entsprechende Zeile eintragen?

Ach so, Du möchtest für die CSV-Datei den selben Namen und nur die andere Erweiterung verwenden. Das ist selbstverständlich möglich, z. B. so wie hier beschrieben:
http://befused.com/javascript/get-filename-url

var url = window.location.pathname;
var csvfilename = url.substring(url.lastIndexOf('/')+1).replace(/\.html$/, ".csv");

Aber gibt es auch eine Möglichkeit das man mit JavaScript die jeweiligen Zeilen des Jahren zusammenrechnet und das Ergebnis dann in das Diagramm einträgt.

Das praktisch gerechnet und in das Diagramm eingesetzt werden kann. Wenn das nicht geht, wäre ja okay dann rechne ich das mit CSV zusammen und dann soll JavaScript für das Diagramm die Spalten und Zeilen Gesamt + Jahr darstellen.

Auch das sollte kein Problem sein. Offenbar gibt es Plugins mit denen man einen CSV-String bzw. eine CSV-Datei parsen kann:
http://stackoverflow.com/questions/1293147/javascript-code-to-parse-csv-data
Hat man die Daten erst Mal in einer Javascript-Struktur, kann man beliebige Berechnungen damit anstellen, natürlich auch die, die Du beschreibst.

 

[kosovafan]

Danke,

werde ich mal versuchen. Würde vieles erleichtern. Ich hatte zwar mit PHP ein wenig probiert, aber meine Pferde haben sich schon über den Krach beschwert und der Hund dachte ich habe Besuch.

Danke / Schönen Abend
Silvio

 

[Sempervivum]

Viel Erfolg! Und wenn Du an einer Stelle nicht weiter kommst, kannst Du dich ja wieder melden. Interessante Aufgabe.

 

[kosovafan]

Viel Erfolg! Und wenn Du an einer Stelle nicht weiter kommst, kannst Du dich ja wieder melden. Interessante Aufgabe.

Das werde ich bestimmt machen. Interessant, ich habe irgendwie Panik. Ich und mein Mundwerk. Ja mache ich kein Problem. Jetzt wird das Ausmaß einen erstmal bewusst.

Gruß / Schönen Abend
Silvio

 

[kosovafan]

Hallo,

kurzes Update:
Zum auslesen der CSV Dateien nutze ich jetzt CSV-To-HTML-Table was zu arbeiten scheint. Es sind sicher noch Feinarbeiten notwendig aber zur Zeit macht es seinen Job:

var url = window.location.pathname; 
var csvfilename = url.substring(url.lastIndexOf('/')+1).replace(/\.html$/, ".csv");
var filename = "csv/" + csvfilename;

CsvToHtmlTable.init ({
csv_path: filename,
element: 'table-container',
allow_download: false,
csv_options: {separator: ','}
datatables_options: {"paging": false}

Die Diagramme erstelle ich mit Dygraphs, leider habe ich keine Möglichkeiten gefunden das aus der gleichen Datei zu extrahieren, also eine weitere csv Datei angelegt die diese Daten vorhält. Das entsprechende Script findet sich im Anhang als txt Datei, vielleicht für den ein oder anderen Anfänger wie ich ebenfalls interessant.

Danke & Schönen Abend
Silvio

 

[Sempervivum]

leider habe ich keine Möglichkeiten gefunden das aus der gleichen Datei zu extrahieren, also eine weitere csv Datei angelegt die diese Daten vorhält.

Woran ist es denn gescheitert? Ich bin eigentlich optimistisch, dass es eine Möglichkeit gibt, die erste CSV-Datei zu konvertieren, so dass sie als Basis für die Grafik dienen kann. Betrifft das die Berechnungen, von denen Du gesprochen hast, wo eine Summe über eine Anzahl von Zellen gebildet werden muss?
Edit: Ich habe mal einen kurzen Blick auf dygraphs geworfen und offenbar ist es so, dass die Quelle für das Diagramm auch ein String im CSV-Format sein kann. Den könnte man problemlos mit Javascript aufbauen. Alternativ serverseitig mit PHP die erste in die zweite CSV-Datei konvertieren.

 

[kosovafan]

Woran ist es denn gescheitert? Ich bin eigentlich optimistisch, dass es eine Möglichkeit gibt, die erste CSV-Datei zu konvertieren

Mit Dygraphs habe ich keine Option gefunden die sagt Spalte 1 = Y + Spalte 25 = X, nur mit der Option visibility kann man das Diagramm einschränken was nicht funktioniert hat. Die letzte Spalte hat irgendwie nicht existiert.

Den könnte man problemlos mit Javascript aufbauen. Alternativ serverseitig mit PHP die erste in die zweite CSV-Datei konvertieren.

Ich bin kein Profi. Ich mache nichts anderes als im Internet vorhandenes zu suchen und für mich anzupassen und ja ich weiß man kann Leute beauftragen aber unsere Gelder als Stiftung liegen nicht auf der Straße. Wir wollten auf PHP verzichten, rein HTML + Javascript. Das mindert die Wartung. Man Power ist nicht einfach zu finden und schon gar nicht mit Leidenschaft und Herz für die Sache wie für unsere Sache.

Ich blicke bei Dygraphs noch nicht wirklich ganz durch, wenn man mit Javascript die Spalten A + Y glaube ich war es extrahieren könnte und jeweils als X / Y Axe angeben kann wäre das sicher hilfreich, aber immer fragen ist irgendwie auch beschämend. Ich habe auch noch keine Option gefunden wie man Einfluss auf die Abmessungen der Grafik nehmen kann.

Ich überlege ob ich die Tabellen nicht doch statistisch ausschreibe und nur für statistische Zwecke grafisch aufarbeite. Aber sicher bin ich mir noch nicht, Dateien aus 16 Jahren mit einer Menge an Daten sind auch sehr zeit intensive. Im Computer Zeitalter finde ich das auch deprimierend.

CSV to Markdown Table wäre interessant, oder wenn ich Middleman zur Mitarbeit überreden kann. Wie ich im Internet fand gibt es Möglichkeiten mit Ruby. Es scheint eine sehr elegante Sprache zu sein, zumindest wenn ich mir den Middleman Code so anschaue.


Danke / Schönen Abend
Silvio