Vollzeitblogger

c3js, JavaScript Bibliothek für Diagramme und Charts auf d3.js

September 07, 2014

c3.js ist eine JavaScript Library, die das Erstellen von Diagrammen erleichtert. Davon gibt es eine Hand voll und d3.js machte in der Vergangenheit öfter von sich reden. Nun gibt es mit c3.js eine einsteigerfreundliche Hilfestellung und d3.js ist auch die einzige Abhängigkeit.

Die responsiven Diagramme werden als inline-svg erstellt, das sich der Auflösung der Webseite anpasst, sofern man es nicht anders layoutet.

Diagramme mit JavaScript und c3.js erstellen

Um c3.js zu nutzen, muss man die einzige Abhängigkeit (d3.js) und die CSS und JavaScript Datei von c3.js einbinden:

<code><!-- Load c3.css -->
<link href="/path/to/c3.css" rel="stylesheet" type="text/css">

<!-- Load d3.js and c3.js -->
<script src="/path/to/d3.v3.min.js" charset="utf-8"></script>
<script src="/path/to/c3.min.js"></script>
</code>

Darauf folgt dann ein Element, mit id in dem das Diagramm dargestellt werden soll, in den Beispielen meist <div id="chart"></div>.

Darunter ein Script Tag indem wir das #chart div mit Daten füllen:

<code>var chart = c3.generate({
    bindto: '#chart',
    data: {
      columns: [
        ['data1', 30, 200, 100, 400, 150, 250],
        ['data2', 50, 20, 10, 40, 15, 25]
      ]
    }
});
</code>

Wichtig zu beachten ist, das wenn wir die Erstellung des Diagramms nicht timen, muss dieses Script Tag unter oder nach dem HTML Tag mit der angegebenen ID stehen.

Mehr Informationen gibt es auf der Getting Started Seite von C3.js.

Vollständiges Beispiel mit CDNJS Links (copy & paste ready):

<code><html>
<head>
<!-- Load c3.css -->
<link href="http://cdnjs.cloudflare.com/ajax/libs/c3/0.1.29/c3.css" rel="stylesheet" type="text/css">

<!-- Load d3.js and c3.js -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js" charset="utf-8"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/c3/0.1.29/c3.min.js"></script>
</head>
<body>
<div id="chart"></div>
<script>
var chart = c3.generate({
    bindto: '#chart',
    data: {
      columns: [
        ['data1', 30, 200, 100, 400, 150, 250],
        ['data2', 50, 20, 10, 40, 15, 25]
      ]
    }
});
</script>
</body>
</code>

Interaktive JavaScript Diagramme mit c3.js

In den Beispielen auf der offiziellen Webseite treffen wir häufig folgenden Code, der nach einer Sekunde weitere Daten in ein Diagramm lädt:

<code>setTimeout(function () {
    chart.load({
        columns: [
            ['data1', 230, 190, 300, 500, 300, 400]
        ]
    });
}, 1000);
</code>

Dies ist ein sehr simples Beispiel, zeigt aber sehr deutlich wie einfach es ist weitere Daten in ein Chart zu laden. Anstatt setTimeout können wir auch einfach einen Klick auf einen Knopf (evt. um Bestimmte Daten ein oder auszublenden) oder mouseOver events an diese Funktion binden.

Mehr Beispiele gibt es auf der Examples Seite.

Fazit

Mir gefällt c3.js außerordentlich gut und es vereinfacht die Handhabung des mächtigen d3.js. Alternativen zu c3 gibt es einige, aber im Open Source Bereich ist kaum eine so vollständig, anpassbar und gut dokumentiert.

Highcharts ist eine Alternative für Charts, die allerdings ein paar Dollar pro Lizens kostet.

Für mich ist c3.js jetzt schon ein Standard und meine go-to Bibliothek wenn es um simple Datenvisualisierung geht.