Im Folgenden gehe ich die Änderungen Schritt für Schritt durch.

Das Resultat

So wird das Diagramm am Ende des Artikels aussehen. Optisch ändert sich nicht viel, allerdings kann der Nutzer nun mit der Maus über die Punkte fahren und sie anklicken.

Ausgangssituation

Im vorherigen Artikel haben wir schon ein Linien-Diagramm erstellt, dort findest Du auch den aktuellen Stand des Quellcodes. So sieht unser Diagramm momentan aus:

Tooltips zeigen detaillierte Daten

Die erste neue Funktion für unser interaktives Diagramm werden Tooltips sein. Beim überfahren mit der Maus wollen wir dem Nutzer die genauen Zahlen zeigen, die sich hinter dem Messwert verbergen. Bewegt der Nutzer die Maus über eine Spalte (also einen Tag), werden für diesen Tag die genauen Zahlen aller Messreihen angezeigt.

Dafür müssen wir als erstes die Position der Maus verfolgen.

function LineChart(container, data) {
	Chart.call(this);
	
	var chart = this;
	
	chart.container = container;
	chart.labels = data.labels;
	chart.lines = data.lines;
	chart.tooltip = null;
	
	chart.svgElement = chart.createSvgElement('svg', {
		style: 'font-family: Arial, sans-serif;'
	});
	chart.container.appendChild(chart.svgElement);
	
	window.addEventListener('resize', function() {
		chart.render();
	});
	
	chart.svgElement.addEventListener('mousemove', function(event) {
		
	});
	chart.svgElement.addEventListener('mouseleave', function(event) {
		// Tooltip löschen
	});
	
	chart.render();
}

Da die einzelnen Elemente im SVG reguläre DOM-Elemente sind, können wir ihnen auch einfach EventListener verpassen. Über das mousemove Event prüfen wir beim Bewegen der Maus, ob ein Tooltip angezeigt werden muss, beim mouseleave Event wird der Tooltip dann wieder entfernt.

var chartBounds = chart.svgElement.getBoundingClientRect();
chartBounds.top += document.body.scrollTop;
chartBounds.left += document.body.scrollLeft;
var mouse = {
	x: event.pageX - chartBounds.left,
	y: event.pageY - chartBounds.top
};

Im mousemove Event können wir die aktuelle Position der Maus leicht bestimmen. getBoundingClientRect() gibt die Position des Diagramms im Browserfenster zurück, diese muss dann allerdings noch mit der Scroll-Position verrechnet werden, um absolute Zahlen zu bekommen. In mouse speichern wir schließlich die Mausposition relativ zur linken oberen Ecke des Diagramms.

if(mouse.x > chart.padding.left && mouse.y > chart.padding.top && mouse.y < chart.height - chart.padding.bottom) {
	
} else {
	// Tooltip löschen
}

Der Tooltip soll nur angezeigt werden, wenn die Maus sich über der tatsächlichen Diagramm-Fläche befindet, aber nicht über den Beschriftungen oder der Legende. Daher prüfen wir nun, ob die Mausposition innerhalb der Diagramm-Fläche liegt.

var datumIndex = Math.max(0, Math.min(chart.labels.length - 1, Math.round((mouse.x - chart.padding.left - 20) / chart.axis.x.stepSize)));

Anschließend rechnen wir aus, über welcher Spalte sich die Maus befindet. Da die Punkte auf der X-Achse immer den gleichen Abstand haben, können wir das mit einer einfachen Formel erledigen.

if(chart.tooltip === null || chart.tooltip.datumIndex !== datumIndex) {
	
}

Nun noch ein Sonderfall: Wenn der richtige Tooltip schon angezeigt wird, brauchen wir ihn nicht neu anzeigen. Daher werden wir später das aktive Tooltip in chart.tooltip speichern und gleichen hier den Spalten-Index ab. So müssen wir den Tooltip nur neu darstellen, wenn es wirklich nötig ist.

chart.tooltip = {
	datumIndex: datumIndex,
	element: chart.createSvgElement('g', {
		'pointer-events': 'none'
	}),
	line: chart.createSvgElement('line', {
		x1: chart.padding.left + 20 + datumIndex * chart.axis.x.stepSize,
		y1: chart.padding.top,
		x2: chart.padding.left + 20 + datumIndex * chart.axis.x.stepSize,
		y2: chart.height - chart.padding.bottom,
		stroke: '#c0c0c0'
	})
};
chart.svgElement.insertBefore(chart.tooltip.line, chart.svgElement.firstChild);
chart.svgElement.appendChild(chart.tooltip.element);

Jetzt können wir das Tooltip-Element schon hinzufügen. Genau genommen fügen wir zwei Elemente hinzu: einmal den Tooltip selbst, und eine Linie, die dem Nutzer zeigt, in welcher Spalte er sich gerade befindet.

Wir speichern die beiden Elemente und den Spalten-Index in chart.tooltip, damit wir später noch darauf zugreifen können.

Das Tooltip-Element ist bisher einfach nur eine leere Gruppe. Das Linien-Element ist eine line. Die Linie geht vom oberen bis zum unteren Rand der Diagrammfläche.

Damit die Linie im Hintergrund liegt, fügen wir sie an den Anfang des SVG-Elements hinzu. Der Tooltip soll im Vordergrund liegen, daher wird er ans Ende eingefügt.

removeTooltip: {
	value: function() {
		var chart = this;
		
		if(chart.tooltip !== null) {
			chart.svgElement.removeChild(chart.tooltip.element);
			chart.svgElement.removeChild(chart.tooltip.line);
			chart.tooltip = null;
		}
	}
}

Wir schreiben jetzt noch schnell eine Funktion, die die Tooltip-Elemente wieder entfernt. Diese können wir dann an den entsprechenden Stellen einfügen.

Die Linie verhält sich schon wie erwartet, also stimmt bis hierhin schonmal alles. Ein kleiner Zwischenstand:

function LineChart(container, data) {
	Chart.call(this);
	
	var chart = this;
	
	chart.container = container;
	chart.labels = data.labels;
	chart.lines = data.lines;
	chart.tooltip = null;
	
	chart.svgElement = chart.createSvgElement('svg', {
		style: 'font-family: Arial, sans-serif;'
	});
	chart.container.appendChild(chart.svgElement);
	
	window.addEventListener('resize', function() {
		chart.render();
	});
	
	chart.svgElement.addEventListener('mousemove', function(event) {
		var chartBounds = chart.svgElement.getBoundingClientRect();
		chartBounds.top += document.body.scrollTop;
		chartBounds.left += document.body.scrollLeft;
		
		var mouse = {
			x: event.pageX - chartBounds.left,
			y: event.pageY - chartBounds.top
		};
		
		if(mouse.x > chart.padding.left && mouse.y > chart.padding.top && mouse.y < chart.height - chart.padding.bottom) {
			var datumIndex = Math.max(0, Math.min(chart.labels.length - 1, Math.round((mouse.x - chart.padding.left - 20) / chart.axis.x.stepSize)));
			
			if(chart.tooltip === null || chart.tooltip.datumIndex !== datumIndex) {
				chart.removeTooltip();
				
				chart.tooltip = {
					datumIndex: datumIndex,
					element: chart.createSvgElement('g', {
						'pointer-events': 'none'
					}),
					line: chart.createSvgElement('line', {
						x1: chart.padding.left + 20 + datumIndex * chart.axis.x.stepSize,
						y1: chart.padding.top,
						x2: chart.padding.left + 20 + datumIndex * chart.axis.x.stepSize,
						y2: chart.height - chart.padding.bottom,
						stroke: '#c0c0c0'
					})
				};
				
				chart.svgElement.insertBefore(chart.tooltip.line, chart.svgElement.firstChild);
				chart.svgElement.appendChild(chart.tooltip.element);
			}
		} else {
			chart.removeTooltip();
		}
	});
	chart.svgElement.addEventListener('mouseleave', function(event) {
		chart.removeTooltip();
	});
	
	chart.render();
}

LineChart.prototype = Object.create(Chart.prototype, {
	constructor: {
		value: LineChart
	},
	render: {
		value: function() {
			var chart = this;
			
			chart.width = chart.container.clientWidth;
			chart.height = 500;
			
			chart.svgElement.setAttribute('width', chart.width);
			chart.svgElement.setAttribute('height', chart.height);
			chart.svgElement.setAttribute('viewBox', '0 0 ' + chart.width + ' ' + chart.height);
			
			while(chart.svgElement.childNodes.length) {
				chart.svgElement.removeChild(chart.svgElement.firstChild);
			}
			
			chart.renderLegend();
			chart.renderAxis();
			chart.renderLines();
		}
	},
	renderLegend: {
		value: function() {
			var chart = this;
			
			chart.legend = chart.createSvgElement('g');
			chart.svgElement.appendChild(chart.legend);
			
			var offset = 0;
			for(var index = 0; index < chart.lines.length; index++) {
				var legendItemElement = chart.createSvgElement('g', {
					transform: 'translate(' + offset + ', 0)'
				});
				chart.legend.appendChild(legendItemElement);
				
				var circleElement = chart.createSvgElement('circle', {
					cx: 10,
					cy: 8,
					r: 3.5,
					fill: chart.colors[index % chart.colors.length],
					stroke: 'none'
				});
				legendItemElement.appendChild(circleElement);
				
				var textElement = chart.createSvgElement('text', {
					x: 20,
					y: 13,
					'font-size': 14
				});
				legendItemElement.appendChild(textElement);
				
				textElement.textContent = chart.lines[index].title;
				
				offset += legendItemElement.getBBox().width + 20;
			}
		}
	},
	renderAxis: {
		value: function() {
			var chart = this;
			
			chart.axis = {
				x: {
					nthLabel: 1
				},
				y: {
					maximum: 1,
					step: 1
				}
			};
			
			for(var lineIndex = 0; lineIndex < chart.lines.length; lineIndex++) {
				for(var datumIndex = 0; datumIndex < chart.lines[lineIndex].data.length; datumIndex++) {
					chart.axis.y.maximum = Math.max(chart.axis.y.maximum, chart.lines[lineIndex].data[datumIndex]);
				}
			}
			
			while(chart.axis.y.step * 7 < chart.axis.y.maximum) {
				chart.axis.y.step *= 10;
			}
			if(chart.axis.y.step % 2 === 0 && chart.axis.y.step * 3.5 > chart.axis.y.maximum) {
				chart.axis.y.step /= 2;
			}
			
			chart.axis.y.maximum = Math.ceil(chart.axis.y.maximum / chart.axis.y.step) * chart.axis.y.step;
			
			chart.axis.x.element = chart.createSvgElement('g');
			chart.svgElement.appendChild(chart.axis.x.element);
			
			chart.axis.y.element = chart.createSvgElement('g');
			chart.svgElement.appendChild(chart.axis.y.element);
			
			for(var index = 0; index < chart.labels.length; index++) {
				chart.axis.x.element.appendChild(chart.renderXAxisLabel(chart.labels[index]));
			}
			
			for(var y = 0; y <= chart.axis.y.maximum; y += chart.axis.y.step) {
				chart.axis.y.element.appendChild(chart.renderYAxisLabel(chart.formatNumber(y)));
			}
			
			chart.padding = {
				top: chart.legend.getBBox().height + 20,
				left: -1 * Math.min(chart.axis.x.element.getBBox().x + 20, chart.axis.y.element.getBBox().x - 8),
				bottom: chart.axis.x.element.getBBox().height
			};
			
			chart.axis.x.element.setAttribute('transform', 'translate(0, ' + (chart.height - chart.padding.bottom) + ')');
			chart.axis.x.stepSize = chart.labels.length > 1 ? (chart.width - chart.padding.left - 40) / (chart.labels.length - 1) : 20;
			
			while(chart.axis.x.stepSize * chart.axis.x.nthLabel < 20) {
				chart.axis.x.nthLabel++;
			}
			
			if(chart.axis.x.nthLabel > 1) {
				for(var index = chart.axis.x.element.childNodes.length - 1; index > 0; index--) {
					if(index % chart.axis.x.nthLabel) {
						chart.axis.x.element.removeChild(chart.axis.x.element.childNodes[index]);
					}
				}
			}
			
			for(var index = 0; index < chart.axis.x.element.childNodes.length; index++) {
				chart.axis.x.element.childNodes[index].setAttribute('transform', 'translate(' + (chart.padding.left + 20 + chart.axis.x.nthLabel * index * chart.axis.x.stepSize) + ', 0)');
			}
			
			chart.axis.y.element.setAttribute('transform', 'translate(' + chart.padding.left + ', 0)');
			chart.axis.y.stepSize = (500 - chart.padding.bottom - chart.padding.top) / (chart.axis.y.maximum / chart.axis.y.step);
			for(var index = 0; index < chart.axis.y.element.childNodes.length; index++) {
				chart.axis.y.element.childNodes[index].setAttribute('transform', 'translate(0, ' + (500 - chart.padding.bottom - index * chart.axis.y.stepSize) + ')');
			}
		}
	},
	renderXAxisLabel: {
		value: function(label) {
			var chart = this;
			
			var labelElement = chart.createSvgElement('g');
			
			var lineElement = chart.createSvgElement('line', {
				x1: 0,
				y1: 0,
				x2: 0,
				y2: 5,
				stroke: '#c0c0c0'
			});
			labelElement.appendChild(lineElement);
			
			var textElement = chart.createSvgElement('text', {
				x: -15,
				y: 7,
				'font-size': 11,
				'text-anchor': 'end',
				transform: 'rotate(-45 0 0)'
			});
			textElement.textContent = label;
			labelElement.appendChild(textElement);
			
			return labelElement;
		}
	},
	renderYAxisLabel: {
		value: function(label) {
			var chart = this;
			
			var labelElement = chart.createSvgElement('g');
			
			var lineElement = chart.createSvgElement('line', {
				x1: 0,
				y1: 0,
				x2: chart.width,
				y2: 0,
				stroke: '#c0c0c0'
			});
			labelElement.appendChild(lineElement);
			
			var textElement = chart.createSvgElement('text', {
				x: -8,
				y: 4,
				'font-size': 11,
				'text-anchor': 'end'
			});
			textElement.textContent = label;
			labelElement.appendChild(textElement);
			
			return labelElement;
		}
	},
	renderLines: {
		value: function() {
			var chart = this;
			
			for(var lineIndex = 0; lineIndex < chart.lines.length; lineIndex++) {
				chart.lines[lineIndex].element = chart.createSvgElement('g', {
					transform: 'translate(' + (chart.padding.left + 20) + ', ' + (500 - chart.padding.bottom) + ')'
				});
				chart.svgElement.appendChild(chart.lines[lineIndex].element);
				
				var points = [];
				chart.lines[lineIndex].circles = [];
				
				for(var datumIndex = 0; datumIndex < chart.lines[lineIndex].data.length; datumIndex++) {
					var point = {
						x: datumIndex * chart.axis.x.stepSize,
						y: -1 * chart.lines[lineIndex].data[datumIndex] * (chart.axis.y.stepSize / chart.axis.y.step),
					};
					points.push(point.x + ',' + point.y);
					
					if(chart.axis.x.stepSize >= 10) {
						var circleElement = chart.createSvgElement('circle', {
							cx: point.x,
							cy: point.y,
							r: 3.5,
							fill: chart.colors[lineIndex % chart.colors.length],
							stroke: 'none'
						});
						chart.lines[lineIndex].element.appendChild(circleElement);
						chart.lines[lineIndex].circles.push(circleElement);
					}
				}
				
				var lineElement = chart.createSvgElement('polyline', {
					points: points.join(' '),
					stroke: chart.colors[lineIndex % chart.colors.length],
					'stroke-width': 2,
					fill: 'none'
				});
				chart.lines[lineIndex].element.appendChild(lineElement);
				chart.lines[lineIndex].line = lineElement;
			}
		}
	},
	removeTooltip: {
		value: function() {
			var chart = this;
			
			if(chart.tooltip !== null) {
				chart.svgElement.removeChild(chart.tooltip.element);
				chart.svgElement.removeChild(chart.tooltip.line);
				chart.tooltip = null;
			}
		}
	}
});

Als nächstes brauchen wir das Tooltip-Element.

var textElement = chart.createSvgElement('text', {
	x: 10,
	y: 21,
	'font-size': 12
});
textElement.textContent = chart.labels[datumIndex];
chart.tooltip.element.appendChild(textElement);

Die erste Zeile im Tooltip soll das Label der Spalte sein, also das formatierte Datum.

for(var lineIndex = 0; lineIndex < chart.lines.length; lineIndex++) {
	var textElement = chart.createSvgElement('text', {
		x: 10,
		y: 21 + (lineIndex + 1) * 16,
		'font-size': 12
	});
	chart.tooltip.element.appendChild(textElement);
	
	var titleElement = chart.createSvgElement('tspan', {
		fill: chart.colors[lineIndex % chart.colors.length]
	});
	textElement.appendChild(titleElement);
	titleElement.textContent = chart.lines[lineIndex].title + ': ';
	
	var valueElement = chart.createSvgElement('tspan', {
		'font-weight': 'bold'
	});
	textElement.appendChild(valueElement);
	valueElement.textContent = chart.formatNumber(chart.lines[lineIndex].data[datumIndex]);
}

Außerdem wollen wir die Daten jeder Datenreihe darstellen. Dafür zeigen wir den Namen der Datenreihe und den Wert der Datenreihe in der aktiven Spalte. Um den Namen der Datenreihe einzufärben, nutzen wir tspan Elemente.

var box = chart.tooltip.element.getBBox();
var boxElement = chart.createSvgElement('rect', {
	x: 0,
	y: 0,
	width: box.width + 20,
	height: box.height + 20,
	rx: 3,
	ry: 3,
	fill: 'rgba(255, 255, 255, .9)',
	stroke: '#c0c0c0'
});
chart.tooltip.element.insertBefore(boxElement, chart.tooltip.element.firstChild);

Außerdem brauchen wir noch eine Box im Hintergrund, um dem Tooltip einen Hintergrund und Rahmen zu geben.

var left = chart.padding.left + 20 + datumIndex * chart.axis.x.stepSize - box.width - 30;
var top = mouse.y - (box.height + 20) / 2;
if(left < 0) {
	left += box.width + 40;
}
top = Math.max(chart.padding.top, Math.min(500 - chart.padding.bottom - box.height - 20, top));
chart.tooltip.element.setAttribute('transform', 'translate(' + left + ', ' + top + ')');

Nun zur Position des Tooltips: Die vertikale Position machen wir vom Mauszeiger abhängig. So sollte der Tooltip immer auf einer Höhe mit dem Mauszeiger sein. Die horizontale Position berechnen wir anhand der Spalte, damit der Tooltip immer links neben der vertikalen Linie steht.

Sonderfall: Wenn der Tooltip links aus dem Diagramm herausragen würde, positionieren wir es stattdessen rechts von der Linie.

Hover und Klick

Nehmen wir an, hinter den einzelnen Messpunkten gibt es weitere Informationen. Beispielsweise könnte sich beim Klick auf den Datenpunkt eine genaue Auswertung oder eine Übersicht über den Tag öffnen. Daher machen wir die Datenpunkte jetzt einfach klickbar. Und damit man sieht, dass beim Klicken was passiert, heben wir die Punkte beim Hover etwas hervor.

renderLines: {
	value: function() {
		var chart = this;
		
		for(var lineIndex = 0; lineIndex < chart.lines.length; lineIndex++) {
			chart.lines[lineIndex].element = chart.createSvgElement('g', {
				transform: 'translate(' + (chart.padding.left + 20) + ', ' + (500 - chart.padding.bottom) + ')'
			});
			chart.svgElement.appendChild(chart.lines[lineIndex].element);
			
			var points = [];
			chart.lines[lineIndex].circles = [];
			
			for(var datumIndex = 0; datumIndex < chart.lines[lineIndex].data.length; datumIndex++) {
				var point = {
					x: datumIndex * chart.axis.x.stepSize,
					y: -1 * chart.lines[lineIndex].data[datumIndex] * (chart.axis.y.stepSize / chart.axis.y.step),
				};
				points.push(point.x + ',' + point.y);
				
				if(chart.axis.x.stepSize >= 10) {
					var circleElement = chart.createSvgElement('circle', {
						cx: point.x,
						cy: point.y,
						r: 3.5,
						fill: chart.colors[lineIndex % chart.colors.length],
						stroke: 'none',
						cursor: 'pointer'
					});
					chart.lines[lineIndex].element.appendChild(circleElement);
					chart.lines[lineIndex].circles.push(circleElement);
					
					circleElement.addEventListener('mouseenter', function(event) {
						event.target.setAttribute('r', 4.5);
					});
					circleElement.addEventListener('mouseleave', function(event) {
						event.target.setAttribute('r', 3.5);
					});
					circleElement.addEventListener('click', function(event) {
						// Klick-Event
					});
				}
			}
			
			var lineElement = chart.createSvgElement('polyline', {
				points: points.join(' '),
				stroke: chart.colors[lineIndex % chart.colors.length],
				'stroke-width': 2,
				fill: 'none'
			});
			chart.lines[lineIndex].element.insertBefore(lineElement, chart.lines[lineIndex].element.firstChild);
			chart.lines[lineIndex].line = lineElement;
		}
	}
},

In der Funktion renderLines() hängen wir an die Punkte drei EventListener an: mouseenter, mouseleave und click. Beim mouseenter vergrößern wir den Radius des Punktes, beim mouseleave verkleinern wir ihn wieder auf den Originalwert. So wird der Punkt beim Überfahren mit der Maus hervorgehoben. Nebenbei geben wir den Punkten noch die Eigenschaft cursor: 'pointer'.

Außerdem passen wir den Code noch etwas an, damit die Linie vor den Punkten eingefügt wird, statt hinter den Punkten.

Im Klick-Event könnten wir nun noch den Klick auf den Punkt abfangen, um beispielsweise auf eine Detailseite weiterzuleiten. Da wir aber keine Detailseite haben, spare ich mir das an dieser Stelle.

Fazit: SVG ist super für interaktivität

So sieht nun unser Endresultat aus. Der Nutzer kann nun mit dem Diagramm interagieren.

SVG-Grafiken sind super für Interaktivität. Auf die Elemente kann man mit JavaScript zugreifen und ihnen EventListeners anhängen. So kann man in diesem Fall Diagrammen sehr einfach einen Mehrwert geben.

Im nächsten Artikel schauen wir uns einen neuen Diagramm-Typen an.

1. Visuelle Hierarchie

Wer viel Text im Internet veröffentlicht, der sollte seinen Lesern die Möglichkeit geben, zwischen verschiedenen Textelementen zu unterscheiden, um die Bedeutung eines Textes besser und schneller erfassen zu können. Die Bedeutung eines Textelements kann zum Beispiel durch seine Größe oder Gewichtung verdeutlicht werden. Ein Webdesigner, der seinen Job besonders ernst nimmt, legt für diese Zwecke eine »Schriftgrößen-Skala« an. Diese könnte etwa so aussehen, dass normaler Fließtext die Schriftgröße 12 erhält, Zwischenüberschriften 18 und Hauptüberschriften die Schriftgröße 24. Wenn man sich nicht gerade für »Comic Sans« oder »Impact« als Schriftart entscheidet, ist auf diese Weise ein harmonisches Schriftbild schon fast garantiert.

Ein Fehler, der leider auf sehr vielen Websites gemacht wird, ist der, alle Textelemente in derselben Schriftgröße zu präsentieren. Dies mag aus Sicht des Entwicklers einfach und wartungsarm sein, für viele Leser stellt es jedoch eine Barriere dar und hält sie davon ab, den Sinn eines Textes überhaupt zu erfassen.

2. Zwischenüberschriften

Insbesondere längere Texte sollten unbedingt durch Zwischenüberschriften aufgelockert werden, und zwar unter Zuhilfenahme einer Schriftgrößen-Skala (siehe Punkt 1). Zwischenüberschriften sorgen dafür, dass Leser die Kernaussagen eines Textes viel schneller erfassen können, ohne gleich den gesamten Text durchlesen zu müssen. Sie können dem Leser auch helfen, einen Einstieg irgendwo mitten im Text zu finden. Es ist ein Mythos zu glauben, dass jeder Leser einen Text immer vom ersten bis zum letzten Wort durchliest. Viele möchten an einer anderen Stelle einsteigen. Geschickt gesetzte Zwischenüberschriften können dies erheblich erleichtern.

3. Optimale Zeilenlänge

Insbesondere bei der Desktop-Ansicht der eigenen Website läuft man schnell Gefahr, den Leser mit zu langen Zeilen zu überfordern. Eine Faustregel (die ursprünglich aus dem Buchdruck stammt) besagt, dass eine Zeile nie mehr als 12 Wörter enthalten sollte, um eine gute Lesbarkeit zu gewährleisten. Mit jedem Wort, das darüber hinausgeht, wird es für das menschliche Auge schwieriger, den Anfang der nächsten Zeile zu finden.

Besonders wichtig ist diese Regel bei langen Fließtexten, zum Beispiel Fach- oder Blog-Artikeln. Um dem Leser hier optimalen Lesekomfort zu bieten, sollte man die Schriftgröße so weit erhöhen bis die Regel erfüllt ist. (Natürlich sollte dabei auch die Zeilenhöhe entsprechend angepasst werden.)

Ein Fließtext in Schriftgröße 24 mit maximal 12 Wörtern pro Zeile ist wesentlich lesbarer als einer in Schriftgröße 12 mit 24 Wörtern pro Zeile. Für einen Webdesigner gibt es keinen Grund sich für große, gut lesbare Schrift zu schämen!

4. Anzahl und Auswahl von Schriftarten

Man sollte weder zu viele Schriftarten verwenden (was schnell unübersichtlich wirkt) noch sich störrisch an nur eine einzige klammern (was schnell einfallslos wirkt). In der Praxis hat sich ein Mix aus zwei, maximal drei, Schriftarten bewährt. Auch bei sehr großen Websites mit vielen redaktionellen Inhalten reicht dies in der Regel völlig aus.

Was immer gut funktioniert, ist die Paarung einer Serifenschrift mit einer Nichtserifenschrift. Schöne Kombinationen gibt es bei Font Pair zu bewundern.

Zum Glück sind die Zeiten vorbei, in denen man auf »browser-sichere« Schriftarten zurückgreifen musste. Heutzutage findet man bei Google Web Fonts, Typekit oder FontSquirrel ein überwältigendes Angebot an Schriften.

Bei den beiden erstgenannten werden die Schriften via Javascript in die Website eingebettet, weswegen es sich sowieso empfiehlt, die Anzahl der Schriftarten auf zwei zu begrenzen. Alles andere wäre gerade auf mobilen Endgeräten nicht mehr zu vertreten, weil die Wartezeiten bis zum Laden des Javascripts zu lang wären.

Weitere Quellen für kostenlose Web-Schriften finden sich im Artikel @font-face kompatible Schriften gratis im Netz. Außerdem zeigt Lars Ebert in diesem Artikel, welche Möglichkeiten @font-face darüber hinaus noch bietet.

5. Design folgt Funktion

Im Gegensatz zu Druckerzeugnissen nimmt Typografie im Web deutlich mehr Funktionen wahr. Die Benutzer interagieren mit Links, Buttons, Hauptmenüs, Untermenüs etc. Diese unterschiedlichen Funktionen kann und sollte ein Webdesigner mit Hilfe von Typografie hervorheben und verdeutlichen.

Ein Link zum Beispiel sollte farblich vom umgebenden Fließtext abgesetzt sein. Ist er das nicht, dann sollte er zumindest unterstrichen sein, um dem Benutzer seine Funktion zu verdeutlichen. Mittels CSS lassen sich auch explizit externe Links hervorheben, um dem Nutzer einen weiteren Mehrwert zu bieten.

Ähnlich verhält es sich mit anderen Elementen auf der Website. Das Hauptmenü etwa sollte zwar eine der beiden unter Punkt 4 definierten Schriftarten aufweisen. Es spricht aber nichts dagegen, die einzigartige Funktion, die das Hauptmenü erfüllt, mit anderen optischen Mitteln zu verdeutlichen. So könnte man es zum Beispiel auf einer farblich hinterlegten Leiste platzieren, die Buchstaben mittels CSS als Großbuchstaben ausgeben oder den horizontalen Abstand zwischen den Buchstaben leicht erhöhen.

6. Ausreichend Weißraum

Weißraum ist eigentlich etwas ziemlich banales. Es ist die Fläche einer Website, die leer ist und keinen Text oder andere Inhalte enthält. Der Weißraum kann auch vergrößert werden, indem man einfach nur die Zeilenhöhe eines Fließtextes oder die Abstände zwischen zwei Absätzen erhöht.

Websites mit viel geschickt eingesetztem Weißraum wirken großzügiger und edler. Der Effekt ist so ähnlich wie beim Betreten eines Wohnhauses. Ein großer Salon wirkt wesentlich edler, prächtiger und einladender als ein mit Kartons zugestellter Flur in einer 1-Zimmer-Wohnung.

Gerade im Web gibt es eigentlich keinen Grund, sich diesen Effekt nicht zunutze zu machen. Zumal es ja im Gegensatz zum genannten Beispiel aus der Immobilienbranche keinerlei Mehrkosten verursacht.

Es ist auffallend und schade, dass bei vielen Websites Platz scheinbar als etwas kostbares gesehen wird. Dort wird dann oft versucht, möglichst viel winzigen Text mit geringer Zeilenhöhe auf eine Seite zu stopfen.

Hier gilt es anzusetzen und den eigenen Besuchern eine Website zu präsentieren, die mit viel luftigem Weißraum glänzt und zum Lesen einlädt.

7. Kurze Wörter bevorzugen

Im Gegensatz zu vielen andere Sprachen bietet die deutsche Sprache die Möglichkeit unendlich viele Hauptwörter miteinander zu verbinden und somit jeweils ein neues Wort zu erschaffen. Manchmal entstehen dabei regelrechte Wortungetüme.

Die Browser sind auch im Jahre 2016 leider noch nicht in der Lage, die Silben eines solchen Wortes automatisch und an den richtigen Stellen zu trennen. Damit es keine hässlichen Überlappungen gibt (gerade auch bei der mobilen Ansicht einer Website), sollte man solche Wörter tendenziell vermeiden und wenn das nicht möglich ist, einen Notbindestrich setzen, wo eigentlich keiner hingehört.

Auf diese Weise wird das Wort auch in der mobilen Ansicht einer Website einigermaßen korrekt umgebrochen und läuft nicht über den Bildschirmrand.

Alternativ kann auch mit der HTML-Entity ­ ein so genannter weicher Bindestrich angezeigt werden. Damit wird dem Browser mitgeteilt, dass an dieser Stelle mit einem Bindestrich bei Bedarf umgebrochen werden darf.

Fazit: Es sind die kleinen Dinge…

Bei Typografie gibt es viele Kleinigkeiten zu beachten, aber auch die Grundlagen müssen stimmen. Mit einer guten Kombination aus Schriftkombinationen, Schriftgrößen, Farben und Textfluss kann dem Leser das Lesen so einfach wie möglich gemacht werden. Je weiter man ins Detail geht, desto besser ist meistens auch das Ergebnis. Der Rest hängt dann nur noch von der Textqualität ab.

Es gibt bereits einige Tools und Bibliotheken, die uns bei der Nutzung von Diagrammen unterstützen können. Wer neugierig ist, gerne selbst experimentiert oder einfach nicht die passende Bibliothek findet, kann trotzdem mit JavaScript und SVG sehr einfach eigene Diagramme erstellen. In diesem Artikel erfährst Du, wie Du Linien-Diagramme aus Deinen Daten generieren kannst.

Vorab das Resultat

So wird das Diagramm am Ende dieses Tutorials aussehen. Das Prinzip ist gar nicht so kompliziert, wie es auf den ersten Blick aussieht. Im folgenden kannst Du die Entstehung des Diagramms Schritt für Schritt nachvollziehen.

Schritt 1: HTML

Bevor wir die erste Zeile JavaScript schreiben, sollten wir erst das HTML-Markup schreiben. Mein Markup sieht so aus:

<!DOCTYPE html>
<html lang="de">
<head>
	<meta charset="UTF-8">
	<title>Lininen-Diagramm</title>
</head>
<body>
	<div id="chart">
	
	</div>
	
	<script type="text/javascript" src="js/chart.js"></script>
	<script type="text/javascript" src="js/line-chart.js"></script>
	<script type="text/javascript" src="js/main.js"></script>
</body>
</html>

In dem div#chart wird später das Diagramm eingefügt. Ich spalte mein JavaScript gerne in übersichtliche Teile auf, deshalb habe ich drei JavaScript-Dateien eingebunden: chart.js, line-charts und main.js. Da ich plane, außer Linien-Diagrammen noch weitere Diagramm-Typen zu entwickeln, teile ich den Diagramm-Code auf: In chart.js kommt für alle Typen gültiger Code, in line-charts.js der spezialisierte Code für Linien-Diagramme. Diese beiden Dateien sind vom restlichen Code für die Webseite getrennt, sodass ich sie später wieder nutzen kann. In main.js geschieht genau diese Nutzung.

Schritt 2: Prototyping

In JavaScript Objekt-orientiert zu arbeiten, ist gar nicht so schwer, wie es sich anhört. Im Grunde tut es jeder, denn JavaScript besteht quasi nur aus Objekten.

Objekt-Prototypen kann man in JavaScript sehr einfach ähnlich wie Klassen in anderen Sprachen nutzen. Für dieses Tutorial werden wir zwei Objekt-Prototypen benötigen: Chart und LineChart, wobei der Prototyp für die Linien-Diagramme einige Funktionen vom allgemeineren Diagramm-Prototypen erben wird.

function Chart() {}

Chart.prototype = {};

Dies ist unser Chart-Prototype. Die Funktion Chart() wird als Konstruktor genutzt, im Objekt Chart.prototype können später Funktionen und Variablen definiert werden, die wir in allen Diagrammen benötigen könnten.

Bisher ist der Prototyp noch leer, im Laufe des Artikels werden hier Funktionen hinzukommen.

function LineChart(container, data) {
	Chart.call(this);
}

LineChart.prototype = Object.create(Chart.prototype, {
	constructor: {
		value: LineChart
	}
});

Auch der Prototype LineChart bleibt vorerst leer. Hier führen wir lediglich die nötigen Schritte durch, um von Chart zu erben. In Zeile 2 rufen wir innerhalb des Konstruktors den Konstruktor von Chart auf. Mit .call(this) sorgen wir dafür, dass das Schlüsselwort this im Eltern-Konstruktor auf das gleiche Objekt referenziert wie hier. Mit Object.create() erstellen wir den Objekt-Prototypen für LineChart, wobei dieser Prototype wiederum den Prototypen von Chart als Prototypen verwendet. So entsteht eine Prototype-Kette, in der Objekte von Chart zu LineChart »durchgereicht« werden.

