Learning C3.js – Lesson 2 – Chart Types

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.

See you next time!