Skip to content

Instantly share code, notes, and snippets.

@vgoklani vgoklani/app.py
Last active Oct 8, 2019

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 commented Mar 25, 2014

Nice! This is very helpful

@kimthostrup

This comment has been minimized.

Copy link

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 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 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 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 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 commented Nov 14, 2015

Nice, thank you

@gil-cano

This comment has been minimized.

Copy link

gil-cano commented Feb 23, 2016

Very helpful! Thanks!

@saitam1

This comment has been minimized.

Copy link

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 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 commented Jan 9, 2017

How to remove the Highchart.com link from Chart.

@Bibichan1985

This comment has been minimized.

Copy link

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 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 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 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 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 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 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 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 commented Dec 27, 2018

How to use this for Highmaps?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.