Da der Chart-Prototype die Funktion Chart als Konstruktor verwendet und der LineChart-Prototype auf Basis dieses Prototyps erstellt wurde, benutzt der LineChart-Prototype bisher auch diesen Konstruktor. Deshalb definieren wir abschließend noch in Zeile 6-8 die Funktion LineChart als korrekten Konstruktor für diesen Prototypen.

Schritt 3: Daten

Wer ein Diagramm benötigt, hat meist schon irgendwelche Daten. Für diese Demo habe ich aber keine. Deshalb habe ich schnell ein paar Zeilen JavaScript geschrieben, die mir zufällige Daten generieren.

var weekdays = ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'];
var months = ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'];
var from = new Date(2015, 8, 21-28, 0, 0, 0);
var to = new Date(2015, 8, 21, 0, 0, 0);

var data = {
	labels: [],
	lines: [{
		title: 'Messwerte 1',
		data: []
	}, {
		title: 'Messwerte 2',
		data: []
	}]
};

while(from <= to) {
	data.labels.push(weekdays[from.getDay()] + ', ' + from.getDate() + '. ' + months[from.getMonth()] + ' ' + from.getFullYear());
	
	for(var lineIndex = 0; lineIndex < data.lines.length; lineIndex++) {
		data.lines[lineIndex].data.push(Math.round(lineIndex * 1000 + 500 + (Math.random() + Math.random()) * 500));
	}
	
	from.setDate(from.getDate() + 1);
}

Wichtig ist hier für dieses Tutorial nur das Format der Daten. Alle Daten liegen in dem Objekt data. Dieses Objekte besteht aus labels und lines. In labels wird die Beschriftung für die X-Achse liegen, in lines die darzustellenden Linien. Jede Linie besteht wiederum aus einem Titel und einem Array mit den Datenwerten.

Der Aufbau der Daten hängt natürlich hauptsächlich von der Datenquelle ab. Kommen die Daten in einem anderen Format aus der Quelle, können diese entweder vorher konvertiert werden, oder die Nutzung innerhalb von LineChart wird angepasst.

Schritt 4: Instanziierung des Objektes

Nichts, was wir in unsere Prototypen schreiben, wird ausgeführt. Zumindest nicht, bevor wir den Prototyp nicht tatsächlich nutzen. Deshalb fügen wir dem Code jetzt eine weitere Zeile hinzu, um den Prototypen zu instanziieren.

new LineChart(document.getElementById('chart'), data);

Mit dem Schlüsselwort new lassen wir den Konstruktor ein neues Objekt aus dem Prototypen instanziieren. Wir übergeben hier zum einen den Container, in welchen das Diagramm eingefügt werden soll, zum anderen das Objekt mit den Daten.

Schritt 5: Erstellen des SVG-Elements

Wir werden zum Darstellen des Diagramms ein SVG-Element benutzen. SVG ist vergleichbar mit dem HTML5 Canvas, es werden geometrische Formen, Texte etc. auf einer Arbeitsfläche abgebildet. Ein wichtiger Unterschied zum Canvas: Mit den Elementen in einem SVG kann der Nutzer interagieren. Auf alle Formen können EventListener gelegt werden, so kann beispielsweise beim Klick auf einen Datenpunkt eine Aktion ausgeführt werden und die Elemente können auf das Überfahren mit der Maus reagieren.

Da SVG nicht Bestandteil des HTML-Standards ist, müssen die SVG-Elemente mit einem speziellen Namespace erstellt werden. Dazu gibt es die Funktion document.createElementNS(). Um das erstellen von SVG-Elementen einfacher zu gestalten, schreiben wir dazu eine Helfer-Funktion. Da alle Diagramm-Typen diese Funktion nutzen werden, platzieren wir sie im Chart-Prototyp:

function Chart() {}

Chart.prototype = {
	createSvgElement: function(tag, attributes) {
		var element = document.createElementNS('http://www.w3.org/2000/svg', tag);
		for(var key in attributes) {
			element.setAttribute(key, attributes[key]);
		}
		return element;
	}
};

Im Konstruktor von LineChart können wir diese Funktion nun nutzen, um das SVG-Element zu generieren:

function LineChart(container, data) {
	Chart.call(this);
	
	var chart = this;
	
	chart.container = container;
	chart.labels = data.labels;
	chart.lines = data.lines;
	
	chart.svgElement = chart.createSvgElement('svg', {
		style: 'font-family: Arial, sans-serif;'
	});
	chart.container.appendChild(chart.svgElement);
}

Zu Anfang jeder Funktion innerhalb eines Prototyps kopiere ich meistens den Verweis this in eine separate Variable. Innerhalb der Funktion kann ich dann, auch in anonymen Funktionen, wo this gegebenenfalls auf ein anderes Objekt verweist, trotzdem noch auf das Objekt zugreifen. In diesen paar Zeilen Code ist das noch nicht nötig, aber spätestens wenn wir EventListener definieren, wird das nützlich werden.

Außerdem speichere ich die übergebenen Parameter als Variablen des Objektes, damit ich in anderen Funktionen des Objektes wieder darauf zugreifen kann.

Schließlich nutze ich die Funktion createSvgElement(), um das SVG-Element zu generieren und füge dies dann dem übergebenen Container mit appendChild() an.

Noch hat das Element keine definierte Größe. Diese definieren wir separat. Das macht Sinn, denn wir werden das jedes mal wieder tun, wenn sich die Fenstergröße ändert, um den jeweils verfügbaren Platz auszunutzen. Wird das Fenster schmaler, zeigen wir zum Beispiel weniger Beschriftung der X-Achse.

Im Prototyp legen wir deshalb eine Funktion an, die für das Rendern des Diagramms zuständig ist.

LineChart.prototype = Object.create(Chart.prototype, {
	constructor: {
		value: LineChart
	},
	render: {
		value: function() {
			
		}
	}
});

Im Konstruktor binden wir dann diese Funktion an das Resize-Event des Browser-Fensters. Damit wir das Diagramm nicht erst sehen, wenn der Nutzer sein Fenster tatsächlich vergrößert oder verkleinert, rufen wir diese Funktion auch noch direkt auf.

function LineChart(container, data) {
	Chart.call(this);
	
	var chart = this;
	
	chart.container = container;
	chart.labels = data.labels;
	chart.lines = data.lines;
	
	chart.svgElement = chart.createSvgElement('svg', {
		style: 'font-family: Arial, sans-serif;'
	});
	chart.container.appendChild(chart.svgElement);
	
	window.addEventListener('resize', function() {
		chart.render();
	});
	
	chart.render();
}

In der render()-Funktion werden zunächst nur die Dimensionen der SVG-Grafik definiert:

LineChart.prototype = Object.create(Chart.prototype, {
	constructor: {
		value: LineChart
	},
	render: {
		value: function() {
			var chart = this;
			
			chart.width = chart.container.clientWidth;
			chart.height = 500;
			
			chart.svgElement.setAttribute('width', chart.width);
			chart.svgElement.setAttribute('height', chart.height);
			chart.svgElement.setAttribute('viewBox', '0 0 ' + chart.width + ' ' + chart.height);
			
			while(chart.svgElement.childNodes.length) {
				chart.svgElement.removeChild(chart.svgElement.firstChild);
			}
		}
	}
});

Außer der Breite und Höhe setzen wir hier noch das Attribut viewBox. Mit viewBox wird definiert, wie das Koordinatensystem innerhalb des SVG-Elements auf die angezeigte SVG-Grafik übertragen werden. Da wir hier die Dimensionen der ViewBox genau gleich den Dimensionen der Grafik selbst gesetzt haben, werden die Koordinaten 1:1 übertragen, das heißt, ein Pixel am Bildschirm entspricht einem Pixel im SVG-Koordinatensystem.

Bevor wir neue Elemente im SVG-Element darstellen, entfernen wir alle alten Elemente. Dazu entfernen wir mit removeChild einfach so lange das erste Element im SVG, bis keine Elemente mehr vorhanden sind. Nun können wir uns an das Rendering der Elemente machen.

Schritt 6: Anzeigen der Legende

Als erstes werden wir die Legende auf den Bildschirm bringen. Dazu müssen wir als erstes die unterschiedlichen Farben für die Datensätze definieren.

Chart.prototype = {
	colors: ['#14568a', '#8a1616', '#dddb2f', '#1d7e07', '#2c4a4a'],
	createSvgElement: function(tag, attributes) {
		var element = document.createElementNS('http://www.w3.org/2000/svg', tag);
		for(var key in attributes) {
			element.setAttribute(key, attributes[key]);
		}
		return element;
	}
};

Im Array colors habe ich fünf verschiedene Farbtöne definiert, mit denen ich meine Linien färben kann. Die Farben speichere ich im Chart-Prototype, weil ich diese Farben auch für andere Diagramm-Typen nutzen werde.

Im LineChart-Prototype fügen wir eine neue Funktion renderLegend() hinzu und rufen diese am Ende der render()-Funktion auf:

render: {
	value: function() {
		var chart = this;
		
		chart.width = chart.container.clientWidth;
		chart.height = 500;
		
		chart.svgElement.setAttribute('width', chart.width);
		chart.svgElement.setAttribute('height', chart.height);
		chart.svgElement.setAttribute('viewBox', '0 0 ' + chart.width + ' ' + chart.height);
		
		while(chart.svgElement.childNodes.length) {
			chart.svgElement.removeChild(chart.svgElement.firstChild);
		}
		
		chart.renderLegend();
	}
},
renderLegend: {
	value: function() {
		var chart = this;
		
		chart.legend = chart.createSvgElement('g');
		chart.svgElement.appendChild(chart.legend);
	}
}

Wir erstellen ein neues G-Element – G–Elemente sind quasi Gruppen, welche sich gemeinsam beeinflussen lassen – für die Legende hinzu. Wir brauchen keine ID oder ähnliches, um das Element später wieder zu referenzieren, denn wir speichern uns einen Verweis direkt im Diagramm-Objekt unter chart.legend. Das Element fügen wir dann zum SVG-Element hinzu.

Anschließend fügen wir für jede Linie im Diagramm ein neues G-Element zur Legende hinzu.

var offset = 0;
for(var index = 0; index < chart.lines.length; index++) {
	var legendItemElement = chart.createSvgElement('g', {
		transform: 'translate(' + offset + ', 0)'
	});
	chart.legend.appendChild(legendItemElement);
}

Über das Attribut transform wenden wir eine Transformation auf die Gruppe an – in diesem Fall eine Verschiebung um offset auf der X-Achse und um 0 auf der Y-Achse. Mehr zu offset folgt gleich.

var offset = 0;
for(var index = 0; index < chart.lines.length; index++) {
	var legendItemElement = chart.createSvgElement('g', {
		transform: 'translate(' + offset + ', 0)'
	});
	chart.legend.appendChild(legendItemElement);
	
	var circleElement = chart.createSvgElement('circle', {
		cx: 10,
		cy: 8,
		r: 3.5,
		fill: chart.colors[index % chart.colors.length],
		stroke: 'none'
	});
	legendItemElement.appendChild(circleElement);
	
	var textElement = chart.createSvgElement('text', {
		x: 20,
		y: 13,
		'font-size': 14
	});
	legendItemElement.appendChild(textElement);
	
	textElement.textContent = chart.lines[index].title;
}

Jeder Eintrag in der Legende wird aus einem Kreis in der Farbe des Datensatzes und aus dem Titel des Datensatzes bestehen. Also generieren wir ein Circle-Element für den Kreis und ein Text-Element für den Titel.

Den Mittelpunkt des Kreises legen wir über cx und cy fest. Den Radius bestimmt r. Über fill legen wir fest, in welcher Farbe der Kreis gefüllt werden soll.

Die Position des Text-Elements legen wir über die Attribute x und y fest. Die Y-Position meint hier übrigens die Grundlinie des Textes. Das Attribut font-size legt die Schriftgröße fest. Der Text für das Text-Element stammt ist chart.lines[index].title.

Aktuell werden alle G-Elemente in der Legende noch an der gleichen Stelle angezeigt. Damit die Elemente korrekt nebeneinander stehen, müssen wir in jedem Schleifen-Durchlauf den Wert von offset um die Breite des aktuellen Elements erhöhen, damit das nächste Element entsprechend nach rechts verschoben wird.

offset += legendItemElement.getBBox().width + 20;

Mit der Funktion getBBox() können wir die Bounding-Box eines Elements, bestehend aus X- und Y-Position, Breite und Höhe, bestimmen. Die Breite dieser Bounding-Box addieren wir zum Offset, zusammen mit zusätzlichen 20 Pixeln als Abstand zwischen den Elementen.

Unser gesamter LineChart-Prototype sieht nun so aus:

function LineChart(container, data) {
	Chart.call(this);
	
	var chart = this;
	
	chart.container = container;
	chart.labels = data.labels;
	chart.lines = data.lines;
	
	chart.svgElement = chart.createSvgElement('svg', {
		style: 'font-family: Arial, sans-serif;'
	});
	chart.container.appendChild(chart.svgElement);
	
	window.addEventListener('resize', function() {
		chart.render();
	});
	
	chart.render();
}

LineChart.prototype = Object.create(Chart.prototype, {
	constructor: {
		value: LineChart
	},
	render: {
		value: function() {
			var chart = this;
			
			chart.width = chart.container.clientWidth;
			chart.height = 500;
			
			chart.svgElement.setAttribute('width', chart.width);
			chart.svgElement.setAttribute('height', chart.height);
			chart.svgElement.setAttribute('viewBox', '0 0 ' + chart.width + ' ' + chart.height);
			
			while(chart.svgElement.childNodes.length) {
				chart.svgElement.removeChild(chart.svgElement.firstChild);
			}
			
			chart.renderLegend();
		}
	},
	renderLegend: {
		value: function() {
			var chart = this;
			
			chart.legend = chart.createSvgElement('g');
			chart.svgElement.appendChild(chart.legend);
			
			var offset = 0;
			for(var index = 0; index < chart.lines.length; index++) {
				var legendItemElement = chart.createSvgElement('g', {
					transform: 'translate(' + offset + ', 0)'
				});
				chart.legend.appendChild(legendItemElement);
				
				var circleElement = chart.createSvgElement('circle', {
					cx: 10,
					cy: 8,
					r: 3.5,
					fill: chart.colors[index % chart.colors.length],
					stroke: 'none'
				});
				legendItemElement.appendChild(circleElement);
				
				var textElement = chart.createSvgElement('text', {
					x: 20,
					y: 13,
					'font-size': 14
				});
				legendItemElement.appendChild(textElement);
				
				textElement.textContent = chart.lines[index].title;
				
				offset += legendItemElement.getBBox().width + 20;
			}
		}
	}
});

Und so sieht unser Diagramm bis jetzt aus:

Schritt 7: Achsen, Abstände und Skalierung

Im nächsten Schritt generieren wir die Achsen. Hier wird es ein wenig komplizierter, da wir hier auch die Skalierung der Achsen und die für die Beschriftungen nötigen Abstände nach links und nach unten berechnen müssen.

Zunächst erstellen wir im LineChart-Prototype eine neue Funktion:

renderAxis: {
	value: function() {
		var chart = this;
	}
}

Diese Funktion rufen wir auch in der Funktion render() auf.

render: {
	value: function() {
		var chart = this;
		
		chart.width = chart.container.clientWidth;
		chart.height = 500;
		
		chart.svgElement.setAttribute('width', chart.width);
		chart.svgElement.setAttribute('height', chart.height);
		chart.svgElement.setAttribute('viewBox', '0 0 ' + chart.width + ' ' + chart.height);
		
		while(chart.svgElement.childNodes.length) {
			chart.svgElement.removeChild(chart.svgElement.firstChild);
		}
		
		chart.renderLegend();
		chart.renderAxis();
	}
},

In chart.axis werde ich alle berechneten Werte der Achsen speichern.

renderAxis: {
	value: function() {
		var chart = this;
		
		chart.axis = {
			x: {
				nthLabel: 1
			},
			y: {
				maximum: 1,
				step: 1
			}
		};
	}
}

Auf der X-Achse sollen alle verfügbaren Label aus chart.labels angezeigt werden. Abhängig von der Zahl der Labels und der Größe des Diagramms kann es aber vorkommen, dass nicht genug Platz für alle Beschriftungen verfügbar ist. In chart.axis.x.nthLabel lege ich daher fest, welche Label – angefangen beim ersten – angezeigt werden sollen. Nach Möglichkeit sollten natürlich alle Label angezeigt werden. Deshalb lege ich nthLabel zunächst auf 1 fest – es wird also jedes erste Label angezeigt. Wenn nicht genug Platz verfügbar ist, wird der Wert erhöht. Steht nthLabel zum Beispiel auf 3, wird nur jedes dritte Label angezeigt.

Für die Y-Achse legen wir zu Beginn zwei Variablen an. Die Variable maximum soll den Maximal-Wert beinhalten, der auf der Y-Achse abgebildet werden soll. In der Variablen step ist gespeichert, wie groß der Abstand der Beschriftungen auf der Y-Achse sein soll.

Momentan tragen diese drei Variablen noch alle den Wert 1. Hier werden wir im Folgenden die tatsächlichen Werte berechnen.

for(var lineIndex = 0; lineIndex < chart.lines.length; lineIndex++) {
	for(var datumIndex = 0; datumIndex < chart.lines[lineIndex].data.length; datumIndex++) {
		chart.axis.y.maximum = Math.max(chart.axis.y.maximum, chart.lines[lineIndex].data[datumIndex
]);
	}
}

Wir gehen als erstes alle Datenpunkte aller Datensätze durch und speichern das Maximum in der Variable chart.axis.y.maximum.

