Javascript library in a notebook: c3

Links: notebook, html, PDF, python, slides, GitHub

The following cell should show a c3.js graph. The results depends on the browser. It works fine on chrome.

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

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

setTimeout(function () {
    chart.load({
        columns: [
            ['data3', 130, 150, 200, 300, 200, 100]
        ]
    });
}, 1500);

setTimeout(function () {
    chart.unload({
        ids: 'data1'
    });
}, 2000);

"""

The script does not use the latest version of d3.js. See C3JS - Cannot read property ‘category10’ of undefined.

from jyquickhelper import RenderJS
css = ["https://raw.githubusercontent.com/sdpython/jyquickhelper/master/src/jyquickhelper/js/c3/c3.min.css"]
jr = RenderJS(script, css=css, libs = [
                dict(path="https://raw.githubusercontent.com/sdpython/jyquickhelper/master/src/jyquickhelper/js/d3/d3.v5.min.js",
                     name="d3", exports="d3"),
                dict(path="https://raw.githubusercontent.com/sdpython/jyquickhelper/master/src/jyquickhelper/js/c3/c3.min.js",
                     name="c3", exports="c3", deps=["d3"])])
jr

Here is the code it produces:

print(jr.generate_html()[0])

<div id="M09825423ba1c47599810a61841d3aed2-css"><link rel="stylesheet" href="https://raw.githubusercontent.com/sdpython/jyquickhelper/master/src/jyquickhelper/js/c3/c3.min.css" type="text/css" /><div id="M09825423ba1c47599810a61841d3aed2" style="width:100%;height:100%;"></div></div>

print(jr.generate_html()[1])

require.config({
paths:{
'd3':'https://raw.githubusercontent.com/sdpython/jyquickhelper/master/src/jyquickhelper/js/d3/d3.v5.min',
'c3':'https://raw.githubusercontent.com/sdpython/jyquickhelper/master/src/jyquickhelper/js/c3/c3.min',
},
shim:{
'c3':{'deps':['d3'],'exports':'c3'},
'd3':{'exports':'d3'},
},
});
require(['d3','c3'], function(d3,c3) {
var chart = c3.generate({
    bindto: '#M09825423ba1c47599810a61841d3aed2',
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25]
        ]
    }
});
setTimeout(function () {
    chart.load({
        columns: [
            ['data1', 230, 190, 300, 500, 300, 400]
        ]
    });
}, 1000);
setTimeout(function () {
    chart.load({
        columns: [
            ['data3', 130, 150, 200, 300, 200, 100]
        ]
    });
}, 1500);
setTimeout(function () {
    chart.unload({
        ids: 'data1'
    });
}, 2000);
 });