import mermaid from 'https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.2.3/mermaid.esm.min.mjs'; mermaid.initialize({ startOnLoad: true });
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); });