FayolChang
10/26/2017 - 8:13 AM

Using Flask to output Python data to High Charts

Using Flask to output Python data to High Charts

main.js
content_copyfile_download
$(document).ready(function() {
	$(chart_id).highcharts({
		chart: chart,
		title: title,
		xAxis: xAxis,
		yAxis: yAxis,
		series: series
	});
});
main.css
content_copyfile_download
* {
    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;
}
index.html
content_copyfile_download
<!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>
app.py
content_copyfile_download
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)