Forum: PC-Programmierung HTML Javascript d3.js Chart Problem


von John P. (brushlesspower)


Angehängte Dateien:

Lesenswert?

Hallo,

ich habe aktuell ein Problem und fange an zu verzweifeln.

Kurz zu den Umständen:

Ich habe eine Android App "programmiert" mit einem WebView (Browser).
Dort möchte ich mittels HTML/Javascript ein Chart erzeugen aus einer 
localen CSV datei

Testen kann ich das ebenfalls mit Firefox in Windows. Alle Security 
Features sind aus.
Ein d3.js Beispiel um locale CSV Daten zu laden funktioniert einwandfrei 
sowohl in Firefox als auch in meinem Android Webview.
https://bl.ocks.org/emmasaunders/cd2c9da1388565a6fb9ce5fba95168db

Da ich von HTML und Javascript keine Ahnung habe, habe ich jemanden auf 
Fiverr beauftragt mir das HTML file bzw. das Javascript zu 
programmieren.

Hat er auch gemacht.

Das Problem ist, es gibt ein Dropdown Button um zwischen verschiedenen 
Charts (versch. Daten im CSV) zu wechseln.

Das klappt auch....aber nur sporadisch, bzw sporadisch klappt das nicht 
(der Chart bleibt leer)

Da es sporadisch geht, ist meine Vermutung das der programmierer mist 
gebaut hat. Nur kann ich das nicht prüfen.

Er behauptet, bei ihm geht alles er hat ja schließlich localhost.
Wie ich das aber auf android nutzen kann/soll weiß er auch nicht.
Und warum es nicht geht weiß er auch nicht.
Helfen will er auch nicht, ich bin unter seinem Niveau.


Daher wollte ich hier mal fragen ob jemand etwas Licht ins Dunkel 
bringen kann.
Vielleicht funktioniert mein Plan ja auch nicht?

Im Anhang sende ich mal die csv und die HTML Datei

Die csv gehört in einen Ordner namens csv im gleichen Verzeichnis wie 
die HTML

: Bearbeitet durch User
von Wir stellen ein! (Gast)


Lesenswert?

schau mal in die Konsole (im Browser nicht im OS):
1
Access to XMLHttpRequest at 'file:///foo/csv/DATALOG.csv' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
2
...

Lade das d3.js lokal, dann sollte es gehen.

​

von Wir stellen ein! (Gast)


Lesenswert?

Über einen Webserver funktioniert es, wie es soll.
Vermutlich hat das dein entwickler das so getestet.

Das was ich oben schrieb ist Unsinn, hatte was anderes im Hinterkopf.

https://d3-wiki.readthedocs.io/zh_CN/master/Requests/

Ein Trick wäre deine Daten innerhalb eines .js global zu deklarieren
und das einzubinden. Musste dir ein tool schrieben dass die csv nach 
json
konvertiert und entspr. ablegt, kommt auch drauf an wo die Daten 
herkommen
das weiss ich nicht.

von Wir stellen ein! (Gast)


Lesenswert?

Je nachdem was dir besser gefällt:

Lösung 1:
Im JS-Code am Anfang einfügen bevor die Daten geladen werden:
https://stackoverflow.com/questions/10752055/cross-origin-requests-are-only-supported-for-http-error-when-loading-a-local


Lösung2: Den Browser mit enspr. Schalter starten:
--allow-file-access-from-files
Funktioniert zumindest aufm PC, wie man in Android diesen Para
mitgibt keine Ahnung.

Lösung 3:
Es gibts auch ne Webserver für Crome App, darin lädts du deine "App"
dann geht das über einen lokalen Webserver, das macht am wenigsten 
Ärger.
https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb?hl=en

von Wir stellen ein! (Gast)


Lesenswert?

Add zu Lösung 1:
Das einfügen:
webView.getSettings().setAllowFileAccessFromFileURLs(true);

von John P. (brushlesspower)


Lesenswert?

Hallo,

vielen dank das du dir mein Problem mal angeschaut hast.

ich starte bereits den Webview (in Android) bzw Firefox (Windows) mit 
File access.
Also Lösung 2.

