Html/JavaScript Diagramm aus Textfile erstellen

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas
kalb

kalb hat kostenlosen Webspace.

17:51, 10.4.2014
Hi,

Ich habe ein Text-File in dem zwei Spalten sind: Datum(yyyy-mm-dd) und ein integer Wert.

Daraus wurde ich gerne ohne ein weiteres Programm im Browser ein einfaches Diagramm erstellen, x-Achse: Datum, y-Achse: Integer Werte; (Punkte mit verbundenen Linien). Dabei soll sich das Diagramm mit den neuersten werten des Text-files aktualisieren, wenn die Seite neu geladen wird. (ggf, sollen nur die letzten 50 Einträge genutzt werden.

Ist so etwas möglich?
Oder muss ich mit einem anderen Programm erst eine Graphik erstellen, die ich einbette?
Gibt es dazu vl sogar eine fertige Lib die man schnell und einfach nutzen kann?
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage
michaelkoepke

michaelkoepke hat kostenlosen Webspace.

17:59, 10.4.2014
Ich würde PHP verwenden im Zusammenspiel mit den GD-Funktionen.

http://www.php.net/manual/de/book.image.php

Wenn du noch Fragen hast, frag!

Have Fun
mein-wunschname

mein-wunschname hat kostenlosen Webspace.

18:37, 10.4.2014
Ich gehe davon aus, dass deine Datenreihe im CSV-Format vorliegt. Dann könnte die PHP-Bibliotkek pChart von http://pchart.sourceforge.net für dich interessant sein. Die kann auf jeden Fall externe Daten aus einer CSV-Datei einlesen.
Eine andere Möglichkeit ist die JavaScript-Bibliothek von highcharts.com. Auch diese hat bereits eine Methode zum Zugriff auf eine externe Datei im CSV-Format implementiert.

In beiden Fällen schießt du eigentlich mit Kanonen auf Spatzen, aber eine ganz einfache Sache kenne ich leider keine, die müsstest du vermutlich komplett selbst zusammenbauen. Die GD-Bibliothek für PHP wurde schon erwähnt. Man kann aber auch JavaScript in ein Canvas-Element zeichnen lassen.
Autor dieses Themas
kalb

kalb hat kostenlosen Webspace.

21:11, 10.4.2014
Uh, ja also PHP läuft ja leider nicht im Browser.

Daher wollte ich mich auf HTML&Javascript beschränken ...
mein-wunschname

mein-wunschname hat kostenlosen Webspace.

21:18, 10.4.2014

kalb schrieb:
Uh, ja also PHP läuft ja leider nicht im Browser.

Daher wollte ich mich auf HTML&Javascript beschränken ...

Hmm, warum muss das denn im Browser passieren?

Aber mein zweiter Vorschlag ist ja JavaScript. Mir ist noch 2 weitere Beispiel mit JavaScript eingefallen: gRaphaël und Googles Chart Library. Allerdings habe ich bei diesen beiden (anders als bei dem vorher erwähnten highcharts) keine Möglichkeit gesehen, direkt mit CSV-Daten zu arbeiten. Der typische Weg der Strukturierung externen Quellen für JavaScript ist eher das JSON-Format.
michaelkoepke

michaelkoepke hat kostenlosen Webspace.

11:06, 11.4.2014
Wenn du kein PHP hast,
dann sag uns doch erstmal wofür du solch ein Diagramm und zu welchen Zweck haben möchtest!

MFG Micha

~~g****e~~

18:14, 11.4.2014

Moin,
nachdem hier so um den heißen Brei geredet wurde, möchte ich nun einen Lösungsansatz bringen.

An sich gibt es viele Charting Libarys, für die Einfachheit kann man http://www.chartjs.org/ nutzen.

Zuerst muss die CSV Datei eingelesen werden. Da du keine konkrete Form vorgibst, gehe ich von der Form:

YYYY-MM-DD;I
YYYY-MM-DD;I
YYYY-MM-DD;I
YYYY-MM-DD;I
...

aus. Diese Datei soll von Lokal geladen werden. Dafür brauchen wir allgemein 2 Elemente: Ein Inputfeld, wo drin steht, was geladen werden soll (und der Nutzer das wählen kann), und den Chart, also:

<input type="file" accept="text/csv" id="filechooser" />
<canvas height="480px" width="640px" id="chart"></canvas>

Nun der Code dazu:

document.getElementById("filechooser").addEventListener("change",function() {
    var fileReader = new FileReader();
    fileReader.readAsText( this.files[0] );
    fileReader.onloadend = function() {
        var lines = fileReader.result.splitt(/[\\r|\\n]/);
        var labels = [], values = [];
        lines.forEach(function(value) {
            var a = value.splitt(';');
            labels.push(a[0]);
            values.push(a[1]);
        });
        var ctx = document.getElementById('chart').getContext('2d');
        var data = {
            labels: labels
            datasets: [{
                data: values
            }]
        };
        var chart = Chart(ctx).Line(data);
    };
});

Das sollte es schon gewesen sein. Hier ein bisschen Dokumentation:
http://www.html5rocks.com/de/tutorials/file/dndfiles/
http://www.chartjs.org/docs/
Wenn du das jetzt noch richtig zusammen bringst, sollte es schon vollbracht sein.

Liebe Grüße

PS: Ungetestet und auf Medikamente

Autor dieses Themas
kalb

kalb hat kostenlosen Webspace.

16:03, 13.4.2014
@php: wozu wenn ich doch ohne Server arbeiten will. Daher auch im Broser und auch in der Foren Sektion HTML & JS.

Danke ggamee,
Damit habe ich jetzt auch ein schnelles Sample, so wie es funktionieren soll zusammen gebaut.
http://download.lima-city.de/kalb/Chart.zip
Klappt supper, view.html öffnen und beim file chooser data.txt wählen.

Was ich jetzt noch machen wollte, ist das input file vorzugeben und den Vorgang onload starten - dann brauch ich nur view.html öffnen und habe das selbe.

Allerdings klappt es bei mir nicht das ganze als eigene Funktion statt inline im EventListener zu definieren.
Dann sagt die FireBug konsole, das file nicht definiert ist - obwohl der ja vom InputFile kommen sollte ...

jemand eine Idee woran das liegt?

mein-wunschname

mein-wunschname hat kostenlosen Webspace.

23:13, 13.4.2014

kalb schrieb:

Was ich jetzt noch machen wollte, ist das input file vorzugeben und den Vorgang onload starten - dann brauch ich nur view.html öffnen und habe das selbe.

Allerdings klappt es bei mir nicht das ganze als eigene Funktion statt inline im EventListener zu definieren.
Dann sagt die FireBug konsole, das file nicht definiert ist - obwohl der ja vom InputFile kommen sollte ...

jemand eine Idee woran das liegt?

Ich habe zwar keine Idee, woran es liegt, aber eine wie es geht. Dieses Beispiel zeichnet die Daten beim Aufrufen der HTML-Datei

<!DOCTYPE html>
<html>
<head>
<title>Einlesen einer CSV-Datei und Visualisieren</title>
<style type="text/css">
#wrapper{
margin-left:auto;
margin-right:auto;
width:900px;
}
</style>
<script src="Chart.js"></script>

