python highcharts integration issue with loading script in Jupyter Notebook

[prasadrajacode]

I encounter this issue while integrating highcharts into my python application with https://github.com/highcharts-for-python/highcharts-core

Something went wrong with the Highcharts.js script. It should have been automatically loaded, but it did not load for over 3 seconds. Check your internet connection, and then if the problem persists please reach out for support.

This looks like an issue with loading the core scripts. Quick help or workaround would be highly appreciated.

[hcpchris]

Hi @prasadrajacode ! Sorry you're running into this issue. In general, that issue can happen for a number of reasons - including network connectivity issues between your environment and the Highcharts CDN that serves the Highcharts JS scripts. To better rule out / consider different potential causes, can you provide some more details? In particular, the following information would be helpful:

1. What version of Highcharts Core for Python are you using?
2. What version of Jupyter Notebook / Jupyter Labs are you using?
3. Is the issue happening in Jupyter Notebook or in Jupyter Labs?
4. If in Jupyter Notebook, are you using the notebook in the browser or in an IDE like VSCode?
5. If using it in VSCode, do you also have any Jupyter-related VSCode extensions installed / enabled?

These questions will help us determine what workarounds may be workable.

This issue is commonly reported by people using Jupyter Notebook inside of VSCode, particularly with various extensions installed (see #46 ). While a solve for this issue has not yet determined, a workaround that seems to work for most users encountering the problem is to disable the Jupyter Notebook-related VSCode extensions, and then to re-enable them. Also, if you could share which extensions you have installed / enabled, that will help us track down (and address) the root cause.

[prasadrajacode]

from highcharts_core.chart import Chart
from highcharts_core.options import HighchartsOptions
from highcharts_core.options.plot_options import PlotOptions
from highcharts_core.options.axes.x_axis import XAxis
from highcharts_core.options.axes.y_axis import YAxis
from highcharts_core.options.axes.accessibility import AxisAccessibility
from highcharts_core.options.axes.title import AxisTitle
from highcharts_core.options.title import Title
from highcharts_core.options.subtitle import Subtitle
from highcharts_core.options.legend import Legend
from highcharts_core.options.plot_options.series import SeriesOptions
from highcharts_core.options.series.area import LineSeries
from highcharts_core.options.series.labels import SeriesLabel
from highcharts_core.options.responsive import Responsive, ResponsiveRules, Condition
from highcharts_core.constants import EnforcedNull

chart_options = HighchartsOptions(
    title = Title(text = 'U.S Solar Employment Growth by Job Category, 2010-2020',
                  align = 'left'),
    subtitle = Subtitle(text = 'Source: <a href="https://irecusa.org/programs/solar-jobs-census/" target="_blank">IREC</a>',
                        align = 'left'),
    y_axis = YAxis(title = AxisTitle(text = 'Number of Employees')),
    x_axis = XAxis(
        accessibility = AxisAccessibility(range_description = 'Range: 2010 to 2020')
    ),
    legend = Legend(layout = 'vertical',
                    align = 'right',
                    vertical_align = 'middle'),
    plot_options = PlotOptions(series = SeriesOptions(point_start = 2010,
                                                      label = SeriesLabel(connector_allowed = False)))
)

series1 = LineSeries(name = 'Installation & Developers',
                     data = [43934, 48656, 65165, 81827, 112143, 142383, 171533, 165174, 155157, 161454, 154610])
series2 = LineSeries(name = 'Manufacturing',
                     data = [24916, 37941, 29742, 29851, 32490, 30282, 38121, 36885, 33726, 34243, 31050])
series3 = LineSeries(name = 'Sales & Distribution',
                     data = [11744, 30000, 16005, 19771, 20185, 24377, 32147, 30912, 29243, 29213, 25663])
series4 = LineSeries(name = 'Operations & Maintenance',
                     data = [EnforcedNull, EnforcedNull, EnforcedNull, EnforcedNull, EnforcedNull, EnforcedNull, EnforcedNull, EnforcedNull, 11164, 11218, 10077])
series5 = LineSeries(name = 'Other',
                     data = [21908, 5548, 8105, 11248, 8989, 11816, 18274, 17300, 13053, 11906, 10073])

chart_options.add_series(series1, series2, series3, series4, series5)

chart = Chart.from_options(chart_options)
chart.display()

[prasadrajacode]

What version of Highcharts Core for Python are you using? - python-highcharts 0.4.2
What version of Jupyter Notebook / Jupyter Labs are you using? -
IPython : 8.10.0
ipykernel : 6.19.2
ipywidgets : 7.6.5
jupyter_client : 7.3.4
jupyter_core : 5.2.0
jupyter_server : 1.23.4
jupyterlab : 3.5.3
nbclient : 0.5.13
nbconvert : 6.5.4
nbformat : 5.7.0
notebook : 6.5.2
qtconsole : 5.4.0
traitlets : 5.7.1
Is the issue happening in Jupyter Notebook or in Jupyter Labs? Jupyter Notebook
If in Jupyter Notebook, are you using the notebook in the browser or in an IDE like VSCode? No
If using it in VSCode, do you also have any Jupyter-related VSCode extensions installed / enabled? No

[hcpchris]

Thanks, @prasadrajacode ! One question for clarification, I see in your answer that you are using python-highcharts 0.4.2, which is a different library altogether.

Highcharts Core for Python is highcharts-core and can be installed by using:

$ pip install highcharts-core

Do you have Highcharts Core for Python installed and if so, which version?

[prasadrajacode]

Thanks a lot Chris, Actually the am using highcharts-core 1.3.7. I tried this morning as well but ended up with same error with the above code snippet. Thanks for your time.

[hcpchris]

Thanks, @prasadrajacode . In that case, three further suggestions to help diagnose / troubleshoot this:

1. When calling chart.display() you can supply two arguments retries and interval to adjust how much time the code waits to render the chart. retries is the number of times the code re-attempts the rendering (defaults to 3, I believe), while interval is the time that it waits between each attempt (defaults to 1000 milliseconds, or 1 second). I would recommend increasing the number of retries to 10 or 15 to see if the issue is a network connectivity issue. Doing this will make Highcharts for Python re-attempt to render the chart, giving the scripts a chance to load into your environment.
2. Can you open the notebook in Jupyter Lab and try to see if the same behavior happens there? You can open Jupyter Lab by calling jupyter-lab from the command line, and then open the same notebook file within Jupyter Lab.
3. If the chart does not render in either of those situations, then in the Jupyter Notebook that appears, can you share a screenshot of the browser console's "sources" view? In Google Chrome, you can access that by right clicking on your notebook, selecting "Inspect", and then in the window/panel that opens, clicking on "Sources". You should see a set of sources coming from highcharts.com, which if you could expand that folder, that would be helpful.

[hcpchris]

Hi @prasadrajacode - Just a quick update on this front, there's some possibility (not yet certainty, but at least possibility) that the problem you are experiencing is tied to Jupyter Notebook's usage of RequireJS, which causes certain conflicts with our rendering (see #66 for an example). While I'm not 100% certain that this is the root cause of the specific issue you are experiencing, it is definitely one of the causes for this similar behavior.

I've created a PR #112 that contains a fix for the RequireJS conflict, and it will be released along with our next minor release (v.1.4.0) which is currently planned for the week of October 2nd. If time allows, I'll try to do a patch upgrade before 1.4.0 that rolls this fix out before then. In either case, I'll leave this issue open until either a) we identify the root cause of the issue you are having and resolve it, b) you confirm that it's resolved after the RequireJS fix gets released, or c) some reasonable amount of time has passed since the RequireJS fix without you (or anyone else) reporting the issue as re-occurring.

[hcpchris]

Hi @prasadrajacode : I just released v.1.4.0 a few minutes ago, and this release does include a bugfix for #66 . That is the issue that addressing one of the root causes that produces the behavior that you were seeing. As outlined in #46 , there are other issues that may generate this odd behavior. I'd appreciate if you could upgrade to the latest version and let me know if you are still encountering this issue - with luck, we can close this specific issue once you confirm the bugfix resolved the problem for you.