Different behavior between notebook and lab with ipython.display.html()

JupyterLab
1

I am recently moving to jupyter lab from jupyter notebook and some problem occured to me.
I am using a js lib to visualize my data and it seems to be not working with jupyter lab. The code is fine to display a graph on jupyter notebook. So i am wondering why. Here is the code.

from IPython.display import HTML
lgdstr = """
var axisData = """ + str(['2005-09-30','2005-12-31', '2006-06-30','2006-09-30', '2006-10-30',
 '2006-11-29','2006-12-31','2007-06-30','2007-09-30', '2007-12-31','2008-06-30', '2008-09-30', '2008-12-31','2009-03-31', '2009-06-30', '2009-09-28', '2009-09-30', '2009-12-31','2010-03-31', '2010-06-30',
 '2010-09-30','2010-10-14', '2010-12-31','2011-03-31','2011-06-30','2011-09-30','2011-12-31','2012-03-31',
 '2012-06-30','2012-09-30','2012-12-31','2013-03-31', '2013-06-30','2013-09-30','2013-12-31', '2014-03-31',
 '2014-06-30','2014-09-30','2014-12-31','2015-03-31', '2015-06-30', '2015-09-30','2015-12-31', '2016-03-15','2016-03-18', '2016-03-31',  '2016-06-30', '2016-09-30', '2016-12-31', '2017-03-31', '2017-06-30', '2017-08-31', '2017-09-04','2017-09-30', '2017-12-31', '2018-03-31', '2018-06-30','2018-09-30','2018-12-31',
 '2019-03-31', '2019-06-30']) + """;
var data = """ + str(['37.94','37.31','45.81', '45.81', '45.81','47.20','47.11','48.82', '47.99', '47.39', '47.09','45.48', '44.38',
 '44.24', '43.86','40.82', '40.84', '41.11','40.95', '41.10','41.11', '52.00','52.51', '52.51', '52.09','52.06',
 '51.95', '50.35','50.08', '50.13','49.35', '48.95', '49.34', '49.36', '49.47', '49.87', '48.72', '49.29', '48.81','48.90',
 '50.25', '62.05', '70.70', '73.16', '73.27','73.25','73.42','73.32', '73.42', '73.63', '74.04', '74.29','75.40','75.55',
 '76.06','76.28', '76.28', '76.37', '76.37', '76.42', '76.51']) + """;
var links = data.map(function (item, i) {
    return {
        source: i,
        target: i + 1
    };
});
links.pop();
option = {
    title: {
        text: '【浦发银行】前十大流通股东持股占比'
    },
    tooltip: {
        trigger: 'item'
    },
    xAxis: {
        type : 'category',
        boundaryGap : false,
        data : axisData
    },
    yAxis: {
        type : 'value'
    },
    series: [
        {
            type: 'line',
            layout: 'none',
            coordinateSystem: 'cartesian2d',
            symbolSize: 10,
            label: {
                normal: {
                    show: true
                }
            },
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [2, 5],
            data: data,
            links: links,
            lineStyle: {
                normal: {
                    color: '#2f4554'
                }
            }
        }
    ]
};
"""
headstr = """
<div id="showhere" style="width:800px; height:600px;"></div> 
<script> 
require.config({ paths:{ echarts: '//cdn.bootcss.com/echarts/3.2.3/echarts.min', } });
require(['echarts'],function(ec){
var myChart = ec.init(document.getElementById('showhere'));
"""

tailstr = """
myChart.setOption(option);
    });
</script>
"""
HTML(headstr + lgdstr + tailstr)

i have some screenshots

%E6%B7%B1%E5%BA%A6%E6%88%AA%E5%9B%BE_%E9%80%89%E6%8B%A9%E5%8C%BA%E5%9F%9F_20190829103711
深度截图_选择区域_20190829103711.png967×1186 55.1 KB

the upper one is how it looks in jupyter lab and the lower one is how it looks in jupyter notebook
Can I get some help~

2

I don’t know if a work around is appropriate for your particular case? Or if it is generally always possible to switch the interface style…

However, for using animations in Jupyter, I found for now the old classic interface works better generally (or at least be more flexible about what works), and so I’ll sometimes find myself switching back and forth in instances launched from MyBinder.org by changing the URL on the page to end. So probably your url ends in /lab? If you edit the URL to instead end in /tree you can get back the older classic notebook style interface and try your code there.

Future tip:
Pasting your code in between code blocks that begin with three backticks, the name of the language on a line, then your code block, and then another line with three backticks again is better way to go for posting code. Alternatively, a link to a pastebin or gist might be useful for sharing code in what might be a substantial amount.

3

Can you please paste your code block inside the triple backticks (or use the icon that looks like </>)? I think we’re missing some of it in the post formatting, in particular it looks like we’re missing the crucial parts to be able to help you or reproduce the issue.

4

Thanks for advice. I 've learned how to paste code and edited it.

I know how to switch between lab and notebook. I have tested it in jupyter notebook, the old interface and it worked. But when i try it in notebook opened in lab, it didn’t work. That confuses me.

5

Now you should be able to copy it easily from up above. I have tested it both side, the lab and the old version of it, jupyter notebook. One worked another didn’t.

6

The code above assumes that require is on the page. Jupyter notebook has it on the page, JupyterLab doesn’t use require. You’ll need to get that js on the page a different way. We’d suggest writing a simple JupyterLab extension.

7

You might also be able to get it on the page using javascript to add a script tag to the page. The recommended way to extend the frontend with new javascript code is to write a JupyterLab extension, though.

8

So I can just read the development reference of jupyterlab and get it down?

https://jupyterlab.readthedocs.io/en/latest/developer/extension_dev.html

Like following this guide and add require.js into my lab?

9

Or could you please point out which exact part should i follow that I might do it more efficiently?

10

I was thinking you’d write a page to get the library you are wanting on the page, not require (though perhaps it would work to get require on the page as well).

You can follow the extension tutorial at https://jupyterlab.readthedocs.io/en/stable/developer/extension_tutorial.html and stop after the first few steps when you have a minimal extension, and just use it to put js on the page instead.

Or you might be able to add a script tag to the page in a Javascript ipython display object.

11

I have done with this tutorial and the NASA pic is presenting on my lab.

My final goal is to run some python-enclosured js code in the notebook cell so it can render the right graph in the output like above. I read the following part of the reference. I guess I need to do some change to extend the notebook plugin?

https://jupyterlab.readthedocs.io/en/stable/developer/notebook.html

But this part extends a button. I still have no idea where I can put my js library so that I can call functions within that library. Sorry I am not really advanced in js. Could you give me some more hints?