Als nächstes ermitteln wir anhand des Maximums eine sinnvolle Einteilung der Y-Achse. Mein erster Ansatz war, einfach das Maximum durch fünf zu teilen. Das führt aber leider zu unschön krummen Beschriftungen wie 478, wo beispielsweise 500 viel sinnvoller wäre.

while(chart.axis.y.step * 7 < chart.axis.y.maximum) {
	chart.axis.y.step *= 10;
}
if(chart.axis.y.step % 2 === 0 && chart.axis.y.step * 3.5 > chart.axis.y.maximum) {
	chart.axis.y.step /= 2;
}

Schließlich habe ich das Problem so gelöst: step beginnt mit einem Wert von 1. Solange mit dem aktuellen Wert von step das Maximum nicht mit sieben Beschriftungen auf der Y-Achse erreicht werden kann, wird step mit 10 multipliziert. So landen wir schonmal bei runden Beschriftungen, die immer ein Vielfaches von 1, 10, 100, 1.000 usw. sind. Anschließend prüfen wir noch, ob das Maximum auch mit der halben Schritt-Größe erreicht werden kann – denn Beschriftungen wie 50, 150 oder 2.500 wären ja auch noch rund. Gegebenenfalls können wir deshalb step halbieren.

chart.axis.y.maximum = Math.ceil(chart.axis.y.maximum / chart.axis.y.step) * chart.axis.y.step;

Hier legen wir noch das tatsächliche Maximum des Diagramms anhand der eben ermittelten Schritt-Größe fest.

Als nächstes müssen wir ermitteln, wie viel Abstand die Achsen nach links und nach unten benötigen, damit die Beschriftungen genügend Platz haben. Dazu benötigen wir als erstes eine Hilfsfunktion, die Zahlen mit dem korrekten Tausender-Trennzeichen ausstattet.

function Chart() {}

Chart.prototype = {
	colors: ['#14568a', '#8a1616', '#dddb2f', '#1d7e07', '#2c4a4a'],
	createSvgElement: function(tag, attributes) {
		var element = document.createElementNS('http://www.w3.org/2000/svg', tag);
		for(var key in attributes) {
			element.setAttribute(key, attributes[key]);
		}
		return element;
	},
	formatNumber: function(number) {
		var string = '';
		
		number = number + '';
		while(number.length > 3) {
			string = '.' + number.substr(number.length - 3) + string;
			number = number.substr(0, number.length - 3);
		}
		string = number + string;
		
		return string;
	}
};

Da auch diese Funktion in allen Diagramm-Typen Anwendung findet, erstellen wir die Funktion formatNumber() im Chart-Prototyp.

Die Erstellung der Labels für die Achsen lagern wir auch in eigene Funktionen innerhalb des LineChart-Prototyps aus:

renderXAxisLabel: {
	value: function(label) {
		var chart = this;
		
		var labelElement = chart.createSvgElement('g');
		
		var lineElement = chart.createSvgElement('line', {
			x1: 0,
			y1: 0,
			x2: 0,
			y2: 5,
			stroke: '#c0c0c0'
		});
		labelElement.appendChild(lineElement);
		
		var textElement = chart.createSvgElement('text', {
			x: -15,
			y: 7,
			'font-size': 11,
			'text-anchor': 'end',
			transform: 'rotate(-45 0 0)'
		});
		textElement.textContent = label;
		labelElement.appendChild(textElement);
		
		return labelElement;
	}
},
renderYAxisLabel: {
	value: function(label) {
		var chart = this;
		
		var labelElement = chart.createSvgElement('g');
		
		var lineElement = chart.createSvgElement('line', {
			x1: 0,
			y1: 0,
			x2: chart.width,
			y2: 0,
			stroke: '#c0c0c0'
		});
		labelElement.appendChild(lineElement);
		
		var textElement = chart.createSvgElement('text', {
			x: -8,
			y: 4,
			'font-size': 11,
			'text-anchor': 'end'
		});
		textElement.textContent = label;
		labelElement.appendChild(textElement);
		
		return labelElement;
	}
}

Beide Funktionen erstellen ein neues G-Element, legen in dem Element jeweils eine Linie und einen Text an und geben das G-Element dann zurück. Die Funktionen ordnen die Linien und Texte unterschiedlich an, für die Y-Achse werden horizontale Linien über das gesamte Diagramm gezogen, bei der X-Achse sind die Linien nur kurz und vertikal und markieren auf der X-Achse die Position des Labels.

Beide Texte werden mit dem Attribut text-anchor="end" ausgestattet, was zur Folge hat, dass die Position des Textes sich am Ende des Textes orientiert. Die Texte sind also rechtsbündig und enden jeweils an dem durch x und y definierten Punkt.

Der Text an der X-Achse wird zudem noch um 45° rotiert, sodass die Label diagonal nach oben laufen.

Die G-Elemente, welche diese Funktionen zurückgeben, liegen dann alle im Ursprung. Nachdem wir den benötigten Platz ermittelt haben, können wir jedes G-Element an die korrekte Position transformieren.

Aber zunächst generieren wir die Achsen und Label. Dazu fügen wir in der Funktion renderAxis() – direkt nach der Ermittlung von chart.axis.y.step und des neuen Maximums – folgenden Code hinzu:

chart.axis.x.element = chart.createSvgElement('g');
chart.svgElement.appendChild(chart.axis.x.element);

chart.axis.y.element = chart.createSvgElement('g');
chart.svgElement.appendChild(chart.axis.y.element);

for(var index = 0; index < chart.labels.length; index++) {
	chart.axis.x.element.appendChild(chart.renderXAxisLabel(chart.labels[index]));
}

for(var y = 0; y <= chart.axis.y.maximum; y += chart.axis.y.step) {
	chart.axis.y.element.appendChild(chart.renderYAxisLabel(chart.formatNumber(y)));
}

Dank der eben definierten Hilfs-Funktionen ist dieser Code relativ simpel. Wir legen zwei neue G-Elemente – eins für jede Achse – an und speichern diese in dem jeweiligen Achsen-Objekt in chart.axis.x.element beziehungsweise chart.axis.y.element. Diese Elemente fügen wir dann dem SVG-Element hinzu.

Anschließen fügen wir an die X-Achse alle Labels aus chart.labels an. Die Label für die Y-Achse bestimmen wir aus chart.axis.y.step und chart.axis.y.maximum.

Wie gesagt sind die Achsen und Beschriftungen jetzt noch nicht am richtigen Platz, aber mit getBBox() können wir jetzt die Größe der einzelnen Elemente ermitteln.

chart.padding = {
	top: chart.legend.getBBox().height + 20,
	left: -1 * Math.min(chart.axis.x.element.getBBox().x + 20, chart.axis.y.element.getBBox().x - 8),
	bottom: chart.axis.x.element.getBBox().height
};

In chart.padding können wir nun die benötigten Abstände speichern. Der Abstand nach oben hängt von der Größe der Legende ab. Hier geben wir zusätzlich 20 Pixel Abstand zur Legende.

Der Abstand nach links errechnet sich aus der aktuellen Position der gerade erstellten Achsen und Beschrifungen. Da sich die Texte rechts anordnen, ragen sie momentan, wo die Achsen noch alle in der oberen linken Ecke liegen, nach links aus dem SVG-Element heraus. getBBox().x liefert uns hier also einen negativen Wert als X-Position. Mit Math.min ermitteln wir, welches Element am weitesten aus dem Bild herausragt und nutzen diesen Wert – mit positivem Vorzeichen – als linken Abstand.

Der Abstand nach unten ist einfach die Höhe der X-Achse samt Beschriftung.

Jetzt wissen wir genau, wie groß das Diagramm sein wird. Als nächstes können wir nun die Achsen und Beschriftungen korrekt positionieren.

chart.axis.x.element.setAttribute('transform', 'translate(0, ' + (chart.height - chart.padding.bottom) + ')');
chart.axis.x.stepSize = chart.labels.length > 1 ? (chart.width - chart.padding.left - 40) / (chart.labels.length - 1) : 20;

Zuerst transformieren wir die X-Achse an die korrekte Position. Da wir jetzt die Breite des Diagramms bestimmen können, können wir auch stepSize – den Abstand der Beschriftungen auf der X-Achse – errechnen. Hier gibt es einen Sonderfall: Wir können den Abstand natürlich nur bestimmen, wenn es mindestens zwei Beschriftungen gibt. Sind weniger als zwei Beschriftungen vorhanden, definieren wir den Abstand einfach als 20 Pixel.

Als nächstes stellen wir sicher, dass der Abstand zwischen den Beschriftungen nie kleiner als 20 Pixel ist.

while(chart.axis.x.stepSize * chart.axis.x.nthLabel < 20) {
	chart.axis.x.nthLabel++;
}

Dazu erhöhen wir nthLabel so lange, bis der Abstand ausreicht. Gegebenfalls zeigen wir also nur jede zweite, dritte, vierte Beschriftung usw.

Wenn wir nicht jede Beschriftung anzeigen können, müssen wir die nicht angezeigten Beschriftungen nun löschen:

if(chart.axis.x.nthLabel > 1) {
	for(var index = chart.axis.x.element.childNodes.length - 1; index > 0; index--) {
		if(index % chart.axis.x.nthLabel) {
			chart.axis.x.element.removeChild(chart.axis.x.element.childNodes[index]);
		}
	}
}

Schließlich können wir die verbleibenden Beschriftungen an die korrekte Position transformieren:

for(var index = 0; index < chart.axis.x.element.childNodes.length; index++) {
	chart.axis.x.element.childNodes[index].setAttribute('transform', 'translate(' + (chart.padding.left + 20 + chart.axis.x.nthLabel * index * chart.axis.x.stepSize) + ', 0)');
}

Die Beschriftungen der X-Achse sind nun an Ort und Stelle:

Auch die Y-Achse können wir nun korrekt transformieren:

chart.axis.y.element.setAttribute('transform', 'translate(' + chart.padding.left + ', 0)');
chart.axis.y.stepSize = (500 - chart.padding.bottom - chart.padding.top) / (chart.axis.y.maximum / chart.axis.y.step);
for(var index = 0; index < chart.axis.y.element.childNodes.length; index++) {
	chart.axis.y.element.childNodes[index].setAttribute('transform', 'translate(0, ' + (500 - chart.padding.bottom - index * chart.axis.y.stepSize) + ')');
}

Wieder wird zunächst die gesamte Achse transformiert, anschließend berechnen wir auch hier den Abstand zwischen den Beschriftungen und korrigieren dann die Position jeder Beschriftung.

Damit sind jetzt beide Achsen korrekt positioniert:

Schritt 8: Punkte und Linien

Abschließend müssen wir nur noch die tatsächlichen Datenpunkte im Diagramm einfügen. Auch dafür erstellen wir eine neue Funktion im LineChart-Prototypen:

renderLines: {
	value: function() {
		var chart = this;
	}
}

Auch diese Funktion rufen wir in der Funktion render() auf:

render: {
	value: function() {
		var chart = this;
		
		chart.width = chart.container.clientWidth;
		chart.height = 500;
		
		chart.svgElement.setAttribute('width', chart.width);
		chart.svgElement.setAttribute('height', chart.height);
		chart.svgElement.setAttribute('viewBox', '0 0 ' + chart.width + ' ' + chart.height);
		
		while(chart.svgElement.childNodes.length) {
			chart.svgElement.removeChild(chart.svgElement.firstChild);
		}
		
		chart.renderLegend();
		chart.renderAxis();
		chart.renderLines();
	}
},

In der Funktion renderLines() legen wir nun für jeden Datensatz eine eigene Gruppe an:

renderLines: {
	value: function() {
		var chart = this;
		
		for(var lineIndex = 0; lineIndex < chart.lines.length; lineIndex++) {
			chart.lines[lineIndex].element = chart.createSvgElement('g', {
				transform: 'translate(' + (chart.padding.left + 20) + ', ' + (500 - chart.padding.bottom) + ')'
			});
			chart.svgElement.appendChild(chart.lines[lineIndex].element);
		}
	}
}

Nun zur Darstellung der Daten: Erstens soll jeder Datenpunkt mit einem Punkt dargestellt werden, zweitens sollen alle Punkte mit einer Linie verbunden werden.

renderLines: {
	value: function() {
		var chart = this;
		
		for(var lineIndex = 0; lineIndex < chart.lines.length; lineIndex++) {
			chart.lines[lineIndex].element = chart.createSvgElement('g', {
				transform: 'translate(' + (chart.padding.left + 20) + ', ' + (500 - chart.padding.bottom) + ')'
			});
			chart.svgElement.appendChild(chart.lines[lineIndex].element);
			
			var points = [];
			chart.lines[lineIndex].circles = [];
			
			for(var datumIndex = 0; datumIndex < chart.lines[lineIndex].data.length; datumIndex++) {
				var point = {
					x: datumIndex * chart.axis.x.stepSize,
					y: -1 * chart.lines[lineIndex].data[datumIndex] * (chart.axis.y.stepSize / chart.axis.y.step),
				};
				points.push(point.x + ',' + point.y);
				
				
			}
		}
	}
}

Wir legen deshalb gleich zwei Arrays an, points für die Punkte der Linie, circles für die Kreis-Elemente, mit denen wir die Punkte darstellen.

Aus stepSize beider Achsen lässt sich unkompliziert die tatsächliche Position eines Punktes feststellen. In points speichern wir beide Koordinaten als String, diese Koordinaten werden wir später einem Polyline-Element übergeben.

for(var datumIndex = 0; datumIndex < chart.lines[lineIndex].data.length; datumIndex++) {
	var point = {
		x: datumIndex * chart.axis.x.stepSize,
		y: -1 * chart.lines[lineIndex].data[datumIndex] * (chart.axis.y.stepSize / chart.axis.y.step),
	};
	points.push(point.x + ',' + point.y);
	
	if(chart.axis.x.stepSize >= 10) {
		var circleElement = chart.createSvgElement('circle', {
			cx: point.x,
			cy: point.y,
			r: 3.5,
			fill: chart.colors[lineIndex % chart.colors.length],
			stroke: 'none'
		});
		chart.lines[lineIndex].element.appendChild(circleElement);
		chart.lines[lineIndex].circles.push(circleElement);
	}
}

Den Punkt selbst zeigen wir nur, wenn dafür genug Platz ist – sprich, wenn stepSize größer oder gleich 10 ist.

In diesem Fall legen wir dann ein neues Circle-Element in der Farbe des Datensatzes an und fügen es in die Gruppe und in das Array circles ein.

Nachdem wir alle Punkte erstellt und die Koordinaten in points gesammelt haben, können wir nun abschließend noch die Linie hinzufügen:

var lineElement = chart.createSvgElement('polyline', {
	points: points.join(' '),
	stroke: chart.colors[lineIndex % chart.colors.length],
	'stroke-width': 2,
	fill: 'none'
});
chart.lines[lineIndex].element.appendChild(lineElement);
chart.lines[lineIndex].line = lineElement;

Da wir in points schon die X- und Y-Koordinaten mit Kommata getrennt gesammelt haben, müssen wir das Array hier nur noch mit join(' ') zusammenführen. Auch die Linie wird in das SVG eingefügt.

Fertiges Diagramm

Damit kommen wir beim Endresultat an:

Und hier zum Abschluss noch einmal der gesamte Code:

<!DOCTYPE html>
<html lang="de">
<head>
	<meta charset="UTF-8">
	<title>Lininen-Diagramm</title>
</head>
<body>
	<div id="chart">
	
	</div>
	
	<script type="text/javascript" src="js/chart.js"></script>
	<script type="text/javascript" src="js/line-chart.js"></script>
	<script type="text/javascript" src="js/main.js"></script>
</body>
</html>

function Chart() {}

Chart.prototype = {
	colors: ['#14568a', '#8a1616', '#dddb2f', '#1d7e07', '#2c4a4a'],
	createSvgElement: function(tag, attributes) {
		var element = document.createElementNS('http://www.w3.org/2000/svg', tag);
		for(var key in attributes) {
			element.setAttribute(key, attributes[key]);
		}
		return element;
	},
	formatNumber: function(number) {
		var string = '';
		
		number = number + '';
		while(number.length > 3) {
			string = '.' + number.substr(number.length - 3) + string;
			number = number.substr(0, number.length - 3);
		}
		string = number + string;
		
		return string;
	}
};

function LineChart(container, data) {
	Chart.call(this);
	
	var chart = this;
	
	chart.container = container;
	chart.labels = data.labels;
	chart.lines = data.lines;
	
	chart.svgElement = chart.createSvgElement('svg', {
		style: 'font-family: Arial, sans-serif;'
	});
	chart.container.appendChild(chart.svgElement);
	
	window.addEventListener('resize', function() {
		chart.render();
	});
	
	chart.render();
}

