1

I'm trying to render an interactive Pygal charts inside a Jupyter Notebook without success. I'm not looking for the image static version solution, which works nicely, but for the one with interactive tooltips.

This problem has been addressed previously:

But unfortunately no one is experiencing my problem: implementing the solution provided in those links, Jupyter, seems not able to render the chart properly, but instead the output is a really long string. No error is produced.

What am i missing?

StefanoB
  • 11
  • 4
  • Well that's a headscratcher. What versions of pygal and jupyter are you using? And are you using jupyter notebooks or lab? – mostlyoxygen Nov 01 '18 at 18:47
  • I'm using Python 2.7.15 (this is from sys.version in Jupyter) and Jupyter 4.4.0 (notebooks). You are right it is a real headscratcher, i've been trying different settings but no luck so far... – StefanoB Nov 04 '18 at 13:00

1 Answers1

1

I won't pretend to understand why, but switching to Unicode strings fixes the problem. This may be why few others are experiencing the problem: in Python 3 all strings are Unicode by default.

You'll need to declare your template as a Unicode literal by prefixing the string with a u. Then tell pygal to return Unicode when rendering the chart by passing is_unicode=True as an argument to the render function.

An example:

from IPython.display import HTML
import pygal

html_pygal = u"""
    <!DOCTYPE html>
    <html>
        <head>
            <script type="text/javascript" src="http://kozea.github.com/pygal.js/javascripts/svg.jquery.js"></script>
            <script type="text/javascript" src="http://kozea.github.com/pygal.js/javascripts/pygal-tooltips.js"></script>
        </head>
        <body><figure>{pygal_render}</figure></body>
    </html>
"""

line_chart = pygal.Line()
line_chart.title = "Browser usage evolution (in %)"
line_chart.x_labels = map(str, range(2002, 2013))
line_chart.add("Firefox", [None, None, 0, 16.6, 25, 31, 36.4, 45.5, 46.3, 42.8, 37.1])
line_chart.add("Chrome", [None, None, None, None, None, None, 0, 3.9, 10.8, 23.8, 35.3])
line_chart.add("IE", [85.8, 84.6, 84.7, 74.5, 66, 58.6, 54.7, 44.8, 36.2, 26.6, 20.1])
line_chart.add("Others", [14.2, 15.4, 15.3, 8.9, 9, 10.4, 8.9, 5.8, 6.7, 6.8, 7.5])
HTML(html_pygal.format(pygal_render=line_chart.render(is_unicode=True)))
mostlyoxygen
  • 981
  • 5
  • 14