I’m working on a site where I talk about data in a specific field (not going to talk about it or promote it here for many reasons), and there is no better way to show data that using charts. Charts give a fast, high-level view of how the data “looks” (we are visual creatures). Initially I started tinkering with D3.js but it took a lot of work to create something very simple. Then I remembered there is C3.js which is a charting library based on D3.js that solves just this case.
When I learn something I like to write about it because it helps me remember things better, it creates an archive where I can go back and see how things are done (my way :-)), and it’s a good way to share what I learn. So here it is. The code for this lesson (and all future lessons) is located here: https://github.com/vainolo/learning-c3
One of the things I really like about JavaScript is that you can start with a text editor and a browser and create incredibly complex things, like in this case. I’ll start by creating a simple line chart from data embedded in the same HTML page where the chart is shown. The code is very simple:
<html>
<head>
<script src="https://unpkg.com/d3@5.12.0/dist/d3.min.js"></script>
<link href="https://unpkg.com/c3@0.7.11/c3.min.css" rel="stylesheet">
<script src="https://unpkg.com/c3@0.7.11/c3.min.js"></script>
</head>
<body>
<div id="chart"></div>
<script>
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['data1', 50, 20, 10, 40, 15, 25]
]
}
});
</script>
</body>
</html>
The code is based on the C3.js getting started with a small twist – no need to download code and build dependencies as the code is referenced directly from unpkg.com. Probably not what you would do in production but for learning it’s very powerful.
Next I create a div that will contain the chart, and lastly generate the chart using c3.generate. Here’s the resulting chart:
Just like this, out of the box, we get automatic axes, hover behavior, and series selection. To test this further, I’ll add two more series to the chart and see how this looks:
<html>
<head>
Hello
<script src="https://unpkg.com/d3@5.12.0/dist/d3.min.js"></script>
<link href="https://unpkg.com/c3@0.7.11/c3.min.css" rel="stylesheet">
<script src="https://unpkg.com/c3@0.7.11/c3.min.js"></script>
</head>
<body>
<div id="chart"></div>
<script>
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['data1', 50, 20, 10, 40, 15, 25],
['data2', 30, 200, 100, 400, 150, 250],
['data3', 10, 20, 80, 20, 30, 25],
]
}
});
</script>
</body>
</html>
Resulting in this chart:
Go on and play with the chart. You can toggle which series are shown, which also automatically changes the scale of the chart. Pretty awesome!
Next lesson: Learning C3.js – Lesson 2 – Chart Types
Stay tuned for the next part of this tutorial, which will hopefully come soon. For now, happy coding!