LineChart.prototype = Object.create(Chart.prototype, {
	constructor: {
		value: LineChart
	},
	render: {
		value: function() {
			var chart = this;
			
			chart.width = chart.container.clientWidth;
			chart.height = 500;
			
			chart.svgElement.setAttribute('width', chart.width);
			chart.svgElement.setAttribute('height', chart.height);
			chart.svgElement.setAttribute('viewBox', '0 0 ' + chart.width + ' ' + chart.height);
			
			while(chart.svgElement.childNodes.length) {
				chart.svgElement.removeChild(chart.svgElement.firstChild);
			}
			
			chart.renderLegend();
			chart.renderAxis();
			chart.renderLines();
		}
	},
	renderLegend: {
		value: function() {
			var chart = this;
			
			chart.legend = chart.createSvgElement('g');
			chart.svgElement.appendChild(chart.legend);
			
			var offset = 0;
			for(var index = 0; index < chart.lines.length; index++) {
				var legendItemElement = chart.createSvgElement('g', {
					transform: 'translate(' + offset + ', 0)'
				});
				chart.legend.appendChild(legendItemElement);
				
				var circleElement = chart.createSvgElement('circle', {
					cx: 10,
					cy: 8,
					r: 3.5,
					fill: chart.colors[index % chart.colors.length],
					stroke: 'none'
				});
				legendItemElement.appendChild(circleElement);
				
				var textElement = chart.createSvgElement('text', {
					x: 20,
					y: 13,
					'font-size': 14
				});
				legendItemElement.appendChild(textElement);
				
				textElement.textContent = chart.lines[index].title;
				
				offset += legendItemElement.getBBox().width + 20;
			}
		}
	},
	renderAxis: {
		value: function() {
			var chart = this;
			
			chart.axis = {
				x: {
					nthLabel: 1
				},
				y: {
					maximum: 1,
					step: 1
				}
			};
			
			for(var lineIndex = 0; lineIndex < chart.lines.length; lineIndex++) {
				for(var datumIndex = 0; datumIndex < chart.lines[lineIndex].data.length; datumIndex++) {
					chart.axis.y.maximum = Math.max(chart.axis.y.maximum, chart.lines[lineIndex].data[datumIndex]);
				}
			}
			
			while(chart.axis.y.step * 7 < chart.axis.y.maximum) {
				chart.axis.y.step *= 10;
			}
			if(chart.axis.y.step % 2 === 0 && chart.axis.y.step * 3.5 > chart.axis.y.maximum) {
				chart.axis.y.step /= 2;
			}
			
			chart.axis.y.maximum = Math.ceil(chart.axis.y.maximum / chart.axis.y.step) * chart.axis.y.step;
			
			chart.axis.x.element = chart.createSvgElement('g');
			chart.svgElement.appendChild(chart.axis.x.element);
			
			chart.axis.y.element = chart.createSvgElement('g');
			chart.svgElement.appendChild(chart.axis.y.element);
			
			for(var index = 0; index < chart.labels.length; index++) {
				chart.axis.x.element.appendChild(chart.renderXAxisLabel(chart.labels[index]));
			}
			
			for(var y = 0; y <= chart.axis.y.maximum; y += chart.axis.y.step) {
				chart.axis.y.element.appendChild(chart.renderYAxisLabel(chart.formatNumber(y)));
			}
			
			chart.padding = {
				top: chart.legend.getBBox().height + 20,
				left: -1 * Math.min(chart.axis.x.element.getBBox().x + 20, chart.axis.y.element.getBBox().x - 8),
				bottom: chart.axis.x.element.getBBox().height
			};
			
			chart.axis.x.element.setAttribute('transform', 'translate(0, ' + (chart.height - chart.padding.bottom) + ')');
			chart.axis.x.stepSize = chart.labels.length > 1 ? (chart.width - chart.padding.left - 40) / (chart.labels.length - 1) : 20;
			
			while(chart.axis.x.stepSize * chart.axis.x.nthLabel < 20) {
				chart.axis.x.nthLabel++;
			}
			
			if(chart.axis.x.nthLabel > 1) {
				for(var index = chart.axis.x.element.childNodes.length - 1; index > 0; index--) {
					if(index % chart.axis.x.nthLabel) {
						chart.axis.x.element.removeChild(chart.axis.x.element.childNodes[index]);
					}
				}
			}
			
			for(var index = 0; index < chart.axis.x.element.childNodes.length; index++) {
				chart.axis.x.element.childNodes[index].setAttribute('transform', 'translate(' + (chart.padding.left + 20 + chart.axis.x.nthLabel * index * chart.axis.x.stepSize) + ', 0)');
			}
			
			chart.axis.y.element.setAttribute('transform', 'translate(' + chart.padding.left + ', 0)');
			chart.axis.y.stepSize = (500 - chart.padding.bottom - chart.padding.top) / (chart.axis.y.maximum / chart.axis.y.step);
			for(var index = 0; index < chart.axis.y.element.childNodes.length; index++) {
				chart.axis.y.element.childNodes[index].setAttribute('transform', 'translate(0, ' + (500 - chart.padding.bottom - index * chart.axis.y.stepSize) + ')');
			}
		}
	},
	renderXAxisLabel: {
		value: function(label) {
			var chart = this;
			
			var labelElement = chart.createSvgElement('g');
			
			var lineElement = chart.createSvgElement('line', {
				x1: 0,
				y1: 0,
				x2: 0,
				y2: 5,
				stroke: '#c0c0c0'
			});
			labelElement.appendChild(lineElement);
			
			var textElement = chart.createSvgElement('text', {
				x: -15,
				y: 7,
				'font-size': 11,
				'text-anchor': 'end',
				transform: 'rotate(-45 0 0)'
			});
			textElement.textContent = label;
			labelElement.appendChild(textElement);
			
			return labelElement;
		}
	},
	renderYAxisLabel: {
		value: function(label) {
			var chart = this;
			
			var labelElement = chart.createSvgElement('g');
			
			var lineElement = chart.createSvgElement('line', {
				x1: 0,
				y1: 0,
				x2: chart.width,
				y2: 0,
				stroke: '#c0c0c0'
			});
			labelElement.appendChild(lineElement);
			
			var textElement = chart.createSvgElement('text', {
				x: -8,
				y: 4,
				'font-size': 11,
				'text-anchor': 'end'
			});
			textElement.textContent = label;
			labelElement.appendChild(textElement);
			
			return labelElement;
		}
	},
	renderLines: {
		value: function() {
			var chart = this;
			
			for(var lineIndex = 0; lineIndex < chart.lines.length; lineIndex++) {
				chart.lines[lineIndex].element = chart.createSvgElement('g', {
					transform: 'translate(' + (chart.padding.left + 20) + ', ' + (500 - chart.padding.bottom) + ')'
				});
				chart.svgElement.appendChild(chart.lines[lineIndex].element);
				
				var points = [];
				chart.lines[lineIndex].circles = [];
				
				for(var datumIndex = 0; datumIndex < chart.lines[lineIndex].data.length; datumIndex++) {
					var point = {
						x: datumIndex * chart.axis.x.stepSize,
						y: -1 * chart.lines[lineIndex].data[datumIndex] * (chart.axis.y.stepSize / chart.axis.y.step),
					};
					points.push(point.x + ',' + point.y);
					
					if(chart.axis.x.stepSize >= 10) {
						var circleElement = chart.createSvgElement('circle', {
							cx: point.x,
							cy: point.y,
							r: 3.5,
							fill: chart.colors[lineIndex % chart.colors.length],
							stroke: 'none'
						});
						chart.lines[lineIndex].element.appendChild(circleElement);
						chart.lines[lineIndex].circles.push(circleElement);
					}
				}
				
				var lineElement = chart.createSvgElement('polyline', {
					points: points.join(' '),
					stroke: chart.colors[lineIndex % chart.colors.length],
					'stroke-width': 2,
					fill: 'none'
				});
				chart.lines[lineIndex].element.appendChild(lineElement);
				chart.lines[lineIndex].line = lineElement;
			}
		}
	}
});

var weekdays = ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'];
var months = ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'];
var from = new Date(2015, 8, 21-28, 0, 0, 0);
var to = new Date(2015, 8, 21, 0, 0, 0);

var data = {
	labels: [],
	lines: [{
		title: 'Messwerte 1',
		data: []
	}, {
		title: 'Messwerte 2',
		data: []
	}]
};

while(from <= to) {
	data.labels.push(weekdays[from.getDay()] + ', ' + from.getDate() + '. ' + months[from.getMonth()] + ' ' + from.getFullYear());
	
	for(var lineIndex = 0; lineIndex < data.lines.length; lineIndex++) {
		data.lines[lineIndex].data.push(Math.round(lineIndex * 1000 + 500 + (Math.random() + Math.random()) * 500));
	}
	
	from.setDate(from.getDate() + 1);
}

new LineChart(document.getElementById('chart'), data);

Noch ist das Diagramm statisch und reagiert nicht auf den Nutzer. Im nächsten Teil der Artikelserie wirst Du erfahren, wie Du dem Diagramm EventListener hinzufügen kannst und so auf Nutzer-Interaktionen reagieren kannst.

Am Ende entsteht oft ein Backend, durch das kein Redakteur wirklich durchsteigt, 20 Plugins verlangsamen das ganze System und im Menü finden sich dutzende ungenutzter Menüpunkte. Das riesige Angebot von so genannten Multi-Purpose-Themes begünstigt diesen Trend noch.

In diesem Artikel zeige ich auf, für welche Webseiten WordPress eine gute Wahl ist – und welche Webseiten besser nicht auf WordPress bauen sollten.

Der perfekte Blog: Content steht im Vordergrund

Ein Blick auf die Eingabefelder in einer frischen WordPress-Installation zeigt sehr schnell die grundlegende Struktur von WordPress-Beiträgen auf: TitelInhalt, Beitragsbild und Kategorien und Schlagworte. Der Fokus liegt auf linearem Inhalt – fast wie in einem Magazin.

Das sind auch die idealen Anwendungsfälle für WordPress: Blogs, Magazine und News. Wichtig ist, dass der Inhalt der einzelnen Artikel möglichst simpel aufgebaut ist. Eine Kombination aus Fließtext und Bildern. Je weniger kompliziert der Inhalt, desto besser geeignet ist WordPress.

Beispiel: siegerbrauckmann.de

Die Webseite siegerbrauckmann.de setzt gezielt auf diesen Magazin-Stil, den WordPress so gut beherrscht. Anhand der Referenzen wird dies am deutlichsten.

Jede Referenz ist ein Beitrag, die Seite »Referenzen« ist der Beitrags-Blog von WordPress.

Anhand einer vollständigen Referenz wird die Stärke von WordPress noch deutlicher:

Anhand des Screenshots wird der lineare Aufbau des Inhaltes sichtbar. Selbst auf den »normalen« Inhalts-Seiten wird dieser Aufbau beibehalten:

Warum dieser lineare Aufbau so wichtig ist, zeigt dieser Screenshot (aus meinem eigenen WordPress-Backend):

Der WordPress-Editor ist für Blog-Artikel gemacht. Lineare Inhalte funktionieren hier am Besten. Zwar gibt es einige Plugins, die mehr Flexibilität versprechen, aber so richtig sauber funktionieren diese nicht.

Auch die Kategorien von WordPress werden für die Referenzen aufgegriffen. Auf der Startseite findet sich eine Übersicht über die Kategorien, in welche die Referenzen fallen:

Die Webseite konzentriert sich insgesamt auf die Stärken von WordPress und umschifft so die Schwächen. Ein schönes Beispiel für gute WordPress-Nutzung.

Gib einer Person einen Hammer und sie sieht überall nur noch Nägel

WordPress kann Blogging – für alles, was darüber hinaus geht, ist WordPress allerdings meist die falsche Wahl.

Wie oben erwähnt, bohren viele fertige Themes WordPress an viele Stellen auf, um mehr Funktionalität anzubieten. Dabei geht häufig der Fokus auf die Stärken von WordPress verloren, das Backend wird unübersichtlich und Plugins greifen nicht sauber ineinander.

Im folgenden nun typische Funktionen, welche nicht mit WordPress umgesetzt werden sollten.

Mehrsprachigkeit

Viele Content Management Systeme bringen tolle Funktionen für die Mehrsprachigkeit mit sich – Wordpress gehört nicht dazu. Einige Plugins rüsten die Mehrsprachigkeit nach. Sauber funktionieren sie alle nicht. Spätestens, wenn die Übersetzungen mit anderen Plugins ineinander greifen sollen, entstehen oft Baustellen. Warum mit Gewalt die Mehrsprachigkeit nachrüsten, wenn andere Systeme das viel besser können?

Komplexe Seiten-Inhalte

Die meisten Multi-Purpose-Themes bringen einen eigenen Inhalts-Editor mit. Inhalte werden komplexer, mehrspaltig, dynamisch. Der lineare Aufbau der Inhalte, wie WordPress ihn am Besten beherrscht, verschwindet.

Auch das bringt häufig Probleme mit sich: Stile werden oft direkt im Quellcode angewendet, der Redakteur muss die Inhalte von Hand setzen, viele WordPress-Funktionen (zum Beispiel der automatische Text-Auszug) funktionieren nicht mehr richtig. Die Code- und Seiten-Qualität leidet oft darunter.

Wenn die Inhalte, die auf der Webseite erscheinen sollen, sich nicht größtenteils im Standard-Editor von WordPress darstellen lassen, ist WordPress vermutlich nicht die richtige Wahl für diese Webseite.

Online-Shop und andere Komplexitäten

Auch für komplett neue Funktionen wie Online-Shops, Nutzerforen und vieles mehr gibt es diverse Plugins. Auch hier funktioniert (grade in Kombination mit anderen Plugins) nicht immer alles reibungslos.

WordPress als Online-Shop? Kann man machen, muss man aber nicht. Besser wäre es, einfach ein passendes System zu wählen.

Gar keine News oder Beträge

Auf manchen WordPress-Seiten finden sich gar keine Beiträge, lediglich »normale« Seiten. Dies ist vermutlich die häufigste Kuriosität der WordPress-Nutzungen. WordPress kann eben genau eine Sache gut: Blogging. Warum benutze ich dann für meine Seite WordPress, füge dutzende Plugins und Funktionen hinzu, um die komplexesten Inhalte darstellen zu können, verwende aber die eine Sache, die WordPress gut kann, überhaupt nicht? Warum dann überhaupt noch WordPress? Es gibt hunderte coole Content Management Systeme, die alles mögliche können.

Wieso den Blogging-King für eine blog-freie Webseite nutzen?

Fazit: WordPress ist toll – zumindest als Blog

Der Artikel ließt sich auf den ersten Blick extrem WordPress-kritisch. Das soll er gar nicht sein. Ich liebe WordPress! Dieser Blog läuft ja schließlich auch mit WordPress.

Was ich hingegen kritisiere, sind Multi-Purpose-Themes. Was diese Themes aus WordPress machen, ist nicht mehr elegant. Für mich war die WordPress-Philosophie immer »Content is King«. Bei den Themes steht nicht mehr der Inhalt im Vordergrund, sondern die Form.

Du willst Deine Webseite mit einem Multi-Purpose-Wordpress-Theme machen? Gerne. Ich habe kein Problem damit! Wenn es für Dich funktioniert, ist das toll.

Ich hoffe, dass ich mit diesem Artikel trotzdem einmal zeige, was WordPress im Kern eigentlich ist – und was nicht.

Und jetzt will ich eine schöne Kontroverse in den Kommentaren lesen!

In diesem Artikel wende ich CSS-Animationen an, um einen interessanten Effekt zu erzielen.

Zuerst das Resultat

Schritt 1: HTML

Als erstes brauchen wir etwas HTML. Für jeden Halbkreis erstellen wir ein eigenes DIV.

<div id="spiral">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</div>

Schritt 2: (S)CSS

Ich benutze inzwischen fast überwiegend SCSS (und Compass), aber der gleiche Effekt lässt sich ohne weiteres auch mit einfachem CSS realisieren.

Zunächst definiere ich ein paar Variablen.

$speed: 8s;
$count: 16;
$barWidth: 15px;
$gapWidth: 1px;

$speed ist die Zeit, die die gesamte Animation für einen Durchlauf benötigt. $count ist die Anzahl der DIVs, die wir in unserem HTML eingefügt haben. $barWidth und $gapWidth definieren die Breite der Rahmen und den Zwischenraum dazwischen.

#spiral {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	
	div {
		@include transform(rotate(45deg));
		@include border-radius(50%);
		
		border: $barWidth solid transparent;
		border-top-color: #000000;
		border-left-color: #000000;
		position: absolute;
	}
}

Hier sorgen wir zunächst dafür, dass die Animation im Zentrum steht. Anschließend geben wir jedem DIV den entsprechenden Rahmen. Allerdings braucht jedes DIV eine andere Breite und eine andere Position. Zum Glück sind beide Werte vom Index des DIV abhängig. Also iterieren wir mit SCSS über die 16 DIVs und definieren für jedes DIV die entsprechenden Werte.

@for $i from 1 through $count {
	#spiral div:nth-child(#{$i}) {
		width: 2 * ($i - 1) * ($barWidth + $gapWidth);
		height: 2 * ($i - 1) * ($barWidth + $gapWidth);
		top: -1 * $i * ($barWidth + $gapWidth);
		left: -1 * $i * ($barWidth + $gapWidth);
	}
}

Wichtig ist hier: Jedes DIV ist größer als das vorherige und muss entsprechend auch weiter nach links und oben versetzt werden.

Schritt 3: Animation

Als nächstes folgt die Animation. Auch hier wird für jedes DIV eine unterschiedliche Animation definiert. Das kleinste DIV rotiert während der Animation genau ein mal, das zweite DIV zwei mal und so weiter. So erweitern wir also unsere For-Schleife:

@for $i from 1 through $count {
	@include keyframes(rotate-#{$i}) {
		0% {
			@include transform(rotate(45deg));
		}
		
		100% {
			@include transform(rotate(45deg - $i * 360deg));
		}
	}
	
	#spiral div:nth-child(#{$i}) {
		@include animation(rotate-#{$i} $speed ease-in-out infinite);
		
		width: 2 * ($i - 1) * ($barWidth + $gapWidth);
		height: 2 * ($i - 1) * ($barWidth + $gapWidth);
		top: -1 * $i * ($barWidth + $gapWidth);
		left: -1 * $i * ($barWidth + $gapWidth);
	}
}

Das war auch schon alles.

