CODEWITHSUNDEEP
javascriptpythonherokuhighchartsflask
dimos
dimos

Reputation: 147

highcharts not showing on heroku using python flask app

i have created an html which visualizes some data using highcharts. When using this html on localhost i can successfully see my charts. But when i use it on heroku i do not get my charts. Any ideas?

<!DOCTYPE html>
<html>

<base href="https://www.highcharts.com" />

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<script src="/lib/jquery-1.7.2.js" type="text/javascript"></script>

<script type="text/javascript">

</head>
<body >

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<!--<div id="container" style="min-width: 310px; height: 0 auto; max-width: 600px; margin: 0 auto"></div>-->

<!--<div id="container2" style="min-width: 310px; height: 0 auto; max-width: 600px; margin: 0 auto"></div>-->

<div id="container6" class="text">
<p>info:about,category,location,website,founded</p>
</div>

<div id="container" class="chart">
	<p></p>
</div>
<div id="container2" class="chart">
	<p></p>
</div>
<div id="container3" class="chart">
	<p></p>
</div>
<div id="container4" class="chart">
	<p></p>
</div>
<div id="container5" class="chart">

</div>

<div id="container7" class="chart">
<p>post message,video,photo etc.</p>
</div>
</body>
</html>

i tried several solutions like copying the modules locally or impose https: insted of http: on the links. I suppose that the issue has to do about loading the highcharts .js but i cannot figure why

Upvotes: 0

Views: 214

Answers (1)

Mike Zavarello
Mike Zavarello

Reputation: 3554

A few things that I noticed and corrected:

  • Your code snippet did not have a starting <head> tag.
  • You had an unclosed instance of <script type="text/javascript"> right before your </head> tag. This was causing an Uncaught SyntaxError: Unexpected token < error.
  • I moved all of your script calls in between the <head> tags and gave the jQuery library an absolute URL (in order to get this to work in the snippet).

When you run the code snippet now, you'll see the expected text in the <p> tags. I don't see a chart, but I also don't see the code with the options to create them.

An edited version of your code snippet is below.

I hope this is helpful for you.

<!DOCTYPE html>
<html>

<head>
<base href="https://www.highcharts.com" />

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<!-- <script src="/lib/jquery-1.7.2.js" type="text/javascript"></script> -->
<script src="https://code.jquery.com/jquery-1.7.2.js" type="text/javascript"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>

</head>
<body >

<!--<div id="container" style="min-width: 310px; height: 0 auto; max-width: 600px; margin: 0 auto"></div>-->

<!--<div id="container2" style="min-width: 310px; height: 0 auto; max-width: 600px; margin: 0 auto"></div>-->

<div id="container6" class="text">
<p>info:about,category,location,website,founded</p>
</div>

<div id="container" class="chart">
	<p></p>
</div>
<div id="container2" class="chart">
	<p></p>
</div>
<div id="container3" class="chart">
	<p></p>
</div>
<div id="container4" class="chart">
	<p></p>
</div>
<div id="container5" class="chart">

</div>

<div id="container7" class="chart">
<p>post message,video,photo etc.</p>
</div>
</body>
</html>

Upvotes: 1

Related Questions