Last active
December 19, 2022 09:13
-
-
Save vgoklani/5347161 to your computer and use it in GitHub Desktop.
Using Flask to output Python data to High Charts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| from flask import Flask, render_template | |
| app = Flask(__name__) | |
| @app.route('/') | |
| @app.route('/index') | |
| def index(chartID = 'chart_ID', chart_type = 'bar', chart_height = 350): | |
| chart = {"renderTo": chartID, "type": chart_type, "height": chart_height,} | |
| series = [{"name": 'Label1', "data": [1,2,3]}, {"name": 'Label2', "data": [4, 5, 6]}] | |
| title = {"text": 'My Title'} | |
| xAxis = {"categories": ['xAxis Data1', 'xAxis Data2', 'xAxis Data3']} | |
| yAxis = {"title": {"text": 'yAxis Label'}} | |
| return render_template('index.html', chartID=chartID, chart=chart, series=series, title=title, xAxis=xAxis, yAxis=yAxis) | |
| if __name__ == "__main__": | |
| app.run(debug = True, host='0.0.0.0', port=8080, passthrough_errors=True) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="description" content=""> | |
| <meta name="keywords" content=""> | |
| <meta name="author" content=""> | |
| <meta charset="utf-8"> | |
| <!-- <link href="../static/css/main.css" rel="stylesheet" type="text/css" /> --> | |
| <!-- SUPPORT FOR IE6-8 OF HTML5 ELEMENTS --> | |
| <!--[if lt IE 9]> | |
| <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> | |
| <![endif]--> | |
| <!-- <link rel="shortcut icon" href="{{ url_for('static', filename='ico/favicon.ico') }}"> --> | |
| {% block head %} | |
| <title>{% block title %} Title!{% endblock %}</title> | |
| {% endblock %} | |
| </head> | |
| <body> | |
| <div id={{ chartID|safe }} class="chart" style="height: 100px; width: 500px"></div> | |
| <script> | |
| var chart_id = {{ chartID|safe }} | |
| var series = {{ series|safe }} | |
| var title = {{ title|safe }} | |
| var xAxis = {{ xAxis|safe }} | |
| var yAxis = {{ yAxis|safe }} | |
| var chart = {{ chart|safe }} | |
| </script> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |
| <script src="http://code.highcharts.com/highcharts.js"></script> | |
| <script src="../static/js/main.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| margin: 20; | |
| padding: 100; | |
| } | |
| header { | |
| background-color:rgba(33, 33, 33, 0.9); | |
| color:#ffffff; | |
| display:block; | |
| font: 14px/1.3 Arial,sans-serif; | |
| height:50px; | |
| position:relative; | |
| } | |
| header h2{ | |
| font-size: 22px; | |
| margin: 0px auto; | |
| padding: 10px 0; | |
| width: 80%; | |
| text-align: center; | |
| } | |
| header a, a:visited { | |
| text-decoration:none; | |
| color:#fcfcfc; | |
| } | |
| body { | |
| background:url("background.jpg") no-repeat scroll top center transparent; | |
| } | |
| .actions, .chart { | |
| margin: 15px auto; | |
| width: 34px; | |
| } | |
| button { | |
| background: none repeat scroll 0 0 #E3E3E3; | |
| border: 1px solid #BBBBBB; | |
| border-radius: 3px 3px 3px 3px; | |
| box-shadow: 0 0 1px 1px #F6F6F6 inset; | |
| color: #333333; | |
| font: bold 12px; | |
| margin: 0 5px; | |
| padding: 8px 0 9px; | |
| text-align: center; | |
| text-shadow: 0 1px 0 #FFFFFF; | |
| width: 150px; | |
| } | |
| button:hover { | |
| background: none repeat scroll 0 0 #D9D9D9; | |
| box-shadow: 0 0 1px 1px #EAEAEA inset; | |
| color: #222222; | |
| cursor: pointer; | |
| } | |
| button:active { | |
| background: none repeat scroll 0 0 #D0D0D0; | |
| box-shadow: 0 0 1px 1px #E3E3E3 inset; | |
| color: #000000; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).ready(function() { | |
| $(chart_id).highcharts({ | |
| chart: chart, | |
| title: title, | |
| xAxis: xAxis, | |
| yAxis: yAxis, | |
| series: series | |
| }); | |
| }); |
I've tried, but when run in browser, it does not display graph, what's wrong?
Also not showing anything here... any ideas?
(I've already organized templates and static folder)
UPDATE: for me it does not work in Chrome, but works with Safari
I can't see anything in the screen, I am a newbie. I have created folder structure according to @cgelman comment ,when I run I can't see anything at the same time I am not getting error also . Please any one tell me what might be the issue
@ ones who can't see the graph:
Once you follow the steps @cgelman described, be sure to update the javascript path in the index.html file <script src="../static/main.js"></script> instead of <script src="../static/js/main.js"></script>
Or else add the js folder to the structure.
How to use this for Highmaps?
About NO SHOWING GRAPH!!!,
there was two problems in my case:
- First , if you also already include bootstrap CDN, comment that
<script></script>block (bottom ofindex.html), and include that one which is provided in tutorial ( i leave<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity_no="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">in<head>tag). - Second is height in
<div id={{ chartID|safe }}></div>style, change height to maybe 400px, this works for me.
Python3.7/Flask==1.1.1.
Chart is not getting loaded as mentioned above. Would a JS file loading from external links provided is being blocked? Is there a workaround to fix if js or css files mentioned can be handled correctly?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi,
Can you also show a similar way for creating highmaps, as in world map or any maps. I don't want to use javascript thats the only constraint.