Ganz ohne JavaScript lässt sich so eine interessante Animation erstellen. Vor einiger Zeit wäre es noch unumgänglich gewesen, um für solch einen Effekt JavaScript zu verwenden.

Natürlich war das nur eine kleine Einführung in CSS-Animationen. Ich wünsche viel Spaß beim Experimentieren!

In diesem Artikel erkläre ich die Grundlagen von Content MarkDown und zeige, wie mit dem CMS schnell und einfach eine eigene Webseite erstellt und gepflegt werden kann.

Herunterladen und Installieren von Content MarkDown

Auf GitHub kannst Du die aktuelle Version von Content MarkDown herunterladen. Wenn Du schon mit Git(-Hub) arbeitest, kannst Du einfach das ganze Repository klonen, ansonsten kannst Du das System aber auch einfach als Zip-Datei herunterladen und ins Zielverzeichnis entpacken. Aktuell gibt es Content MarkDown in der Version 0.07 (alpha).

Nachdem Du den Quellcode heruntergeladen und auf den Server geladen hast, ruf die Seite direkt im Browser auf. Da Content MarkDown noch nicht konfiguriert wurde, erscheint nun als erstes das Setup-Tool.

Im Setup-Tool kannst Du die Datenbank-Konfiguration eintragen. Content MarkDown prüft automatisch, ob mit den eingegebenen Daten eine Verbindung zur Datenbank hergestellt werden kann. Wenn alles klappt, wird die Konfiguration in der Datei content/config.php gespeichert und Du wirst zur Startseite Deiner Webseite weitergeleitet.

Hier findet sich bisher nur der Beispiel-Inhalt, der die grundlegenden Funktionen von Content MarkDown erläutert.

Pflege über FTP oder das Backend

Content MarkDown zeigt die Beispiel-Inhalte in einem einfachen Standard-Layout an. Das Layout kann komplett angepasst werden, dazu kommen wir aber in einem späteren Artikel. Erstmal schauen wir uns jetzt die Pflege der Inhalte an.

Es gibt zwei Möglichkeiten, den Inhalt zu pflegen: per FTP oder über das Cmd-Backend. Die Pflege per FTP hat den Vorteil, dass hier einem User Zugriff auf nur ein Unterverzeichnis ermöglicht werden kann. Die Pflege im Backend hat den Vorteil, dass hier auch direkt die Konfiguration von Plugins stattfinden kann, wenn ein Plugin eine Konfiguration anbietet.

Wir schauen uns in diesem Artikel die Pflege über das Backend von Content MarkDown an. Um das Backend aufzurufen, hänge einfach an die Root URL der Webseite /admin an. Nach der Installation von Content MarkDown wird ein Standard-Benutzer mit Nutzernamen »admin« und Passwort »admin« angelegt. Mit diesen Daten solltest Du Dich am Backend anmelden können.

Nun landest Du auf der Startseite des Backends, wo Du auch direkt den Inhalt der Startseite bearbeiten kannst. Vorher schauen wir uns aber einmal die Navigation im Backend an.

Hier gibt es momentan drei Menüpunkte: Content, Users und Logout. Sobald ein Plugin eine Konfigurations-Seite benötigt, kommt hier ein vierter Punkt, Plugins, dazu. Nun klicken wir aber zuerst auf den Menüpunkt »Users -> List«. Hier können wir nämlich das Passwort des admin-Benutzers ändern. Klicke auf den Bearbeiten-Button hinter der Zeile für den Admin-Benutzer und gebe ein neues Passwort ein.

Jetzt können wir uns endlich der Hauptaufgabe von Content MarkDown widmen: dem Verwalten von Inhalten. Dafür klicken wir auf den Menüpunkt »Content -> Pages«. Die Ansicht »Pages« ist in den Seitenbaum und den Inhalt der aktiven Seite aufgeteilt.

Seitenbaum und Navigation

In Content MarkDown entspricht jede Seite auf der Webseite einer Markdown-Datei im content-Verzeichnis. Im Backend-Seitenbaum werden Dir alle Seiten angezeigt und Du kannst alle Seiten bearbeiten.

Welche Seiten im Frontend sichtbar oder unsichtbar sind und welche Seiten in der Navigation in welcher Reihenfolge erscheinen ermittelt Content MarkDown anhand des Dateinamens. Alle Dateien (und Ordner), die mit einem Unterstrich anfangen, sind im Frontend nicht sichtbar. So kannst Du in aller Ruhe an Entwürfen arbeiten. Alle Seiten, die mit einer Zahl beginnen, erscheinen im Frontend in der Navigation, geordnet nach eben dieser Nummer.

Um Unterseiten zu erstellen kannst Du die Seiten einfach in Ordnern sortieren. Jeder Ordner (einschließlich des content-Ornders selbst) muss eine Datei index.markdown beinhalten, welche den Inhalt für diesen Ordner enthält. Den Unterstrich oder die Zahlen musst Du dann vor den Ordner-Namen, nicht vor den Namen der index-Datei schreiben.

Teste dieses Prinzip einfach mal aus, im Standard-Layout wird die Navigation schon in der Seitenleiste angezeigt, dort kannst Du Deine Änderungen direkt sehen. Das Backend gibt Dir hier alle nötigen Funktionen zum Anlegen neuer Ordner und Dateien, zum Umbenennen und zum Löschen an die Hand.

Inhalt als Markdown

Markdown ist eine Methode der Textformatierung, die darauf ausgelegt ist, schon im Text-Editor strukturiert zu sein. Wenn Du Dir den Standard-Inhalt im Backend ansiehst wird Dir schnell auffallen, dass die Struktur der Texte schon ohne die HTML-Formatierung des Frontends erkennbar ist. Das macht Markdown. Die vollständige Syntax von Markdown findest Du hier.

Im Standard-Inhalt findest Du dafür schon einige Beispiele. So könnte Dein Markdown-Inhalt zum Beispiel aussehen:

This is a headline
==================

This is some simple text. Just your basic paragraph.

This is a sub headline
----------------------

 * Here comes a list
 * and it really looks like one, too!

 1. This is a numbered list
 2. See how simple it is?

Die Formatierung des Textes ergibt schon ohne HTML Sinn und lässt die Struktur des Inhaltes erkennen. So kannst Du den ganzen Inhalt als Markdown-Dateien direkt im Editor bearbeiten, Content MarkDown erstellt daraus im Frontent automatisch HTML.

Wenn Markdown an seine Grenzen stößt, kannst Du jederzeit innerhalb des Markdowns einen HTML-Block verwenden, der dann einfach so übernommen wird. Dies kannst Du im Standard-Inhalt auf der Changelog-Seite sehen. Dort habe ich einfach eine Tabelle als HTML-Markup eingefügt. Wer keine Lust auf HTML hat, könnte dafür auch einfach ein Plugin schreiben.

Meta Informationen

Im Kopf jeder Datei kannst Du einen Kommentar mit Meta-Informationen platzieren. Dies ist zum Beispiel nützlich, wenn Du einen alternativen Navigations-Titel oder Seiten-Titel verwenden willst. Die Syntax dafür sieht so aus:

/**
 * Author: Lars Ebert
 * Date: 2014/11/09
 * Title: Title of the page
 * NavTitle: Page X
 */

Plugins verwenden

Momentan gibt es in Content MarkDown drei Plugins: Contact, Gallery und Map. Die Funktionsweise dieser Plugins wird auf der Seite Core-Plugins im Standard-Inhalt beschrieben.

Um ein Plugin einzubinden kannst Du einfach den Cmd-Tag plugin benutzen.

<cmd:plugin plugin="Contact" from="noreply@example.com" to="me@example.com" />

Diese Zeile bindet zum Beispiel in Deine Seite ein Kontakt-Formular ein und übergibt auch direkt die Absender- und Empfänger-Adresse.

<cmd:plugin plugin="Map" markers='[{
    "title": "Example",
    "position": [51.248855, 7.627476]
}]' options='{
    "panControl": false,
    "styles": [{
        "stylers": [{ "saturation": -100 }]
    }]
}' />

Die Parameter können auch ein JSON-Objekt sein, wie zum Beispiel beim Aufruf des Map-Plugins, welches eine Google-Map im Inhalt platziert. Dabei ist wichtig, dass das JSON-Array mit einfachen Anführungszeichen umschlossen wird, damit innerhalb des Objektes doppelte Anführungszeichen verwendet werden können.

Ausblick

Soweit die Grundlagen von Content MarkDown. In kommenden Artikeln beschäftige ich mich weiter mit Content MarkDown, mit dem erstellen eigener Layouts und mit der Enwicklung eigener Plugins für Deine Cmd-Seite.

Beachte, dass das Projekt momentan im Alpha-Stadium ist. Fehler sind als nicht auszuschließen und ein paar Funktionen sind noch nicht ganz ausgereift. Deshalb freue ich mich auf Deine Ideen und Dein Feedback. Werde Teil des Projektes!

Zuerst das Resultat

Ein bisschen Theorie über Zykloide

Auch in diesem Effekt brauchen wir ein bisschen Theorie, jedoch nicht sehr viel. Obwohl die Bewegungen beinahe chaotisch wirken, steckt hinter ihnen ein mathematisches Muster. Punkt für Punkt wird das Muster aus der Rotation von Kreisen gegeneinander generiert. Klingt kompliziert, ist aber eigentlich ganz einfach. Gehen wir es Schritt für Schritt durch.

Als erstes denken wir uns einen Kreis in der Mitte. Dieser Kreis rotiert pro Iteration um einen bestimmten Winkel, zum Beispiel 2°.

Nun denken wir uns einen zweiten Kreis, der an dem Punkt auf dem ersten Kreis befestigt ist. Dieser Kreis ist halb so groß und rotiert doppelt so schnell, jedoch in die entgegengesetzte Richtung.

Wir können nun beliebig viele Kreise hinzufügen, so wird die entstehende Bewegung immer komplexer. So sieht die Bewegung zum Beispiel mit drei Kreisen aus.

Umsetzung I: HTML

Bevor wir den Effekt mit JavaScript umsetzen müssen, brauchen wir zunächst ein HTML-Dokument mit einem Canvas. Hier binden wir auch die JavaScript-Datei ein.

<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<title>Cycloids</title>
</head>

<body>
	<canvas></canvas>
	<script type="text/javascript" src="js/main.js"></script>
</body>

</html>

Umsetzung II: Javascript

Nun können wir mit dem Erstellen des Effekts beginnen. Als erstes definieren wir ein paar Konstanten.

var width = 600, height = 600;
var numCircles = 5;
var ratio = 1.41;
var maxRadius = 290;
var step = Math.PI / 180;

width und height stellen die Größe des Canvas dar. numCircles definiert die Anzahl der Kreise, ratio ist das Verhältnis zwischen den Größen der einzelnen Kreise. In diesem Fall ist jeder Kreis 1,41 mal so klein wie der vorherige. maxRadius ist der maximale gesamte Radius aller Kreise. So passt das Muster immer in den Canvas. step ist der Winkel, um den sich der erste Kreis jede Iteration dreht.

document.body.setAttribute('style', 'margin: 0px; padding: 0px; background: #111111; text-align: center;');

var canvas = document.getElementsByTagName('canvas')[0];

canvas.setAttribute('style', 'margin: 0px auto;');
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);

var context = canvas.getContext('2d');

Nun bereiten wir den Canvas vor. Zunächst weisen wir dem Body ein paar Stile vor, danach wählen wir den Canvas aus und geben ihm auch Stile, Breite und Höhe. Zuletzt fragen wir noch den Context ab.

var smallestRadius = maxRadius;
while(smallestRadius > .01 && accumulatedRadius(smallestRadius) > maxRadius) {
	smallestRadius -= .01;
}

Als nächstes ermitteln wir den Radius des kleinsten Kreises. Insgesamt dürfen alle Radien zusammen nicht größer sein als maxRadius. Also starten wir mit maxRadius und verkleinern den Radius so lange, bis alle Radien zusammen kleiner als maxRadius sind. Mit der Funktion accumulatedRadius berechnen wir den summierten Radius aller Kreise.

function accumulatedRadius(smallestRadius) {
	var result = 0;
	for(var i = 0; i < numCircles; i++) {
		result += smallestRadius;
		smallestRadius *= ratio;
	}
	return result;
}

In der Funktion accumulatedRadius gehen wir einfach alle Kreise durch und addieren den Radius zur Summe.

Nachdem wir nun den kleinsten Radius kennen, können wir die Kreise generieren und in einem Array speichern.

var circles = [];
for(var i = 0; i < numCircles; i++) {
	circles.push({
		angle: 0,
		radius: smallestRadius * Math.pow(ratio, numCircles - i - 1)
	});
}

Für jeden Kreis speichern wir im Array circles ein Objekt, dass den Winkel und Radius dieses Kreises enthält. Der Winkel ist zu Anfang bei allen Kreisen 0. Den Radius können wir aus dem kleinsten Radius generieren, indem wir pro Kreis den Radius mit ratio multiplizieren.

context.fillStyle = '#ffffff';
window.setInterval(function() {
	var position = {
		x: width / 2,
		y: height / 2
	};
	var deltaAngle = step;
	for(var i = 0; i < numCircles; i++) {
		position.x += circles[i].radius * Math.sin(circles[i].angle);
		position.y += circles[i].radius * Math.cos(circles[i].angle);
		circles[i].angle += deltaAngle;
		deltaAngle *= -1 * ratio;
	}
	context.fillRect(position.x, position.y, 1, 1);
}, 1);

Schließlich können wir die Iteration starten. Den fillStyle setzen wir auf #ffffff.

In jeder Iteration beginnen wir im Mittelpunkt des Canvas. Diesen speichern wir im Objekt position. In der Variable deltaAngle speichern wir den Winkel, um den der erste Kreis rotieren wird. Nun gehen wir alle Kreise durch.

Mit Sinus und Cosinus verschieben wir für jeden Kreis position. So berechnen wir in jeder Iteration den Endpunkt der aktuellen Kreiswinkel. Diesen Endpunkt zeichnen wir schließlich auf unserem Canvas ein. Nach jeder Iteration werden die für die Kreise gespeicherten Winkel um deltaAngle geändert, wobei deltaAngle selbst mit jedem Kreis wieder umgekehrt und mit ratio multipliziert wird, genau wie vorhin bei unseren drei Kreisen.

So entsteht Punkt für Punkt ein komplexes Muster. Obwohl dieses Muster zufällig wirkt, zeichnen sich mit der Zeit Regelmäßigkeiten ab. So oder so ist der Effekt jedenfalls interessant.

Variationen und Spielerei

Den Effekt selbst kann man über die Anzahl der Kreise und die Größenverhältnisse variieren. Dafür habe ich hier eine interaktive Demo hochgeladen.

Mit diesem Effekt zeige ich nur stellvertretend die vielen Möglichkeiten, die uns dank Canvas, JavaScript und ein bisschen Fantasie offen stehen. Hiermit fordere ich Dich auf, ein wenig mit dem Canvas herum zu experimentieren. Im Web gibt es schon extrem viele Canvas-Experimente, aber der Kreativität sind keine Grenzen gesetzt.

Was haben wir vor?

Diese »Simulation« zeigt, wie man mit nur zwei physikalischen Prinzipien einen interessanten und interaktiven Effekt erzeugen kann. Im Verlauf des Artikels erkläre ich kurz die physikalischen Prinzipien, die hinter diesem Effekt stehen, danach machen wir uns ans Werk, den Effekt selbst zu erstellen.

Physik I: Anziehung zwischen zwei Körpern

Das erste physikalische Prinzip, welches ich in der Erstellung des Effektes genutzt habe, ist die Anziehung zwischen zwei Körpern. Hinweis: Ich habe nicht Physik Studiert und meine Tage im Physik-Unterricht liegen auch schon ein paar Jahre zurück. Ich gehe hier nicht im Detail auf die Physik ein und vereinfache die Formeln an einigen Stellen..

Die Anziehungskraft zwischen zwei Körpern kann man deutlich in unserem Sonnensystem sehen. Sie ist die Kraft, die den Mond auf seiner Bahn um die Erde hält und die Erde auf der Umlaufbahn um die Sonne. Durch die gleiche Kraft kommt bei uns auf der Erde auch die Erdanziehungskraft zustande.

Schaut man sich noch einmal die Demo oben an, kann man sehen, dass die Punkte von dem Mauszeiger abgestoßen werden. Ich habe hier (physikalisch nicht ganz korrekt) die Anziehungskraft einfach umgekehrt, damit die Punkte abgestoßen werden, nicht angezogen. Dies funktioniert dann quasi, als wenn man zwei Magneten verkehrt herum aneinander hält—sie stoßen sich ab.

Die Anziehungskraft (oder in diesem Fall »Abstoßungskraft«) ist von drei Faktoren abhängig: der Masse der beiden Körper und dem Abstand zwischen den Körpern. Je größer die Masse der beiden Körper ist, desto stärker ist die Anziehungskraft. Je weiter die Körper auseinander sind, desto mehr nimmt die Kraft ab. Dies lässt sich durch die folgende Formel abbilden:

$$F_G = G \frac{m_1 * m_2}{r^2}$$

\(m_1\) und \(m_2\) sind die Massen der beiden Körper und \(r\) ist die Entfernung zwischen den beiden Körpern. \(G\) ist die universelle Gravitationskonstante, sie stellt eine Relation zwischen Masse, Entfernung und Kraft dar. In unserem Fall lassen wir die Konstante einfach weg. Physikalisch ist dies zwar sehr falsch, aber hier geht es nicht um perfekte Physik und das genaue Verhältnis zwischen Masse und Kraft ist in diesem Fall nicht so wichtig, denn wir definieren später die Masse der Punkte so oder so nach belieben. Die für uns relevante Formel ist also:

