✔ FLOT Diagramm - Daten einlesen

N

Number5

Mitglied
Eigentlich eine einfache Sache so dachte ich, aber ich komm gerade nicht drauf:

Ich will aus einer Datenbank [Struktur: id, x, y] die Daten auslesen und dann ein Diagramm erstellen. Momentan nutze ich FLOT mit jquery. Die Daten müssen im Format: var data = [[x1, y1], [x2, y2], ...] bereitgestellt werden.

Habe jetzt die Daten ausgelesen mit SQL und dann per php in genau dieses Format gebracht und lese sie dann in der Javascript Funktion aus einem hidden input field aus... um damit das Diagramm zu erstellen.

Liegt da ein Denkfehler vor? Oder muss ich irgendwelche Typumwandlungen beachten?

Danke für Eure hilfe.
N5
 
Kommt drauf an. Wenn du zwischen dem Auslesen aus dem Input und dem erstellen des Diagramms "$.parseJSON" benutzt, dann machst du alles richtig. Falls nicht, übergibst du dem Diagramm ja nur ein String, der aussieht wie ein Array, aber gar keins ist.

Javascript: 
var data = $.parseJSON($("input[type=hidden]").val());
 
Ok das macht Sinn! Danke!... Wie muss ich die Daten in dem InputFeld bereitstellen, denn es funktioniert leider immer noch nicht...
 
Hier mal ein funktionierendes Beispiel.
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html id="html" xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<title>Page title</title>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

	<script type="text/javascript">
	/* <![CDATA[ */
		$(document).ready(function(){
			var value = $("input[type=hidden]").val();
			
			//gibt "[[1,2],[3,4],[5,6]]" als einen String aus
			alert(value);
			
			value = $.parseJSON(value);
			
			//gibt 1,2,3,4,5,6 aus (standard array.toString())
			alert(value);
			
			//gibt 5 aus (Array Zugriff funktioniert)
			alert(value[2][0]);
		});
	/* ]]> */
	</script>
</head>

<body>
	<input type="hidden" value="[[1,2],[3,4],[5,6]]" />
</body>

</html>

Wie du jetzt mit dem Array weiter verfährst, ist deine Sache. Wenn es aber korrekt gefüllt ist, liegt das Problem ja eher in der Verwendung von FLOT, was ich aber nicht kenne.

EDIT: Ich hab mir mal flott FLOT heruntergeladen (haha) und hier ein komplettes Beispiel

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html id="html" xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<title>Page title</title>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script type="text/javascript" src="jquery.flot.js"></script>

	<script type="text/javascript">
	/* <![CDATA[ */
		$(document).ready(function(){
			var value = $("input[type=hidden]").val();
			
			value = $.parseJSON(value);
			
			$.plot($("#placeholder"), [value]); 
		});
	/* ]]> */
	</script>
</head>

<body>
	<input type="hidden" value="[[1,2],[3,4],[5,6]]" />
	<div id="placeholder" style="width:600px; height:300px;"></div>
</body>

</html>
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück