Menu
Im currently using Jupyter Notebooks and I would like to render SVG's via HTML without saving them as a local SVG and display them afterwards.
Im using this code:
%matplotlib inline
from IPython.display import SVG, HTML
html_pygal = """
<!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>
"""
import pygal
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()))
Here is the problem: While Jupyter manages to render the SVG file it also displays a Javascript error which looks like follows:
b'\n
*SVG picture comes here
' Javascript error adding output! SyntaxError: illegal character See your browser Javascript console for more details.
When checking the browser console this is the error message:
loaded custom.js 2017-04-20_analytics.ipynb:121:15
Default extension for cell metadata editing loaded. main.min.js:24261:9
Raw Cell Format toolbar preset loaded. main.min.js:24347:5
Slideshow extension for metadata editing loaded. main.min.js:24395:9
actions jupyter-notebook:find-and-replace does not exist, still binding it in case it will be defined later... main.min.js:29204:17
load_extensions Arguments { 0: "jupyter-js-widgets/extension", 2 weitere… } main.min.js:12231:9
Session: kernel_created (b51341fe-f4d8-42be-a9b8-46ac47476a99) main.min.js:23547:13
Starting WebSockets: ws://localhost:8888/api/kernels/1852f19e-52f2-4ce2-91d8-f6276ea95b40 main.min.js:22833:9
Loading extension: jupyter-js-widgets/extension main.min.js:12208:21
Kernel: kernel_connected (1852f19e-52f2-4ce2-91d8-f6276ea95b40) main.min.js:22480:13
Kernel: kernel_ready (1852f19e-52f2-4ce2-91d8-f6276ea95b40) main.min.js:22480:13
loaded widgets extension.js:134:14
Widget backend and frontend versions are compatible extension.js:32280:22
SyntaxError: illegal character
Stack-Trace:
globalEval@http://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:87:4231
domManip@http://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:88:21389
append@http://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:88:18980
OutputArea.prototype._safe_append@http://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:20345:13
OutputArea.prototype.append_execute_result@http://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:20372:9
OutputArea.prototype.append_output@http://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:20218:17
OutputArea.prototype.handle_output@http://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:20165:9
output@http://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:21820:21
Kernel.prototype._handle_output_message@http://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:23440:13
i@http://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:87:5486
Kernel.prototype._handle_iopub_message@http://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:23467:20
Kernel.prototype._finish_ws_message@http://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:23304:24
Kernel.prototype._handle_ws_message/this._msg_queue<@http://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:23295:39
main.min.js:20347:13
SyntaxError: illegal character
Stack-Trace:
globalEval@http://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:87:4231
domManip@http://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:88:21389
append@http://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:88:18980
OutputArea.prototype._safe_append@http://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:20345:13
OutputArea.prototype.append_execute_result@http://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:20372:9
OutputArea.prototype.append_output@http://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:20218:17
OutputArea.prototype.handle_output@http://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:20165:9
output@http://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:21820:21
Kernel.prototype._handle_output_message@http://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:23440:13
i@http://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:87:5486
Kernel.prototype._handle_iopub_message@http://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:23467:20
Kernel.prototype._finish_ws_message@http://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:23304:24
Kernel.prototype._handle_ws_message/this._msg_queue<@http://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:23295:39
My Python Version: 3.6.0 OS: Windows 7 64 Bit Pygal Version: 2.3.1
Note: my current workaround which works but is not the solution which I'm looking for is to create a local SVG and then display it with the library import: from IPython.display import display
486
My solution:
import pygal
from IPython.display import SVG, display
bar_chart = pygal.Bar()
bar_chart.add('Fibonacci', [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55])
display(SVG(bar_chart.render(disable_xml_declaration=True)))
Even better:
bar_chart = pygal.Bar()
bar_chart.add('Fibonacci', [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55])
display({'image/svg+xml': bar_chart.render()}, raw=True)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