$$F_G = \frac{m_{Punkt} * m_{Cursor}}{r^2}$$

Physik II: Von der Kraft zur Bewegung

Als nächstes müssen wir mit dieser Kraft, die wir jetzt berechnen können, irgendwie die Strecke herausfinden, um die sich die Punkte bewegen. Dazu werfen wir erst einmal einen Blick auf den Zusammenhang zwischen Bewegung, Geschwindigkeit und Beschleunigung.

Wenn sich der Standpunkt \(s\) eines Körpers ändert, also eine Bewegung stattfindet, liegt eine Geschwindigkeit vor. Geschwindigkeit, Strecke und Zeit stehen im folgenden Verhältnis:

$$s = v * t$$

Das ist vergleichbar mit der Bewegung eines Autos: Wenn ein Auto 30 Sekunden lang eine Geschwindigkeit von 30 Metern pro Sekunde fährt, legt es insgesamt eine Strecke von \(s = 30 m/s * 30 s = 900 m\) zurück. Wenn ein Auto in 60 Sekunden 1200 Meter zurücklegt, beträgt die Geschwindigkeit \(v = \frac{1200 m}{60 s} = 20 m/s\). Soweit die Beziehung zwischen Strecke und Zeit.

Analog kann man eine ähnliche Beziehung zwischen der Geschwindigkeit und Beschleunigung herstellen:

$$v = a * t$$

Auch hier wieder der Vergleich mit einem Auto: Beschleunigt ein Auto von 0 Metern pro Sekunde auf 30 Meter pro Sekunde in 5 Sekunden, beträgt die Beschleunigung \(a = \frac{30 m/s}{5 s} = 6 m/s^2\). Beschleunigt ein Auto 20 Sekunden lang pro Sekunde um 3 Meter pro Sekunde, nimmt die Geschwindigkeit um \(v = 3 m/s^2 * 20 s = 60 m/s\) zu.

Als letztes brauchen wir noch die Beziehung zwischen der Kraft, mit der ein Körper beschleunigt wird, und der resultierenden Beschleunigung:

$$F = a * m$$

Hier kommt wieder die Masse des zu beschleunigenden Körpers, also unseres Punktes, ins Spiel. Je schwerer der Körper ist, desto mehr Kraft wird benötigt, um ihn in Bewegung zu versetzen. Das kannst Du leicht nachvollziehen: Einen Tennisball zu werfen ist viel leichter als eine Bowlingkugel zu werfen.

Diese verschiedenen Beziehungen können wir jetzt nutzen, um eine Abstoßung zwischen den Punkten und unserem Cursor zu simulieren.

Grundgerüst aus HTML und JavaScript

Bevor wir mit dem JavaScript-Code beginnen können, brauchen wir zunächst eine Leinwand:

<!DOCTYPE html>
<html>
<head>
	<title>Physik Swing</title>
</head>
<body>
	<canvas></canvas>
	<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
	<script type="text/javascript" src="js/main.js"></script>
</body>
</html>

Nun folgt unser JavaScript. Als erstes definieren wir einige Eigenschaften der Simulation, nämlich die Höhe und Breite der Leinwand, den Abstand und Radius der Punkte und die Anzahl der Reihen und Spalten von Punkten.

var width = 500, height = 500;
var rythm = 12, radius = 3;
var rows = 10, columns = 10;

Nun erstellen wir eine Animation. Ich benutze dazu gerne die Funktion window.requestAnimationFrame(), denn damit kann man wesentlich flüssigere Animationen erreichen. Allerdings ist diese Funktion nicht in jedem Browser vorhanden, also brauchen wir ein Fallback.

if(!window.requestAnimationFrame) {
	window.requestAnimationFrame = ( function() {
		return window.webkitRequestAnimationFrame ||
		window.mozRequestAnimationFrame ||
		window.oRequestAnimationFrame ||
		window.msRequestAnimationFrame ||
		function(callback, element) {
			window.setTimeout(callback, 1000 / 60);
		};
	})();
}

Nun bereiten wir schon einmal alles für die Animation vor.

var lastFrameTime = null;
var mousePosition = null;
var mouseDown = false;

var $canvas = $('canvas');
$canvas.attr('width', width).attr('height', height).css({
	margin: '0px auto'
});

var context = $canvas.get(0).getContext('2d');

$('body').css({
	textAlign: 'center',
	background: '#111111',
	margin: '0px'
}).mousemove(function(e) {
	var fixPoint = $canvas.offset();
	
	mousePosition = {
		x: e.pageX - fixPoint.left,
		y: e.pageY - fixPoint.top
	};
}).mousedown(function() {
	mouseDown = true;
}).mouseup(function() {
	mouseDown = false;
});

Hier passiert eininges: Wir definieren uns ein paar Variablen, um den Zeitpunkt des letzten Frames und den Status der Maus zu speichern. Wir geben dem Canvas Breite und Höhe und legen ein bisschen CSS fest. Wir fragen den Context des Canvas ab. Abschließend geben wir dem Body noch einige CSS-Eigenschaften und binden an ihn drei Event-Handlers, die den Maus-Status speichern, sobald sich dieser ändert.

var dots = [];
for(var x = 0; x < columns; x++) {
	for(var y = 0; y < rows; y++) {
		var x0 = (width - rows * rythm) / 2 + x * rythm;
		var y0 = (height - columns * rythm) / 2 + y * rythm;
		
		dots.push({
			x: x0,
			y: y0,
			x0: x0,
			y0: y0,
			vx: 0,
			vy: 0
		});
	}
}

loop();

Nun generieren wir ein Array mit den Punkten. Jeder Punkt bekommt eine Ursprungs-Koordinate \((x_0|y_0)\), eine aktuelle Position \((x|y)\) und einen Geschwindigkeits-Vektor \((v_x|v_y)\). Warum müssen wir die Geschwindigkeit auch speichern? Wenn der Cursor später eine Kraft auf einen Punkt ausübt, wird dieser beschleunigt, nimmt also an Geschwindigkeit zu. Bewegt man dann den Cursor weg, bleibt der Punkt natürlich nicht sofort regungslos stehen, sondern bewegt sich durch seine Trägheit weiter. Deshalb müssen wir hier die »angesammelte« Geschwindigkeit speichern.

In der letzten Zeile rufen wir schließlich die Funktion loop() auf. Diese Funktion stellt quasi die Animations schleife dar, für jeden Frame neu durchlaufen wird. Diese Funktion definieren wir jetzt.

function loop() {
	var thisFrameTime = new Date().getTime();
	if(lastFrameTime != null) {
		update(thisFrameTime - lastFrameTime);
	}
	lastFrameTime = thisFrameTime;
	
	draw();
	
	window.requestAnimationFrame(loop);
}

Als erstes generieren wir die Zeit des aktuellen Frames, damit können wir die Zeit berechnen, die seit dem letzten Frame vergangen ist. Dies ist später die Zeit, die wir in unsere Formeln für Beschleunigung und Geschwindigkeit einsetzen können. Wenn lastFrameTime noch null ist, befinden wir uns grade im ersten Frame, deshalb muss die Funktion update() noch nicht ausgeführt werden. Ansonsten berechnet diese Funktion die Beschleunigung und Bewegung für den verstrichenen Zeitraum und aktualisieren die Punkte entsprechend. Anschließend wird die Funktion draw() ausgeführt, diese zeichnet den Canvas neu. Zuletzt bewirkt der Aufruf von window.requestAnimationFrame(loop), dass die Funktion loop() vor dem nächsten aktualisieren des Bildschirms erneut aufgerufen wird.

function update(deltaTime) {
	
}

function draw() {
	context.clearRect(0, 0, width, height);
	
	for(var i = 0; i < dots.length; i++) {
		context.fillStyle = '#ffffff';
		
		context.beginPath();
		context.arc(dots[i].x, dots[i].y, radius, 0, 2 * Math.PI);
		context.fill();
	}
}

Die Funktion update() tut vorerst gar nichts, erst kümmern wir uns darum, dass die Punkte korrekt auf dem Canvas angezeigt werden. Dazu dient die Funktion draw().

Hier wird zunächst die Leinwand geleert, danach wird jeder Punkt einzeln an seiner aktuellen Position \((x|y)\) ausgegeben.

Bewegung und Beschleunigung

So sieht unsere Simulation momentan aus. Die Punkte bewegen sich natürlich nicht, da wir die update()-Funktion noch nicht geschrieben haben. Das kommt jetzt! Als erstes definieren wir ein paar neue Konstanten:

var dotMass = 5, cursorMass = 1000000;
var frictionCoefficient = .95;

Hier legen wir die Masse des Cursors und der einzelnen Punkte fest. Diese Werte habe ich durch ein wenig experimentieren herausgefunden. Durch Anpassen dieser Werte können wir das Verhalten der Simulation anpassen. Außerdem legen wir die Reibung fest, damit die Punkte auch wieder Geschwindigkeit verlieren.

Nun schreiben wir die update()-Funktion.

function update(deltaTime) {
	for(var i = 0; i < dots.length; i++) {
		var mouseAccelerationVector = {
			x: 0,
			y: 0
		};
		if(mousePosition != null) {
			var distanceSquared = Math.pow(mousePosition.x - dots[i].x, 2) + Math.pow(mousePosition.y - dots[i].y, 2);
			var distance = Math.sqrt(distanceSquared);
			var mouseAcceleration = (mouseDown ? 4 : 1) * cursorMass / distanceSquared;
			mouseAccelerationVector.x = mouseAcceleration * (dots[i].x - mousePosition.x) / distance;
			mouseAccelerationVector.y = mouseAcceleration * (dots[i].y - mousePosition.y) / distance;
		}
		
		dots[i].vx += mouseAccelerationVector.x * deltaTime / 1000;
		dots[i].vy += mouseAccelerationVector.y * deltaTime / 1000;
		
		dots[i].vx *= frictionCoefficient;
		dots[i].vy *= frictionCoefficient;
		
		dots[i].x += dots[i].vx * deltaTime / 1000;
		dots[i].y += dots[i].vy * deltaTime / 1000;
	}
}

Für jeden Punkt müssen wir die Änderungen getrennt berechnen. Wenn die Maus-Position bisher unbekannt ist, findet keine Beschleunigung statt. Kennen wir die Maus-Position jedoch, können wir die Beschleunigung einfach berechnen. Wir erinnern uns an die Formeln:

$$F = \frac{m_{cursor} * m_{punkt}}{r^2}$$
$$F = a * m_punkt$$

\(F\) beschreibt hier in beiden Formeln die gleiche Kraft, und zwar die Kraft, die der Cursor auf einen Punkt auswirkt. Deshalb können wir die Formeln kombinieren, um eine Formel für die Beschleunigung \(a\) zu erhalten.

$$a = \frac{m_{cursor} * m_{punkt}}{r^2 * m_{punkt}} = \frac{m_{cursor}}{r^2}$$

Die Entfernung \(r\) können wir einfach aus den Koordinaten der Maus und des Punktes berechnen:

