mljar/bloxs

Graph line does not show up

alanjones2 opened this issue · 12 comments

The bloxs examples work fine on Colab but when I transfer the same code to my local machine the charts do not show up. The block appears with the text in it but the graph is missing. I've tried with Jupyter Notebook, Jupyter Lab and VSCode all with the same result. I'm using Anaconda Python 3.9.7

Screenshot 2022-04-05 171301
.

Do you have internet connection on machine running Jupyter Notebook? The chart library is served with CDN.

Yes, I do but you are right, it is a problem fetching charts.js

image

This seems to be suggesting that it succeeds and then fails.

If I point my browser directly at charts.min.js it loads, so I don't really know what is going on here. I'll take another look later.

I've looked at it in Chrome now and it seems that charts.min.js is being loaded but it seems maybe it's slow

I'm seeing this as well - latest version installed into Miniconda.

@virtadpt thanks for confirming.

The solution might be to inject the chart.min.js file in <script> tag directly to ipynb file. I need to check.

I also can't see the line chart

@khuyentran1401 thanks for reporting. Are you running Jupyter Notebook locally?

I think it should be changed to inject the charts lib instead cdn link.

Yes. How can I change that?

@khuyentran1401 the code needs to be updated, here is the code that inject Chart.js CDN

bloxs/bloxs/bloxs.py

Lines 139 to 147 in d809b8e

script_html = ""
if position == 0:
script_html = f"""
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js" integrity="sha512-QSkVNOCYLtj73J4hbmVoOV6KVZuMluZlioC+trLpewV8qMjsWqlIQvkn1KGX2StWvPMdWGBqim1xlC8krl1EKQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
"""
# need to figure out the way for offline serving ... ????
# <script src="{self.path}/chart.3.7.1.min.js"></script>
script_html += f"""

and the chart.js file is already in the repo. I will try to fix that right now, please give me some time.

That sounds great. Thank you!

I've created a StackOverflow question for this issue https://stackoverflow.com/questions/73124130/use-chart-js-in-jupyter-notebook-throws-uncaught-referenceerror-chart-is-not-d - I hope I will get som tips how to solve this issue. Sorry for problems

It should be working now :) I've released the version 1.0.2.

Peek 2022-07-27 16-32