<script type="text/javascript">
  <!--
var xmlHttp = false;
var datafile= "data.txt";
 
function instanceRequest(){
  if(window.XMLHttpRequest){
    xmlHttp = new XMLHttpRequest();
  }else if(window.ActiveXObject){
    try{
      xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
    }catch(e){
      try{
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
      }catch(e){}
    }
  }
 
  if(!xmlHttp){
    alert('XMLHTTP-Instanz kann nicht erzeugt werden!');
    return false;
  }
}
 
function theRequest() {
  if(xmlHttp && xmlHttp.readyState){
    xmlHttp.abort();
    xmlHttp = false;
  }
 
  if(!xmlHttp){
    instanceRequest();
  }
 
  // POST-Request
  xmlHttp.open('get', datafile, true);
 
  xmlHttp.onreadystatechange = function () {
    if(xmlHttp.readyState == 4){
      if(xmlHttp.status == 200){
        //document.getElementById("outID").innerHTML = xmlHttp.responseText;
 
		var lines = xmlHttp.responseText.split('\r\n');
		var labelsA = [], values = [];
		lines.forEach(function(value) {
			var a = value.split(';');
			labelsA.push(a[0]);
			values.push(a[1]);
		});
		var ctx = document.getElementById('canvas').getContext('2d');
		var data = {
			labels: labelsA,
			datasets: [{
				bezierCurve : false,
				datasetFill : false,
				fillColor : "rgba(255,255,255,0.1)",
				strokeColor : "rgba(220,220,220,1)",
				pointColor : "rgba(220,220,220,1)",
				pointStrokeColor : "#fff",
				data: values
			}]
		};
		var opts = {
				//Boolean - Whether the line is curved between points
				bezierCurve : false,
				//Boolean - Whether to fill the dataset with a colour
				datasetFill : false,
				//Boolean - Whether to animate the chart
				animation : false
			};	
			
		var chart = new Chart(ctx).Line(data, opts);
      }
    }
  };
 
  // Request absetzen
  xmlHttp.send();
 
}
 //-->
</script>
</head>
<body onload="theRequest();">
<div id="wrapper">
<canvas id="canvas" height="450" width="600"></canvas>
</div>
</body>
</html>

Edit: Sorry für das fehlende Syntaxhighlighting, ich dachte , dass das automatisch mit code kommt.

Beitrag zuletzt geändert: 13.4.2014 23:21:02 von mein-wunschname

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city