JSFiddle - React, Tailwind, and code Playground

by Hyacinthe Hamon

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://www.loly.com.au/ebp/data.json"></script>
<div id="chart"></div>

JavaScript

var secondData =  [
                {name: 'www.site1.com', upload: 200, download: 200, total: 400},
                {name: 'www.site2.com', upload: 100, download: 300, total: 400},
                {name: 'www.site3.com', upload: 300, download: 200, total: 500},
                {name: 'www.site4.com', upload: 400, download: 100, total: 500},
            ];

var chart = c3.generate({
    bindto: '#chart',
    data: {
        json: {
            data1: [30, 20, 50, 40, 60, 50],
            data2: [200, 130, 90, 240, 130, 220],
            data3: [300, 200, 160, 400, 250, 250]
        },
        type: 'bar'
    }
});

setTimeout(function () {
    chart = c3.generate({
        data: {
            json: secondData,
            keys: {
//                x: 'name', // it's possible to specify 'x' when category axis
                value: ['upload', 'download'],
            }
        },
        axis: {
            x: {
//                type: 'category'
            }
        },
    });
}, 5000);

setTimeout(function () {
    chart.load({
        url: "https://www.loly.com.au/ebp/data.json",
        mineType: 'json'
    });
}, 5000);