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

**URL:** <https://discourse.jupyter.org/t/different-behavior-between-notebook-and-lab-with-ipython-display-html/2009>\
**Category:** JupyterLab\
**Tags:** how-to\
**Created:** [August 28, 2019, 4:01pm UTC](https://discourse.jupyter.org/t/different-behavior-between-notebook-and-lab-with-ipython-display-html/2009 "2019-08-28T16:01:12Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![khz\_dong](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/khz_dong/32/1040_2.png) [@khz\_dong](https://discourse.jupyter.org/u/khz_dong)\
**Post date:** [August 28, 2019, 4:01pm UTC](https://discourse.jupyter.org/t/different-behavior-between-notebook-and-lab-with-ipython-display-html/2009/1 "2019-08-28T16:01:12Z")

</div>

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](https://canada1.discourse-cdn.com/flex031/uploads/jupyter/original/2X/4/40c4fd8ba2aafbf5c7fb844af9ddb2937b524686.png)  
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~

---

<div class="post-metadata">

**Author:** ![fomightez](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/fomightez/32/495_2.png) [@fomightez](https://discourse.jupyter.org/u/fomightez)\
**Post date:** [August 28, 2019, 5:01pm UTC](https://discourse.jupyter.org/t/different-behavior-between-notebook-and-lab-with-ipython-display-html/2009/2 "2019-08-28T17:01:44Z")

</div>

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](https://github.com/fomightez/animated_matplotlib-binder) 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](http://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](https://meta.discourse.org/t/here-is-how-to-copy-and-paste-code-so-it-appears-as-code/81417/4), 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](https://pastebin.com/) or gist might be useful for sharing code in what might be a substantial amount.

---

<div class="post-metadata">

**Author:** ![jasongrout](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/jasongrout/32/371_2.png) [@jasongrout](https://discourse.jupyter.org/u/jasongrout)\
**Post date:** [August 28, 2019, 6:04pm UTC](https://discourse.jupyter.org/t/different-behavior-between-notebook-and-lab-with-ipython-display-html/2009/3 "2019-08-28T18:04:17Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![khz\_dong](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/khz_dong/32/1040_2.png) [@khz\_dong](https://discourse.jupyter.org/u/khz_dong)\
**Post date:** [August 29, 2019, 2:28am UTC](https://discourse.jupyter.org/t/different-behavior-between-notebook-and-lab-with-ipython-display-html/2009/4 "2019-08-29T02:28:10Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![khz\_dong](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/khz_dong/32/1040_2.png) [@khz\_dong](https://discourse.jupyter.org/u/khz_dong)\
**Post date:** [August 29, 2019, 2:31am UTC](https://discourse.jupyter.org/t/different-behavior-between-notebook-and-lab-with-ipython-display-html/2009/5 "2019-08-29T02:31:01Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jasongrout](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/jasongrout/32/371_2.png) [@jasongrout](https://discourse.jupyter.org/u/jasongrout)\
**Post date:** [August 29, 2019, 4:06am UTC](https://discourse.jupyter.org/t/different-behavior-between-notebook-and-lab-with-ipython-display-html/2009/6 "2019-08-29T04:06:36Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jasongrout](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/jasongrout/32/371_2.png) [@jasongrout](https://discourse.jupyter.org/u/jasongrout)\
**Post date:** [August 29, 2019, 4:07am UTC](https://discourse.jupyter.org/t/different-behavior-between-notebook-and-lab-with-ipython-display-html/2009/7 "2019-08-29T04:07:38Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![khz\_dong](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/khz_dong/32/1040_2.png) [@khz\_dong](https://discourse.jupyter.org/u/khz_dong)\
**Post date:** [August 29, 2019, 5:51am UTC](https://discourse.jupyter.org/t/different-behavior-between-notebook-and-lab-with-ipython-display-html/2009/8 "2019-08-29T05:51:48Z")

</div>

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

[https://jupyterlab.readthedocs.io/en/latest/developer/extension\_dev.html](https://jupyterlab.readthedocs.io/en/latest/developer/extension_dev.html)

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

---

<div class="post-metadata">

**Author:** ![khz\_dong](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/khz_dong/32/1040_2.png) [@khz\_dong](https://discourse.jupyter.org/u/khz_dong)\
**Post date:** [August 29, 2019, 6:01am UTC](https://discourse.jupyter.org/t/different-behavior-between-notebook-and-lab-with-ipython-display-html/2009/9 "2019-08-29T06:01:14Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jasongrout](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/jasongrout/32/371_2.png) [@jasongrout](https://discourse.jupyter.org/u/jasongrout)\
**Post date:** [August 29, 2019, 6:29am UTC](https://discourse.jupyter.org/t/different-behavior-between-notebook-and-lab-with-ipython-display-html/2009/10 "2019-08-29T06:29:27Z")

</div>

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](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.

---

<div class="post-metadata">

**Author:** ![khz\_dong](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/khz_dong/32/1040_2.png) [@khz\_dong](https://discourse.jupyter.org/u/khz_dong)\
**Post date:** [August 29, 2019, 9:27am UTC](https://discourse.jupyter.org/t/different-behavior-between-notebook-and-lab-with-ipython-display-html/2009/11 "2019-08-29T09:27:54Z")

</div>

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](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?