.. _nbc3rst:

====================================
Javascript library in a notebook: c3
====================================


.. only:: html

    **Links:** :download:`notebook <nb_c3.ipynb>`, :downloadlink:`html <nb_c32html.html>`, :download:`PDF <nb_c3.pdf>`, :download:`python <nb_c3.py>`, :downloadlink:`slides <nb_c3.slides.html>`, :githublink:`GitHub|_doc/notebooks/nb_c3.ipynb|*`


The following cell should show a `c3.js <http://c3js.org/>`__ graph. The
results depends on the browser. It works fine on chrome.

.. code:: 

    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>`__.

.. code:: 

    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






.. raw:: html

    <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>
    <script>
    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);

     });

    </script>




Here is the code it produces:

.. code:: 

    print(jr.generate_html()[0])


.. parsed-literal::
    <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>


.. code:: 

    print(jr.generate_html()[1])


.. parsed-literal::
    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);
     });