es funktioniert ja auch teilweise, aber es scheint wirklich am Webview 
bzw an firefox zu liegen:

ich habe das mal hier zum simulieren hochgeladen:
http://plnkr.co/edit/Jip26sY3ggtkDQsv

wenn ich dies mit firefox öffne und das dropdown durchschalte bleibt der 
chart manchmal (öfters) leer

wenn ich edge benutze (oder opera, oder chrome) passiert das nicht

von John P. (brushlesspower)


Lesenswert?

Wir stellen ein! schrieb:
> kommt auch drauf an wo die Daten
> herkommen
> das weiss ich nicht.

Die Daten liegen auf einer SD Karte in einem Bluetooth gerät.

Ich habe eine App "programmiert" womit die daten per Bluetooth auf 
Smartphone kopiert werden.
Wenn ich dann eine Datei auswähle kopiere ich die Datei dann in den HTML 
oderner als DATALOG.csv und starte den Webviewer.

von Wir kündigen! (Gast)


Lesenswert?

John P. schrieb:
> ich habe das mal hier zum simulieren hochgeladen:
> http://plnkr.co/edit/Jip26sY3ggtkDQsv

Offline auf nem eigenen Server geht es.

Wenn du php auf deinem Rechner kannst du ja mal
in das dir wechseln wo die index.html liegt und
php -S localhost:8085
eingeben
und im Browser
http://localhost:8085
aufrufen dann sollte das funktionieren. Bei mir funktioniert es in
alles browsern ohne Änderungen aus dem ersten Post wo die Dateien
per Dateianhang gepostet wurden.

Ich bau dir mal den Tag über mit cordova ein apk, mal schauen ob es 
damit
geht, vielleicht integriert das schon nen Webserver, habe das noch nie 
benutzt.

von John P. (brushlesspower)


Lesenswert?

Wir kündigen! schrieb:
> Wenn du php auf deinem Rechner kannst du ja mal
> in das dir wechseln wo die index.html liegt und
> php -S localhost:8085
> eingeben
> und im Browser
> http://localhost:8085
> aufrufen dann sollte das funktionieren.

Naja an sich sollte es auf Android laufen. Windows ist ja eher zum 
testen.(und mit Edge gehts ja)

Wir kündigen! schrieb:
> Ich bau dir mal den Tag über mit cordova ein apk, mal schauen ob es
> damit
> geht, vielleicht integriert das schon nen Webserver, habe das noch nie
> benutzt.

Vielen Dank. Nur bin ich mir nicht sicher ob mir das etwas nutzt die App 
ist ja fertig (macht noch viel mehr als nur den Webview anzeigen)

und es muss ja einen unterschied geben warum EDGE;Opera;Chrom besser 
funktionieren als Firefox bzw der verwendete Webview

von Wir kündigen! (Gast)


Lesenswert?

John P. schrieb:

> Vielen Dank. Nur bin ich mir nicht sicher ob mir das etwas nutzt die App
> ist ja fertig (macht noch viel mehr als nur den Webview anzeigen)
Ach so.

> und es muss ja einen unterschied geben warum EDGE;Opera;Chrom besser
> funktionieren als Firefox bzw der verwendete Webview
Sind halt andere Engines.

Edge=Chrome=Opera, früher webkit heute blink und state of the art
Firefox hat was eigenes:Gecko Kann zwar auch viel aber von chrome/blink 
längst abgehägt.
Webview je nach Androidversion was anderes.
Vor Android 4 was webkitbasiertes, danach das selbe wie Chrome aber 
trotzdem nie die selbe Version wie der neueste Chrome. Das war dann auch 
noch nur mit dem OS updatebar, später dann separat wie eine App. Und hat 
auch bewusst nie alle Features wie ein Chrome. Ich schätze mal in 
Webview ist CORS generell vernagelt und nicht umgehbar.

Ich sehe gerade Cordava nutzt auch Webview.

Wenn FF manchmal einschläft beim Laden der grossen CSV ist das ein FF 
Problem, das hatte ich auch schon aufm PC.

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.