Forum: PC-Programmierung CSV Daten direkt im Browser darstellen


von DatenLogger (Gast)


Lesenswert?

Hallo,

Ich habe hier einen Datenlogger, der seine Daten fein in einer CSV-Datei 
auf einem USB Stick ablegt.

Nun hätte ich gerne eine Möglichkeit, die Daten ganz unkompliziert und 
platformunabhängig am PC (also ideal im Browser) zu plotten. Also Stick 
rein, Plot da. Ohne großes Extraprogramm.

Ich dachte schon, ich hätte eine Lösung: http://dygraphs.com/

Genau so hatte ich mir das gedacht. Leider kann/darf JavaScript ja nicht 
auf lokale Dateien zugreifen, daher funktioniert das nur auf nem 
Webserver.

Und die Daten direkt ins JScript schreiben, ist zwar eine Möglichkeit, 
aber irgendwie wenig elegant finde ich.

Hat irgendjemand eine ähnliche Lösung oder einen Workaround für das 
Lesen der Datei in JScript?

Danke schonmal!

von amateur (Gast)


Lesenswert?

Das Open-Office-Packet oder wie auch immer das jetzt heißt, kann es mit 
Sicherheit, zumindest die Tabellenkalkulation davon.
Auch die meisten Freeware-Tabellenkalkulationsprogramme müssten es 
können.
Möglicherweise kann es sogar der Excel-Viewer von KleinWeich. Excel 
selbst kann's sowieso.

von sven (Gast)


Lesenswert?

Also mit dem FileSystemObject (FSO) kann ich lokal Dateien lesen...
http://www.html-world.de/program/fso_ov.php

