smart | Webentwicklung
Alles rund um HTML5, PHP, WordPress & Co.

jqPlot: Einzelne Datenreihen eines Plots aktualisieren

30. Juli 2012
Stephan
jqPlot: Aktualisierung von einzelnen Datenreihen

In diesem Artikel zeige ich euch, wie ihr mit der JavaScript-basierten Plotting/Chart-Bibliothek jqPlot einzelne Datenreihen in euren Charts bzw. Diagrammen aktualisieren könnt.

Die einfachste aber eben nicht effizienteste bzw. unbedingt sinnvollste Methode wäre es, wenn wir einfach das DOM-Element, welches das Diagramm beinhaltet, leeren und unser Diagramm komplett neu generieren lassen.

Einfacher ist es, wenn wir einfach nur der zu aktualisierenden Datenreihe die neuen Daten zuweisen und das Diagramm anschließend aktualisieren.

HTML-JavaScript-Grundgerüst unseres jqPlots-Diagramms

Im Folgenden das Markup bzw. der Code für ein einfaches jqPlot-Beispiel:

<html>
<head>
<link type="text/css" href="http://localhost/jqplot-example/dist/jquery.jqplot.css" rel="stylesheet" />
<script type="text/javascript" src="http://localhost/jqplot-example/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://localhost/jqplot-example/dist/jquery.jqplot.js"></script>
<script type="text/javascript" src="http://localhost/jqplot-example/dist/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="http://localhost/jqplot-example/dist/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script>
var plot;
$(document).ready(function(){
	var series1 = [3,7,9,1,4,6,8,2,5];
	var series2 = [1,2,2,1,1,2,2,1,1];
	plot = $.jqplot ('chart', [series1, series2],
	{
		series: [
			{label: 'Datenreihe 1'},
			{label: 'Datenreihe 2'}
		],
		legend: {
			show: true,
			location: 'ne'
		}
	});
});
</script>
  </head>
  <body>
     <div id="chart" style="width:600px;"></div>
  </body>
</html>

Hierbei wird ein Diagramm mit 2 Datenreihen erstellt:

jqPlot: Beispiel für einen einfachen Plot

Einzelne Datenreihe aktualisieren

Um nun eine Datenreihe zu ändern, müssen wir einfach der jeweiligen Datenreihe ein Array mit unseren neuen Zahlen übergeben. Der Zugriff auf der Daten einer Datenreihe erfolgt in jqPlot wie folgt:

// gibt die aktuellen Daten der ersten Datenreihe zurück
plot.series[0].data

// aktualisiert die Daten der ersten Datenreihe (newData ist ein Array)
plot.series[0].data = newData

Mit diesem Wissen, können wir uns nun eine einfache Update-Funktion schreiben:

function updateSeries(series, newData)
{
	plot.series[series].data = newData;
	plot.replot();
}

Die replot-Funktion bewirkt das erneute plotten des Diagramms.

Wollen wir nun also unsere „Datenreihe 1“ aktualisieren, dann rufen wir einfach unsere erstelle Update-Funktion mit den nötigen Parametern auf:

updateSeries(0, [
	[1,1], [2,1], [3,1], 
	[4,1], [5,2], [6,3], 
	[7,4], [8,5], [9,6]
]);

Das Ergebnis sieht dann so aus:

jqPlot: Plot mit aktualisierter Datenreihe

Fazit

Wie ihr sehen könnt, ist das Aktualisieren von einzelnen Datenreihen in jqPlot leicht zu bewerkstelligen.

Habt ihr selbst auch schon jqPlot zum Plotten genutzt und wolltet einzelne Datenreihen updaten und wie habt ihr es umgesetzt?

Kommentare  
0 Kommentare vorhanden
0 Trackbacks/Pingbacks vorhanden
Du bist herzlich eingeladen auch ein Kommentar zu hinterlassen!
Kommentar schreiben

Vielen Dank für dein Kommentar!