Andreas Jankowoi
«Ein Bild sagt mehr als tausend Worte!» Die grafische Aufbereitung der Daten bietet oft die einzige Möglichkeit, komplexe Sachverhalte aus den Daten zu extrahieren und für den Anwender verständlich darzustellen. Die Visualisierung der Daten erhöht die Akzeptanz der Anwendung für den Benutzer und bestimmt die User-Experience ungemein. Aus diesem Grund möchte ich in diesem Blogeintrag auf die Verwendung von „Chart.js“ eingehen. Mit Hilfe dieser JavaScript-Bibliothek ist es möglich, mit wenig Aufwand verschiedene Diagramme in HTML einzubetten.
Chart.js ist ein Open-Source-Projekt mit einer MIT Lizenz, die es erlaubt HTML5 Schaubilder zu erstellen. Aufgrund der ausführlichen Dokumentation auf der Homepage, des leichten Einstiegs sowie der großen Community lassen sich mit überschaubarem Aufwand ansehnliche Grafiken in der Webanwendung darstellen. Chart.js kann Diagramme jeglicher Art erzeugen: Linien-, Balken-, Kuchen-, Polar-Area-, Netz- und Doughnut-Diagramm. Der Teufel steckt selbstverständlich im Detail. Prinzipiell bietet das Produkt jedoch genug Spielraum, einem Großteil der heute aufkommenden Anforderungen gerecht zu werden, das notwendige Knowhow sowie die Ideen vorausgesetzt.
Es gibt verschiedene Möglichkeiten, Chart.js in das Projekt zu integrieren. Der einfachste Weg führt über den Node Package Manager:
npm install chart.js –save
Das Package lässt sich wie andere externe Bibliotheken über CDN im Header der View einbinden:
<head>
<title>Objektkultur Software GmbH</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
Beim Einsatz des Bibliotheks-Managers „LibMan“ in der Projektmappe erfolgt das Herunterladen der JS-Library über Rechtsklick auf das Projekt in der Projektmappe -> Add -> Client Site Library. Anschließend muss die Bibliothek in der entsprechenden View eingebunden werden.
<environment include="Development">
<script src="~/lib/Chart.js/chart.js"></script>
</environment>
<environment exclude="Development">
<script src="~/lib/Chart.js/chart.min.js"></script>
</environment>
Für eine Initialisierung des Doughnut-Diagramms ist zunächst eine Aufbereitung der Daten notwendig. In unserem Beispiel werden einige Kategorien der Blogeinträge im Chart dargestellt. Dazu wird das Datenobjekt als JSON bereitgestellt sowie die wichtigsten Eigenschaften, wie Labels, Farbe und Anzahl der Beiträge in Arrays verpackt.
data: {
labels: ["SharePoint","Azure", ".Net"],
datasets: [{
data: [6,12,12],
borderColor:[
"rgb(60,186,159,0.1)",
"rgb(255,165,0,0.1)",
"rgb(196,88,80,0.1)",
],
backgroundColor: [
"#3cba9f",
"#ffa500",
"#c45850",
],
borderWidth:4,
}]
}
Die Labels entsprechen den einzelnen Segmenten im Bild. Die Farben können im RGB-Format oder als Hexadecimal definiert werden. Wichtiger Hinweis: Immer darauf achten, dass die Anzahl der Farben, Labels und Elemente im Set übereinstimmen, um kein „seltsames“ Verhalten hervorzurufen.
Mit den aufbereiteten Daten lässt sich nun das Chart kinderleicht in die eigene Webanwendung integrieren. Chart.js verwendet das Canvas-Element. Die Canvas-Tags werden wie gewohnt zwischen div-Tags oder td eingebettet und mit einer eindeutigen ID versehen.
<head>
<title>Objektkultur Software GmbH</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body data-rsssl=1>
<div style="width: 600px; height: 600px">
<canvas id="myChart"></canvas>
</div>
</body>
<script>
$(document).ready(
function() {
var canvas = document.getElementById("myChart");
var ctx = canvas.getContext("2d");
var myNewChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ["SharePoint","Azure", ".Net"],
datasets: [{
data: [6,12,12],
borderColor:[
"rgb(60,186,159,0.1)",
"rgb(255,165,0,0.1)",
"rgb(196,88,80,0.1)",
],
backgroundColor: [
"#3cba9f",
"#ffa500",
"#c45850",
],
borderWidth:4,
}]
}
});
</script>
Im ersten Schritt suchen wir unser Canvas-Element im DOM und holen mit „getContext()“ den aktuell Context, in dem wir agieren. Anschließend initialisiert man mit der Methode „new Chart()“ und den aufbereiteten Daten den Context.
Dieses Tutorial führte dich durch die grundlegenden Schritte zum Erstellen eines Schaubildes mit Chart.js. Dies soll eine Basis bilden, um komplexe Sachverhalte visuell nach eigenen Wünschen abzubilden. Im zweiten Teil der Blogreihe stelle ich anhand eines konkreten Kundenfalls, die überarbeitete Darstellung der Gefährdungsbeurteilung unseres Kunden der BGHM vor. Die besondere Schwierigkeit bestand hier in der Abbildung eines Doughnut-Charts mit zwei Datasets. Innerhalb der Grafik werden die verschiedenen Aufgaben in Untersegmenten abgebildet und durch weitere Fortschrittssegmente angereichert.
Autor des Beitrags
#Webentwicklung #.Net #MVC #Integration #JavaScript #ModernWorkplace Nach seiner Studententätigkeit bei Objektkultur, übernahm Andreas die Rolle als Entwickler und Berater. In Kundenprojekten ist Andreas als Full-Stack-Entwickler im Einsatz und …
Wir sind ein Software-Unternehmen mit Hauptsitz in Karlsruhe und auf die Umsetzung von Digitalstrategien durch vernetzte Cloud-Anwendungen spezialisiert. Wir sind Microsoft-Partner und erweitern Standard-Anwendungen bei Bedarf – egal ob Modernisierung, Integration, Implementierung von CRM- oder ERP-Systemen, Cloud Security oder Identity- und Access-Management: Wir unterstützen Sie!
Mehr über uns
Mit unserem Newsletter informieren wir Sie stets über die neuesten Blogbeiträge,
Webcasts und weiteren spannenden Themen rund um die Digitalisierung.