Also z.B.
1
var file = new ActiveXObject("Scripting.FileSystemObject");
2
if (file.FileExists(newfile)==true) 
3
    { var datafile=file.OpenTextFile(newfile,1,false,0);
4
      file_found=true;
5
      while(datafile.AtEndOfStream == false)
6
      { temp=datafile.ReadLine();

von DatenLogger (Gast)


Lesenswert?

Naja, dass Excel das kann, ist klar. Es wäre wahrscheinlich nichtmal ein 
großer Akt, selbst ein kleines Programm zu schreiben, dass das macht.

Svens Ansatz gefällt mir allerdings besser... Leider habe ich mich 
bisher noch nie mit JScript befasset, daher bin ich noch nicht sicher, 
wie ich die dygraphs Funktionen mit seinem Ansatz verheiraten kann.

Meine csv datei heisse nun "temperature.csv" und liege im gleichen 
Verzeichnis wie die html Datei und "dygraph-combined.js".

Wo übergebe ich jetzt den Dateipfad?
Dann einfach die Variable mit dem Inhalt der Datei weitergeben?
Kann mir vielleicht jemand auf die Sprünge helfen?

Ich hatte leider noch nicht die Ruhe, mir die Grundlagen zu Gemüte zu 
führen und blicke noch nicht richtig durch....
1
<html>
2
<head>
3
<script type="text/javascript" src="dygraph-combined.js"></script>
4
</head>
5
<body>
6
<div id="graphdiv3" style="width:500px; height:300px;">
7
</div>
8
<script type="text/javascript">
9
10
var file = new ActiveXObject("Scripting.FileSystemObject");
11
if (file.FileExists(newfile)==true) 
12
    { var datafile=file.OpenTextFile(newfile,1,false,0);
13
      file_found=true;
14
      while(datafile.AtEndOfStream == false)
15
      { temp=datafile.ReadLine(); 
16
17
  g = new Dygraph(
18
19
    // containing div
20
    document.getElementById("graphdiv"),
21
22
    // CSV or path to a CSV file.
23
    temp ???
24
25
  );
26
</script>
27
</body>
28
</html>

von Andreas B. (andreasb)


Lesenswert?

Vergiss das mit dem ActiveX Objekt, das funktioniert nur im IE.

Zudem funktioniert dies spätestes ab Windows 8 auch nur noch bedingt.

Wenn du das JS im gleichen Ordner hast wie das .CSV File könnte es 
funktionieren mit einem Ajax Request. Aus Erfahrung kann ich dir aber 
auch sagen das es von Browser zu Browser unterschiedlich gehandhabt 
wird.



mfg Andreas

von Frank M. (aktenasche)


Lesenswert?

wieso im browser wenn die daten eh lokal vorliegen? ich versteh den 
vorteil davon nicht.

von bluppdidupp (Gast)


Lesenswert?

http://www.html5rocks.com/en/tutorials/file/dndfiles/
...erfordert lediglich einen aktuellen Browser ;D

von DatenLogger (Gast)


Lesenswert?

Vorteil ist, dass sich praktisch jeder auf jedem PC mit jedem OS schnell 
einen Überblick über die Messwerte verschaffen kann, indem er schlicht 
den USB Stick anstöpselt und die HTML Datei im Browser öffnet.

OK, aktuelle Browser sind sicherlich von Vorteil, das sehe ich schon...

von Jürgen S. (jurs)


Lesenswert?

DatenLogger schrieb:
> Nun hätte ich gerne eine Möglichkeit, die Daten ganz unkompliziert und
> platformunabhängig am PC (also ideal im Browser) zu plotten. Also Stick
> rein, Plot da. Ohne großes Extraprogramm.

Plattformunabhängig ist beispielsweise Java.

Mal gegoogelt:
http://www.live-graph.org/

Da lese ich:
- The framework is Java-based and can run on any computer system.
- LiveGraph reads files in a simple CSV-style format.

Meine Idee: Daten auf den Stick, zusätzlich die Live-Graph Software plus 
ein paar Skripte zum Starten.

Vielleicht ist das mal einen Test wert (ich kenne es nicht persönlich).

von Rufus Τ. F. (rufus) Benutzerseite


Lesenswert?

Jürgen S. schrieb:
> Plattformunabhängig ist beispielsweise Java.

Aber beileibe nicht auf jedem Rechner installiert.

von Läubi .. (laeubi) Benutzerseite


Lesenswert?

Rufus Τ. Firefly schrieb:
> Jürgen S. schrieb:
>> Plattformunabhängig ist beispielsweise Java.
>
> Aber beileibe nicht auf jedem Rechner installiert.

Wenn er will kann er sich ja eine JVM für seine bevorzugten Systeme mit 
auf den USB-Stick ablegen. Einfacher wäre vermutlich ein Shell/Batch 
Skript was das ganze in ein HTML Dokument transformiert, oder die 
Benutzung von Excel/OO ...

von Joschua C. (Gast)


Lesenswert?

Moin

Wie wärs mit Gnuplot? gnuplot.info/

Ich kenne das Programm von Linux. Man tippt gnuplot und ein paar 
Parameter (Datentabelle, Dteipfad, Funktion, Achsenbeschriftungen, bla) 
ein und bekommt den Graphen angezeigt.

Wie wärs, du schreibst auf den Stick z.B ein Skript (für Linux) das 
Gnuplot startet (ist soweit ich weiß standardmäßig bei de meiste 
Distributionen dabei) und ein Skript für Windows, dass dann Gnuplot aus 
einem Ordner auf dem Stick startet. Beide plotten deine cvs-Datei. Wenn 
man den Skripten dann noch passende Namen wie "Linux" oder "Windows" 
gibt, muss man den Stick nur reinstöpseln und das richtige Skript 
öffnen.

Gruß Joschua

von Clemens G. (clemens_g)


Lesenswert?

DatenLogger schrieb:
> Ich dachte schon, ich hätte eine Lösung: http://dygraphs.com/
>
> Genau so hatte ich mir das gedacht. Leider kann/darf JavaScript ja nicht
> auf lokale Dateien zugreifen, daher funktioniert das nur auf nem
> Webserver.

Ich habe jetzt 11 Jahre darüber nachgedacht und nun eine Lösung 
gefunden, nee, so schlimm isses nicht, aber eine Lösung habe ich 
dennoch, siehe 
https://community.hiveeyes.org/t/dygraphs-js-framework-zur-datenvisualisierung/4733/ 
bzw. kurz:

Damit eine lokale HTML-Datei im Browser weitere lokale Dateien öffnen 
kann muss im Firefox
1
security.fileuri.strict_origin_policy
auf false gesetzt werden!

- about:config in die Adresszeile des Firefox eingeben
- "Risiko akzeptieren" bestätigen
- nach security.fileuri.strict_origin_policy suchen
- auf "false" setzen - einfach auf "true" doppelklicken!
- später bitte wieder rückgängig machen wenn man wieder "normal" surft

Ob's DatenLogger noch interessiert? :-)

: Bearbeitet durch User
von Jim M. (turboj)


Lesenswert?

Von den Workarounds die mir hier auf die Schnelle einfallen ist das der 
absolut Dümmste.

Diese Sicherheitseinstellung sollte niemals geändert werden.

Ansonsten findet man sich relativ fix mit einem gehackten DSL Router 
wieder, weil ein Angreifer via Skript aus dem Internet alle lokalen 
Geräte übernehmen kann.

von Stephan S. (uxdx)


Lesenswert?

Joschua C. schrieb:
> Moin
>
> Wie wärs mit Gnuplot? gnuplot.info/
>
> Ich kenne das Programm von Linux. Man tippt gnuplot und ein paar
> Parameter (Datentabelle, Dteipfad, Funktion, Achsenbeschriftungen, bla)
> ein und bekommt den Graphen angezeigt.
>
> Wie wärs, du schreibst auf den Stick z.B ein Skript (für Linux) das
> Gnuplot startet (ist soweit ich weiß standardmäßig bei de meiste
> Distributionen dabei) und ein Skript für Windows, dass dann Gnuplot aus
> einem Ordner auf dem Stick startet. Beide plotten deine cvs-Datei. Wenn
> man den Skripten dann noch passende Namen wie "Linux" oder "Windows"
> gibt, muss man den Stick nur reinstöpseln und das richtige Skript
> öffnen.
>
> Gruß Joschua

gnuplot gibt es nicht nur für Linux, auch für Windows und MacOS.
Ich finde es absolut super.

von Jan K. (jan_k)


Lesenswert?

Ich weiß, ist alt, aber das Thema durchaus aktuell. Ich baue momentan so 
etwas in Python mit streamlit. Vorteile: Python kann auf deine lokalen 
Dateien zugreifen, das Backend läuft also nicht im Browser. Ist aber 
plattformunabhängig. Frontend = Visualisierung ist im Browser und ist 
mega simpel.

Siehe zb hier: 
https://discuss.streamlit.io/t/loading-our-own-datasets/7118/3 es sind 5 
Zeilen Python inkl imports um ne csv anzuzeigen.

von Weingut P. (weinbauer)


Lesenswert?

https://stackoverflow.com/questions/6470570/help-in-writing-a-batch-script-to-parse-csv-file-and-output-a-text-file

würde BAT-Variante vonwegen DAU machen, ne HTML mit Javascript und die 
Daten einfach als Variable in das JS packen. Der Rest ist dann 
Fleißarbeit.

von Clemens G. (clemens_g)


Lesenswert?

Jim M. schrieb:

> Diese Sicherheitseinstellung sollte niemals geändert werden.

Eine weitere Möglichkeit wäre der erwähnte lokale Webserver, Python 
liefert z.B. einen mit, der recht leicht genutzt werden kann:

cd example
python3 -m http.server

von Kaj G. (Firma: RUB) (bloody)


Lesenswert?

Ich würde einfach ein Script/Programm schreiben, was die CSV Daten in 
HTML wandelt. HTML Datei weitergeben, glücklich sein.

von Alfred P. (paaalm07)


Lesenswert?

Hast du Zugriff auf di Firmware des Datenloggers?
Könnte man einfach gleich in eine HTML  Datei schreiben statt CSV.

Bitte melde dich an um einen Beitrag zu schreiben. Anmeldung ist kostenlos und dauert nur eine Minute.
Bestehender Account
Schon ein Account bei Google/GoogleMail? Keine Anmeldung erforderlich!
Mit Google-Account einloggen
Noch kein Account? Hier anmelden.