Skip to content

Instantly share code, notes, and snippets.

@vgoklani
Last active December 19, 2022 09:13
Show Gist options
  • Save vgoklani/5347161 to your computer and use it in GitHub Desktop.
Save vgoklani/5347161 to your computer and use it in GitHub Desktop.
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
});
});
@nbalas1969
Copy link

Chart is not getting loaded as mentioned above. Would a JS file loading from external links provided is being blocked? Is there a workaround to fix if js or css files mentioned can be handled correctly?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment