Highchart graphs not displaying

[okhalfa]

Hello,

I've tried to reproduce the Monthly average temperature graph from the HC Notebook but no chart is displayed in the jupyter notebook (tried on both jupyterlab and notebook).

Could you please have a look?

Thanks!

I'm using notebook 6.4.3, jupyterlab 3.1.7, brython 3.6.2, python 3.6.5

Also, this part from the HC notebook:

from brythonmagic import load_brython_dev
load_brython_dev() 

doesn't work as it seems it has been commented in the last version of brythonmagic.py. The error message is: cannot import name 'load_brython_dev'

Input

%load_ext brythonmagic

from brythonmagic import load_js_lib
load_js_lib("https://cdnjs.cloudflare.com/ajax/libs/highcharts/5.0.7/highcharts.js")

html = """<div id="hc_ex1" style="width: 700px; height: 300px;"></div>"""

%%brython -h html -p
from browser import window

Highcharts = window.Highcharts

hc = Highcharts.Chart.new

config = {
    'chart':{
        'renderTo': 'hc_ex1'
    },
    'title': {
        'text': 'Monthly Average Temperature',
        'x': -20 #center
    },
    'subtitle': {
        'text': 'Source: WorldClimate.com',
        'x': -20
    },
    'xAxis': {
        'categories': ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    'yAxis': {
        'title': {
            'text': 'Temperature (°C)'
        },
        'plotLines': [{
            'value': 0,
            'width': 1,
            'color': '#808080'
        }]
    },
    'tooltip': {
        'valueSuffix': '°C'
    },
    'legend': {
        'layout': 'vertical',
        'align': 'right',
        'verticalAlign': 'middle',
        'borderWidth': 0
    },
    'series': [{
        'name': 'Tokyo',
        'data': [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
    }]
}

hc(config)

Output: (only script but not plot)

  <script id="353830" type="text/python">
from browser import window

Highcharts = window.Highcharts

hc = Highcharts.Chart.new

config = {
    'chart':{
        'renderTo': 'hc_ex1'
    },
    'title': {
        'text': 'Monthly Average Temperature',
        'x': -20 #center
    },
    'subtitle': {
        'text': 'Source: WorldClimate.com',
        'x': -20
    },
    'xAxis': {
        'categories': ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    'yAxis': {
        'title': {
            'text': 'Temperature (°C)'
        },
        'plotLines': [{
            'value': 0,
            'width': 1,
            'color': '#808080'
        }]
    },
    'tooltip': {
        'valueSuffix': '°C'
    },
    'legend': {
        'layout': 'vertical',
        'align': 'right',
        'verticalAlign': 'middle',
        'borderWidth': 0
    },
    'series': [{
        'name': 'Tokyo',
        'data': [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
    }]
}

hc(config)

  </script>
  <div id="brython_container_353830"><div id="hc_ex1" style="width: 700px; height: 300px;"></div></div>
  <script type="text/javascript">brython({debug:1, static_stdlib_import: false, ipy_id: ["353830"]});</script>