kimthostrup · May 13, 2014 12:22
diff --git a/app.py b/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)
diff --git a/index.html b/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>
diff --git a/main.css b/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;
 }
diff --git a/main.js b/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
	});
	});