$$r^2 = (x_{maus} – x_{punkt})^2 + (y_{maus} – {y_punkt)^2$$

Das ist genau, was wir in der Variable distanceSquared speichern. Wir speichern hier das Quadrat der Entfernung, da wir die Entfernung später so oder so als Quadrat einsetzen müssen. Später brauchen wir jedoch die Entfernung auch noch unquadriert, deshalb ziehen wir in der nächsten Zeile aus distanceSquared die Wurzel.

Mit unserer Formel können wir jetzt einfach die Beschleunigung berechnen, diese speichern wir in mouseAcceleration. Wenn die Maus gedrückt ist, wird die Masse des Cursors vervierfacht, so kann der Nutzer hinterher auch noch per Klick mit dem Effekt interagieren.

Aus dieser Gesamt-Beschleunigung können wir jetzt die Beschleunigung in X- und Y-Richtung ermitteln. Da die Beschleunigung von der Entfernung abhängig ist, können wir uns folgender Formel bedienen:

$$\frac{x}{r} = \frac{a_x}{a}$$
$$\frac{y}{r} = \frac{a_y}{a}$$

So können wir die Werte für mouseAccelerationVector berechnen.

Um welchen Betrag sich die Geschwindigkeit ändert, können wir mit dieser Formel berechnen:

$$v = a * t$$

Hier setzen wir als Zeit deltaTime in Sekunden ein. Die berechneten Werte addieren wir anschließend zu dots[i].vx und dots[i].vy.

Als nächstes multiplizieren wir die Geschwindigkeit mit dem Reibungswert, damit die Punkte sich nicht ewig weiter bewegen.

Zuletzt können wir die Änderung der Position mit dieser Formel berechnen, auch hier setzen wir wieder deltaTime ein.

$$s = v * t$$

Physik III: Federschwingung

So, jetzt können wir mit dem Cursor die Punkte abstoßen. Es gibt nur ein Problem: die Punkte kommen nicht zurück. Um dies jetzt zu ändern, müssen wir uns wieder der Physik zuwenden.

Stellen wir uns einmal vor, die Punkte wären mit einem Gummiband oder einer Feder an ihrer Original-Position befestigt. Bewegt man die Punkte nun von dieser Position weg, zwingt die Feder sie zurück zu ihrer Original-Position. Allerdings vollzieht sich dieser Vorgang nicht linear, auf dem Weg zur Original-Position nimmt der Punkt an Geschwindigkeit zu und schießt so übers Ziel hinaus. So pendelt die Bewegung eine Weile um die Originalposition. Das klingt zwar sehr komplex, allerdings lässt sich dies durch eine sehr einfache Formel ausdrücken:

$$F = D * s$$

\(F\) ist hier die Kraft, die die Feder auf den Punkt ausübt und \(D\) ist die Federkonstante. Diese ist für jede Feder anders, wir können diese später einfach als Konstante definieren. \(s\) ist die Entfernung des Punktes von seiner Original-Position. Diese Formel sagt also einfach nur aus, dass die ausgeübte Kraft umso stärker ist, je weiter der Punkt von seiner Original-Position entfernt ist. Auch diese Formel kann man in der Praxis beobachten: Zieht man ein Gummiband oder eine Feder in die Länge, muss man um so stärker ziehen, je weiter das Band oder die Feder schon ausgedehnt ist.

Anwendung der Feder-Kraft

Da wir bereits wissen, wie wir aus einer Kraft eine Beschleunigung und daraus die Geschwindigkeit und Bewegung berechnen, können wir unsere update()-Funktion jetzt einfach anpassen, um den federnden Effekt zu realisieren.

Zunächst definieren wir die oben erwähnte Feder-Konstante.

var featherConstant = 300;

Als nächstes arbeiten wir die Feder-Kraft in die update()-Funktion ein.

function update(deltaTime) {
	for(var i = 0; i < dots.length; i++) {
		var mouseAccelerationVector = {
			x: 0,
			y: 0
		};
		if(mousePosition != null) {
			var distanceSquared = Math.pow(mousePosition.x - dots[i].x, 2) + Math.pow(mousePosition.y - dots[i].y, 2);
			var distance = Math.sqrt(distanceSquared);
			var mouseAcceleration = (mouseDown ? 4 : 1) * cursorMass / distanceSquared;
			mouseAccelerationVector.x = mouseAcceleration * (dots[i].x - mousePosition.x) / distance;
			mouseAccelerationVector.y = mouseAcceleration * (dots[i].y - mousePosition.y) / distance;
		}
		
		var featherAccelerationVector = {
			x: 0,
			y: 0
		};
		var amplitude = Math.sqrt(Math.pow(dots[i].x - dots[i].x0, 2) + Math.pow(dots[i].y - dots[i].y0, 2));
		if(amplitude != 0) {
			var featherAcceleration = featherConstant * amplitude / dotMass;
			featherAccelerationVector.x = featherAcceleration * (dots[i].x0 - dots[i].x) / amplitude;
			featherAccelerationVector.y = featherAcceleration * (dots[i].y0 - dots[i].y) / amplitude;
		}
		
		dots[i].vx += (mouseAccelerationVector.x + featherAccelerationVector.x) * deltaTime / 1000;
		dots[i].vy += (mouseAccelerationVector.y + featherAccelerationVector.y) * deltaTime / 1000;
		
		dots[i].vx *= frictionCoefficient;
		dots[i].vy *= frictionCoefficient;
		
		dots[i].x += dots[i].vx * deltaTime / 1000;
		dots[i].y += dots[i].vy * deltaTime / 1000;
	}
}

Auch hier ist die Federbeschleunigung erst einmal 0, denn wenn der Punkt sich noch nicht vom Original-Punkt bewegt hat, wirkt auch noch keine Kraft. Anschließend berechnen wir die Amplitude, also die Entfernung vom Original-Punkt. Dazu können wir wieder \(r^2 = x^2 + y^2\) nutzen. Wenn die Amplitude nicht 0 ist, berechnen wir aus ihr die Kraft und daraus die Beschleunigung des Punktes und speichern dies in featherAcceleration. Anschließend teilen wir, wie schon bei der Maus-Beschleunigung, diese Beschleunigung in X- und Y-Komponente auf.

Bei der Änderung der Geschwindigkeit addieren wir nun die beiden wirkenden Beschleunigungen und bringen somit die Federschwingung in die Simulation ein.

Einfache Formeln, viel Interaktivität

Damit ist unsere Simulation komplett. Mit nur ein paar einfachen physikalischen Formeln konnten wir schon eine relativ komplexe Interaktion erreichen. Vielleicht hat dies nicht unbedingt viele praktische Anwendungsmöglichkeiten, aber mit dieser oder einer abgewandelten Technik kann man zumindest einen interessanten Effekt erreichen.

Nach einer viel zu langen Schreibpause ist dies mein erster Artikel. Ich freue mich auf Euer Feedback. Was macht ihr mit dem Canvas? Jetzt seid ihr dran!

Jetzt aber los!

Schritt 10: Eine neue Methode für Rechnungs-Posten

Auch für die Posten werden wir eine neue Methode in unserer Invoice-Klasse bereistellen. So können wir später einfach die Posten in beliebiger Reihenfolge ausgeben und auch zwischendurch Text-Absätze einschieben. Um das zu testen, ergänze die Generierung des PDFs folgendermaßen:

<?php
	
	$items = array(
		array(
			'name' => 'Produkt 1',
			'description' => 'Lorem ipsum ad qui amet dolore, vitae cetero quaerendum mel ea. Facilis fastidii duo no.',
			'unitprice' => 5.2,
			'quantity' => 3
		),
		array(
			'name' => 'Produkt 2',
			'description' => 'Lorem ipsum ad qui amet dolore, vitae cetero quaerendum mel ea. Facilis fastidii duo no.',
			'unitprice' => 1,
			'quantity' => 9
		),
		array(
			'name' => 'Produkt 3',
			'description' => 'Lorem ipsum ad qui amet dolore, vitae cetero quaerendum mel ea. Facilis fastidii duo no.',
			'unitprice' => .99,
			'quantity' => 18
		)
	);
	
	$invoiceNumber = date('Ymd') . '-' . rand(0, 100);
	$date = new DateTime();
	
	require_once('invoice.php');
	
	$invoice = new Invoice($invoiceNumber, $date);
	
	$invoice->Paragraph('Sehr geehrte Frau Mustermann,

vielen Dank für Ihren Einkauf bei Advitum.de. Dies ist Ihre Rechnung!

Lorem ipsum ad qui amet dolore, vitae cetero quaerendum mel ea. Facilis fastidii duo no. Viris partiendo ius no, alia animal nam at. Feugait imperdiet ius an, no quis facer lucilius vis. Aliquam saperet contentiones ex pro, id idque offendit ius. Fugit suavitate ad eam, ut essent debitis cum.');
	
	$invoice->Item(array_shift($items));
	
	$invoice->Paragraph('Lorem ipsum ad qui amet dolore, vitae cetero quaerendum mel ea. Facilis fastidii duo no. Viris partiendo ius no, alia animal nam at. Feugait imperdiet ius an, no quis facer lucilius vis. Aliquam saperet contentiones ex pro, id idque offendit ius. Fugit suavitate ad eam, ut essent debitis cum.');
	
	foreach($items as $item) {
		$invoice->Item($item);
	}
	
	$invoice->output();
	
?>

Die Methode Item wird später einen Rechnungs-Posten entgegennehmen und diesen Darstellen. Nach dem ersten Posten schieben wir hier einen Text-Absatz ein.

Nun müssen wir diese neue Methode auch in der Klasse bereitstellen.

public function Item($item) {
	$this->ln($this->rythm);
	
	$this->SetFont('Helvetica', 'B', 9);
	$this->Cell($this->leftColumnWidth + $this->gutter, 0, $item['name']);
	
	$this->SetFont('Helvetica', '', 7);
	$this->FitCell($item['quantity'] . ' á EUR ');
	$this->Currency($item['unitprice']);
	
	$this->ln($this->rythm);
	
	$this->SetX($this->rightColumnX);
	$this->FitCell('EUR ');
	
	$this->SetFont('Helvetica', 'B', 12);
	$this->Currency($item['quantity'] * $item['unitprice']);
	
	$this->sum += $item['quantity'] * $item['unitprice'];
	
	$this->SetX($this->leftMargin);
	$this->SetFont('Helvetica', '', 9);
	$this->BlockCell($item['description'], $this->leftColumnWidth);
	
	$this->ln($this->rythm * 3);
}

Zunächst sorgen wir für einen Zeilenumbruch mit der Methode ln. Nun können wir den eigentlichen Posten ausgeben. In der linken Spalte geben wir zunächst fettgedruckt den Namen des Postens an. Die breite der Zelle wählen wir hier mit $this->leftColumnWidth + $this->gutter genau so, dass sie am linken Rand der rechten Spalte endet. So können wir nun direkt die erste Zeile der rechten Spalte ausgeben.

Hierzu gibt es zwei neue Methoden, die wir gleich noch erstellen müssen. Die Methode FitCell gibt den übergebenen Text in einer neuen Zelle aus, die genau so breit ist wie der Text. Die Methode Currency ist für die Darstellung des Betrags zuständig. Das lagere ich deshalb aus, da wir noch öfter auf der Rechnung beträge ausgeben müssen. So werden diese immer einheitlich dargestellt und wir müssen uns nicht wiederholen.

Nun aber weiter im Text. Als nächstes erzwingen wir wieder einen Zeilenbruch und springen dann wieder zur rechten Spalte (Zeile 13). Hier geben wir nun den Betrag des Postens aus, der sich aus dem Einzelpreis und der Stückzahl errechnet. Diesen Betrag addieren wir auch direkt zur Gesamtsumme der Rechnung, welche in $this->sum gespeichert ist.

Als letztes springen wir wieder in die linke Spalte und geben hier mittels BlockCell die Artikel-Beschreibung aus (Zeile 23). Am Ende generieren wir noch einen Zeilenumbruch.

Nun erstellen wir die beiden Methoden FitCell und Currency

private function FitCell($text) {
	$width = $this->GetStringWidth($text);
	$this->Cell($width, 0, $text);
}

private function Currency($amount) {
	$euro = floor($amount);
	$cent = round(($amount - $euro) * 100);
	
	if($cent < 10) {
		$cent = '0' . $cent;
	}
	
	$this->FitCell($euro . ',' . $cent);
}

Die Methode FitCell ermittelt zunöchst mit der Methode GetStringWidth die Breite des darzustellenden Strings. Anschließend wird dieser Text in einer Zelle mit genau dieser Breite dargestellt.

In der Methode Currency ermitteln wir zunächst die Euro- und Cent-Beträge, wobei wir hier auf den ganzen Cent runden. Anschließend sorgen wir dafür, dass der Centbetrag auf jeden Fall zweistellig ist, indem wir gegebenenfalls eine führende Null hinzufügen. Abschließend wird der Betrag mit der Methode FitCell ausgegeben.

Schauen wir uns die Rechnung nun erneut an, sehen wir die Darstellung der Posten. Hat alles Funktioniert? Wunderbar, dann schließen wir die Rechnung jetzt mit der Summe und einer Signatur ab!

Schritt 11 – Ende der Rechnung mit Footer

Erinnerst Du Dich noch an die Methode Header? Diese Methode wird von FPDF am Anfang jeder neuen Seite aufgerufen. Im ersten Teil dieser Serie haben wir diese dazu genutzt, um die Rechnungs-Nummer, das Datum etc. auf die Rechnung zu bringen. Nun werden wir das Äquivalent der Header-Methode für den Seiten-Abschluss, die Methode Footer, dazu nutzen, die Rechnung abzuschließen.

Dazu brauchen wir in der index.php nichts ändern, denn die Methode Footer wird von FPDF auch automatisch aufgerufen. Wir müssen diese jetzt lediglich in unserer Invoice-Klasse bereitstellen.

public function Footer() {
	$this->SetLineWidth(.2);
	$this->Line($this->rightColumnX, $this->GetY(), $this->rightColumnX + 25, $this->GetY());
	
	$this->ln($this->rythm);
	$this->SetX($this->rightColumnX);
	
	$this->SetFont('Helvetica', '', 7);
	$this->FitCell('EUR ');
	
	$this->SetFont('Helvetica', 'B', 12);
	$this->Currency($this->sum);
	
	$this->ln($this->rythm);
	$this->SetX($this->rightColumnX);
	$this->SetFont('Helvetica', '', 7);
	$this->Cell(0, 0, 'Gesamtsumme');
	
	$this->ln($this->rythm);
	$this->SetFont('Helvetica', '', 9);
	
	$this->Paragraph('Wir wünschen Ihnen viel Spaß mit dem Produkt XYZ.


Mit freundlichen Grüßen,

Ihr Lars Ebert von Advitum.de');
}

Als erstes Zeichen wir eine horizontale Linie in die rechte Spalte, als Summen-Strich. Dazu setzen wir die Linien-Breite in Zeile 2 auf 0,2 Millimeter. Mit der Methode Line erstellen wir die Linie selbst.

Anschließend f+gen wir einen Zeilenumbruch ein, springen in die rechte Spalte und geben hier die Gesamtsumme der Rechnung aus. Hier können wir wieder auf unsere Methode Currency zurückgreifen. Unter der Summe schreiben wir noch »Gesamtsumme« und springen anschließend wieder in die linke Spalte.

Nun geben wir mit der Methode Paragraph noch abschließende Worte und eine Signatur ein.

Schauen wir uns wieder die Rechnung im Frontend an, sehen wir direkt das Resultat. Am Ende wir nun die Rechnungs-Summe ausgegeben.

Ausblick: Wie geht es weiter?

Deine Rechnung ist nun fertig. Allerdings sind wir noch nicht am Ende dieser Artikelserie angekommen. Nun, wo Du Dich mit den grundlegenden Funktionen von FPDF vertraut gemacht hast, werden wir uns mit einigen Aspekten detaillierter beschäftigen. Denn die Flexibilität von FPDF hat den Preis, dass man viele Funktionen selbst erstellen muss, wie zum Beispiel den Blocksatz.

Einige Punkte, die wir in Zukunft genauer beleuchten werden, sind die Formatierung von Text mit Blocksatz, Hoch- und Tiefstellung usw. Hier werde ich jeweils im Detail darauf eingehen, wie Du alles sehr kleinschrittig anpassen kannst.

Zum Abschluss habe ich eine Frage an Dich: Welche Funktionen würdest Du gerne genauer behandeln? Schreib mir einfach einen Kommentar!

Schritt 7: Eine Methode für Absätze erstellen

Später werden wir aus der Datei »index.php« heraus Textinhalte auf die Rechnung bringen wollen. Dazu erstellen wir uns jetzt eine neue Methode Paragraph, welche dafür sorgt, dass im PDF Absätze entstehen. Wir beginnen damit, zunächst den Text zu übergeben und dann die Methode selbst zu schreiben:

<?php
	
	$items = array(
		array(
			'name' => 'Produkt 1',
			'description' => 'Lorem ipsum ad qui amet dolore, vitae cetero quaerendum mel ea. Facilis fastidii duo no.',
			'unitprice' => 5.2,
			'quantity' => 3
		),
		array(
			'name' => 'Produkt 2',
			'description' => 'Lorem ipsum ad qui amet dolore, vitae cetero quaerendum mel ea. Facilis fastidii duo no.',
			'unitprice' => 1,
			'quantity' => 9
		),
		array(
			'name' => 'Produkt 3',
			'description' => 'Lorem ipsum ad qui amet dolore, vitae cetero quaerendum mel ea. Facilis fastidii duo no.',
			'unitprice' => .99,
			'quantity' => 18
		)
	);
	
	$invoiceNumber = date('Ymd') . '-' . rand(0, 100);
	$date = new DateTime();
	
	require_once('invoice.php');
	
	$invoice = new Invoice($invoiceNumber, $date);
	
	$invoice->Paragraph('Sehr geehrte Frau Mustermann,

vielen Dank für Ihren Einkauf bei Advitum.de. Dies ist Ihre Rechnung!

Lorem ipsum ad qui amet dolore, vitae cetero quaerendum mel ea. Facilis fastidii duo no. Viris partiendo ius no, alia animal nam at. Feugait imperdiet ius an, no quis facer lucilius vis. Aliquam saperet contentiones ex pro, id idque offendit ius. Fugit suavitate ad eam, ut essent debitis cum.');
	
	$invoice->output();
	
?>

So soll später der Aufruf der Methode aussehen. Nun schreiben wir die Methode:

public function Paragraph($text) {
	$text = explode("\n", $text);
	$this->SetFont('Helvetica', '', 9);
	
	foreach($text as $cell) {
		$cell = trim($cell);
		
		if($cell != '') {
			$this->BlockCell($cell, $this->leftColumnWidth);
		}
		
		$this->ln($this->rythm);
	}
	
	$this->ln($this->rythm);
}

Die Methode Paragraph teilt mittels explode den Text in einzelne Zeilen auf. Die Textgröße wird auf 9 Pt eingestellt.

Nun werden alle Zeilen durchlaufen. Wenn die Zeile nicht leer ist, wird ihr Text an eine weitere Methode BlockCell übergeben, zusammen mit der Breite der linken Spalte. Diese Methode gibt es momentan noch nicht, aber wir werden sie jetzt erstellen.

Schritt 8: Blocksatz in FPDF

Die Theorie hinter dem Blocksatz ist sehr einfach. Zunächst ermitteln wir, wie viele Wörter in die erste Zeile passen. Danach errechnen wir, wie viel Weißraum am Ende übrig bleibt und teilen diesen gleichmäßig auf alle Leerzeichen in der Zeile auf.

private function BlockCell($text, $width) {
	$minSpace = 0.05 * $this->FontSizePt;
	$words = explode(' ', $text);
	
	$lineWords = array();
	$lineWidth = 0;
	while(count($words) > 0) {
		$word = array_shift($words);
		$wordWidth = $this->GetStringWidth($word);
		if($lineWidth + $wordWidth + $minSpace >= $width) {
			$deltaWidth = $width - $lineWidth;
			$deltaSpace = $deltaWidth / (count($lineWords) - 1);
			
			foreach($lineWords as $lineWord) {
				$lineWordWidth = $this->GetStringWidth($lineWord);
				$this->Cell($lineWordWidth + $minSpace + $deltaSpace, 0, $lineWord);
			}
			
			$lineWords = array();
			$lineWidth = 0;
			
			$this->ln($this->rythm);
		}
		
		$lineWords[] = $word;
		$lineWidth += $minSpace + $wordWidth;
	}
	
	$this->Cell(0, 0, implode(' ', $lineWords));
}

Zunächst legen wir fest, wie breit ein Leerzeichen mindestens sein muss. Dies ist natürlich abhängig von der Schriftgroße, deshalb berechnen wir den Mindestabstand hier mit .05 * $this->FontSizePt. Anschließend teilen wir den String in einzelne Worte auf.

Jetzt gehen wir dieses Array Wort für Wort durch. Mit der Methode GetStringWidth können wir die Breite ermitteln, die ein Text bei aktueller Schriftart und -Größe einnehmen würde. Dazu nehmen wir die Mindestbreite für ein Leerzeichen. In der Variable $lineWidth summieren wir diese Werte auf. Sobald ein Wort nicht mehr in die aktuelle Zeile passt, halten wir inne, um die aktuellen Wörter in die Zeile zu bringen und anschließend eine neue Zeile anzufangen. Hierbei ermitteln wir in $deltaWidth, wie viel Platz uns am Ende der Zeile noch bleibt. In $deltaSpace rechnen wir diese verbleibende Breite nun noch auf die Anzahl der Leerzeichen herunter. Pro Wort rechnen wir auf die Zellbreite nun die Breite des Leerzeichens an.

Am Ende müssen alle Worte, die keine ganze Zeile einnehmen, linksbündig ausgegeben werden.

Schritt 9: Unterstützung von UTF-8

Wie Dir in Deiner eigenen Rechnung und auf meinem Screenshot bestimmt aufgefallen ist, werden unsere Umlaute nicht korrekt angezeigt. Das liegt daran, dass FPDF noch nicht mit UTF-8 zurechtkommt. Dies können wir aber ganz schnell beheben. Wir müssen einfach dafür sorgen, dass die Texte von UTF-8 umgewandelt werden in einen Zeichensatz, den FPDF verstehen kann.

private function Encode($text) {
	return mb_convert_encoding($text, "ISO-8859-15", "UTF-8");
}

Die Funktion mb_convert_encoding sorgt dafür, dass der Text von UTF-8 nach ISO-8859-15 konvertiert wird. So können wir später auch noch weitere Sonderzeichen wie zum Beispiel das €-Zeichen darstellen. Diese Methode müssen wir nun überall aufrufen, wo mit dem Text gearbeitet wird. Konkret sind das die beiden Methoden Cell und GetStringWidth.

public function Cell($w, $h=0, $text='', $border=0, $ln=0, $align='', $fill=false, $link='') {
	$text = $this->Encode($text);
	
	$startX = $this->GetX();
	$startY = $this->GetY();
	
	$this->SetY($startY - $this->FontSize / 2 * .6);
	$this->SetX($startX);
	
	parent::Cell($w, $h, $text, $border, $ln, $align, $fill, $link);
	
	$endX = $this->GetX();
	$endY = $this->GetY();
	
	$this->SetY($startY);
	$this->SetX($endX);
}

public function GetStringWidth($text) {
	$text = $this->Encode($text);
	return parent::GetStringWidth($text);
}

In beiden Methoden wandle ich zuerst den Text um, bevor irgendwas sonst geschieht. Die Methode GetStringWidth habe ich weiter nicht verändert, sie ruft nach dem Umwandeln die entsprechende Methode in der Eltern-Klasse auf.

Schaust Du Dir nun Dein PDF erneut an, wirst Du feststellen, dass nun die Sonderzeichen korrekt angezeigt werden können.

Wie geht es weiter?

Im nächsten Artikel werden wir die Posten der Rechnung in das PDF schreiben. Dazu schauen wir uns genauer an, wie wir mehrspaltigen Text mit FPDF generieren können.