hiorws/app.py

## app.py
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)

## index.html
<!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>

## main.css
* {
    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;
}

## main.js
$(document).ready(function() {
	$(chart_id).highcharts({
		chart: chart,
		title: title,
		xAxis: xAxis,
		yAxis: yAxis,
		series: series
	});
});
	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
	});
	});