3

Following my python book, I made a bar graph using pygal. I rendered the information to an .svg file and opened it up in my web browser. My book says that the plot is interactive and will show you the value of each bar if you hover over it. However, whenever I hover my mouse over the graph, nothing happens. I am using a mac and google chrome to view the file.

Thanks!

RandomCoder
  • 2,071
  • 4
  • 12
  • 17

5 Answers5

2

I'm having the same problem on my Windows 10 machine. Both MS Edge and Google Chrome don't render the charts as interactive.

There seems to be something happening in between the script being executed in python and the final render. The reason I note this point is because the interactive examples on the pygal site work with no problem in both browsers but when the example script is pasted into python and executed, it doesn't work as it should.

Danny Osborne
  • 41
  • 4
  • Hi Me again, found a solution. See http://stackoverflow.com/questions/33629085/how-to-get-on-hover-animation-of-pygal-graphs-in-ipython-on-mac-osx. – Danny Osborne Apr 07 '16 at 08:01
1

Pygal 2.0 renders tooltips in a slightly different way than Pygal 1.9 did. If you're viewing the chart in a browser, you need to tell Pygal to render the tooltips for viewing in a browser. The force_uri_protocol parameter needs to be set to 'http'. The following code example shows how to do this:

hist = pygal.Bar()
hist.force_uri_protocol = 'http'

For example, here's a minimal program that should work:

import pygal

squares = [0, 1, 4, 9, 16, 25]

chart = pygal.Bar()
chart.force_uri_protocol = 'http'
chart.add('Squares', squares)
chart.render_to_file('squares.svg')
japhyr
  • 1,710
  • 2
  • 18
  • 24
0

For pygal to show tooltips in browser it is neccessary to load it into embed tag in html For example here is snippet i used to load tooltips in bar graph rendered using flask

<figure>
    <embed type="image/svg+xml" src="{{ stat|safe }}"></embed>
</figure>

and the javascript library needed to given inside head tag.

    <script type="text/javascript" src="http://kozea.github.com/pygal.js/latest/pygal-tooltips.min.js"></script>
aman5319
  • 662
  • 5
  • 16
0

Is this issue solved? The interaction is done using a script online with th href in the svg file. If you don t have an internet link it will not work. If you have solved this problem please let us know

user3762718
  • 623
  • 1
  • 6
  • 9
-1

You need to include <script type="text/javascript" src="/js/pygal-tooltips.js"></script> in your html.

lesingerouge
  • 1,160
  • 7
  • 14