1

It's really all in the question but I'm using python-highcharts to build something like this jsfiddle example for inclusion in a Python Flask app. I can get it to work in the Jupyter notebook from where I can save it to an html file or export it as an iframe or div code block. But I can't get any of these to work in the flask html page. The inclusion block in the flask page looks like:

<p>
{% if result != None %}
<div id="my-chart"></div>
<script type="text/javascript">
  {{result|safe}}
</script>
{% endif %}
</p>

and the relevant header parts:

<script src="//code.highcharts.com/stock/highstock.js"></script>
<script src="//code.highcharts.com/highcharts-more.js"></script>
<script src="//code.highcharts.com/modules/exporting.js"></script>

I've managed to get it working with pandas-highcharts but in this way I can't send tooltip formatting javascript functions via the dict-to-json-to-browser path... so a solution to either issue would be great.

J.

DrJMcAuliffe
  • 348
  • 4
  • 15
  • Ok, so what doesn't work for you? What do you have in `result` and what is generated in HTML? – Paweł Fus Apr 04 '16 at 08:32
  • @PawełFus The issue is not with the highcharts library but rather with the python interfaces I'm using. If I use pandas-highcharts I can neatly send a – DrJMcAuliffe Apr 04 '16 at 10:05

1 Answers1

0

First off:

Writing JS functions in the HTML can (almost) always be prevented!

One of the first principles you should stick to is to separate your static files. More on that here.

You should only pass the variable into your script using Jinja2/DjangoTemplatingLanguage tags like this, and write all your javascript functionality in your separate .js file, which is then imported along with other scripts, by your example:

<script src="//code.highcharts.com/stock/highstock.js"></script>
<script src="//code.highcharts.com/highcharts-more.js"></script>
<script src="//code.highcharts.com/modules/exporting.js"></script>
<script src="{{ static_url }}/js/my-highstock-project.js"></script>

This way you have nice code separation and it is also (somewhat) more safe.

Which leads us to the problem at hand; importing...

So secondly: HighCharts needs jQuery to be implemented before it can work. That is probably your problem.

To import jQuery include this to your header:

<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
Community
  • 1
  • 1
David Lipnik
  • 87
  • 7