Last updated on 2019-10-30
Previous lesson: Learning C3.js – Lesson 1 – Getting Started.
Let’s do a short tour of the char types supported by C3.js and how they look. Here’s a summary view of all types except “Stanford” type which I never knew existed and even worse, couldn’t find on the net references on when or how to use it, so I’ll just leave it out.
All of them were generated with 1 helper function and a single invocation for each type graph. Note that I added Bootstrap to this page (first 4 lines after the head tag) to make it look nicer, but this is not a requirement.
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<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 class="container">
<div class="row">
<div class="col">
Line
<div id="line"></div>
</div>
<div class="col">
Spline
<div id="spline"></div>
</div>
<div class="col">
Step
<div id="step"></div>
</div>
<div class="col">
Area
<div id="area"></div>
</div>
</div>
<div class="row">
<div class="col">
Area-Spline
<div id="area-spline"></div>
</div>
<div class="col">
Area-Step
<div id="area-step"></div>
</div>
<div class="col">
Bar
<div id="bar"></div>
</div>
<div class="col">
Scatter
<div id="scatter"></div>
</div>
</div>
<div class="row">
<div class="col">
Pie
<div id="pie"></div>
</div>
<div class="col">
Donut
<div id="donut"></div>
</div>
<div class="col">
Gauge
<div id="gauge"></div>
</div>
</div>
</div>
<script>
function generateChart(bindto, columns, type) {
return c3.generate({
bindto: bindto,
data: {
columns: columns,
type: type
},
size: { height: 200 }
});
}
var line = generateChart('#line', [ ['data1', 50, 20, 10, 40, 15, 25] ], 'line');
var spline = generateChart('#spline', [ ['data1', 50, 20, 10, 40, 15, 25] ], 'spline');
var step = generateChart('#step', [ ['data1', 50, 20, 10, 40, 15, 25] ], 'step');
var area = generateChart('#area', [ ['data1', 50, 20, 10, 40, 15, 25] ], 'area');
var area_spline = generateChart('#area-spline', [ ['data1', 50, 20, 10, 40, 15, 25] ], 'area-spline');
var area_step = generateChart('#area-step', [ ['data1', 50, 20, 10, 40, 15, 25] ], 'area-step');
var bar = generateChart('#bar', [ ['data1', 50, 20, 10, 40, 15, 25] ], 'bar');
var scatter = generateChart('#scatter', [ ['data1', 50, 20, 10, 40, 15, 25]] , 'scatter');
var pie = generateChart('#pie', [ ['data1', 50], ['data2', 20], ['data3', 10] ], 'pie');
var donut = generateChart('#donut', [ ['data1', 50], ['data2', 20], ['data3', 10] ], 'donut');
var gauge = generateChart('#gauge', [ ['data1', 50] ], 'gauge');
</script>
</body>
</html>
I’m still amazed by the simplicity of use and the power of this library. You can find the code for this lesson (and all other lessons) in my GitHub repo.
See you next time!
Next lesson: Learning C3.js – Lesson 3 – Line Charts.
Be First to Comment