# ---
# jupyter:
#   jupytext:
#     text_representation:
#       extension: .py
#       format_name: light
#       format_version: '1.5'
#       jupytext_version: 1.14.4
#   kernelspec:
#     display_name: Python 3
#     language: python
#     name: python3
# ---

# # Javascript library in a notebook: c3
#
# The following cell should show a [c3.js](http://c3js.org/) 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](https://d3js.org/). See [C3JS - Cannot read property 'category10' of undefined](https://stackoverflow.com/questions/38344643/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])

print(jr.generate_html()[1])







StarcoderdataJupyterScriptsDedupFiltered