Skip to content

Instantly share code, notes, and snippets.

@vgoklani

vgoklani/app.py

Last active May 6, 2021
Embed
What would you like to do?
Using Flask to output Python data to High Charts
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)
<!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>
* {
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;
}
$(document).ready(function() {
$(chart_id).highcharts({
chart: chart,
title: title,
xAxis: xAxis,
yAxis: yAxis,
series: series
});
});
@AlexFrazer

This comment has been minimized.

Copy link

@AlexFrazer AlexFrazer commented Mar 25, 2014

Nice! This is very helpful

@kimthostrup

This comment has been minimized.

Copy link

@kimthostrup kimthostrup commented May 13, 2014

I agree with @DarkCrowz here, really helpful.
Could you be so kind to show a updated version, where data (json) is being fetched from a url ?

Thanks in advance.
/Kim

@rohanil

This comment has been minimized.

Copy link

@rohanil rohanil commented Jan 23, 2015

i am not getting anything on screen when i run this code.. do i need to do anything else related to highcharts? sorry i am newbie for highcharts..basically i do not understand from where it is pulling data to graph..
what is expected output of this ?

@linzhi

This comment has been minimized.

Copy link

@linzhi linzhi commented Mar 8, 2015

i am not getting anything on screen when i run this code......too!!!

@cgelman

This comment has been minimized.

Copy link

@cgelman cgelman commented Sep 15, 2015

Thanks for this example! I was able to get this to run by putting files in various subfolders:
/app.py
/static/main.css
/static/js/main.js
/templates/index.html

Then run with:
python app.py

Open in browser:
http://localhost:8080

@rayeesnp

This comment has been minimized.

Copy link

@rayeesnp rayeesnp commented Oct 23, 2015

Its really nice, any idea how to add hyperlink on mouse click ?

@ghost

This comment has been minimized.

Copy link

@ghost ghost commented Nov 14, 2015

Nice, thank you

@gil-cano

This comment has been minimized.

Copy link

@gil-cano gil-cano commented Feb 23, 2016

Very helpful! Thanks!

@saitam1

This comment has been minimized.

Copy link

@saitam1 saitam1 commented Nov 5, 2016

When I am doing this, my axes are swapped. Do anybody know why?

@bburwell

This comment has been minimized.

Copy link

@bburwell bburwell commented Nov 23, 2016

Dumb question what does |safe do - or can someone post a noob link? get a chart draw with it - nothing when i remove all |safe comments. Thanks.

@vivektiwari660

This comment has been minimized.

Copy link

@vivektiwari660 vivektiwari660 commented Jan 9, 2017

How to remove the Highchart.com link from Chart.

@Bibichan1985

This comment has been minimized.

Copy link

@Bibichan1985 Bibichan1985 commented Jan 26, 2017

Can anyone share on how to display multiple charts on one html?

@sameershewakram

This comment has been minimized.

Copy link

@sameershewakram sameershewakram commented Mar 6, 2017

@Bibichan1985 did you get any solution for what you had asked in above comment?

@subbaraoganeshna

This comment has been minimized.

Copy link

@subbaraoganeshna subbaraoganeshna commented May 31, 2017

Hi,

I need one suggestion, i want to use hight charts which way is recommended. Sening graph data via template or using java script and form json for highcharts ?

thanks.

@roylkng

This comment has been minimized.

Copy link

@roylkng roylkng commented Jul 12, 2017

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.

@gamaria

This comment has been minimized.

Copy link

@gamaria gamaria commented Nov 6, 2017

I've tried, but when run in browser, it does not display graph, what's wrong?

@lowercase00

This comment has been minimized.

Copy link

@lowercase00 lowercase00 commented Dec 5, 2017

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

@kaveri123

This comment has been minimized.

Copy link

@kaveri123 kaveri123 commented Oct 24, 2018

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

@tosdanielle

This comment has been minimized.

Copy link

@tosdanielle tosdanielle commented Nov 16, 2018

@ 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.

@syazwan0913

This comment has been minimized.

Copy link

@syazwan0913 syazwan0913 commented Dec 27, 2018

How to use this for Highmaps?

@prrPigeon

This comment has been minimized.

Copy link

@prrPigeon prrPigeon commented Mar 15, 2020

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 of index.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="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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment