I'm in the process of creating a Flask application, for the charting element I want to use Highcharts, I've managed to get one chart to display on a webpage but as soon as I try to display multiple charts only one renders.
I have tried a number of things to start, changing variable names, checked line by line code to see if there is an issue with one chart. Commented out one chart then the other to make sure they both work. Finally I have inspected the script in Chrome to see what is returned, everything looks fine.
I believe the issue is in my variable declaration in my script element. If I leave it as chart_id for both I think the first chart is being overwritten, however if I change the var to chart_id1 and chart_id2, neither chart returns?
I have tried to label all the variables under "div id={{ chart1ID|safe }}" as chart1_id, series1 etc ....and all the variables under "id={{ chart2ID|safe }}" as 2. When I inspect the code in Chrome everything looks to be returning correctly but no chart renders.
.../static/main.js
$(document).ready(function() {
$(chart1_id).highcharts({
chart1: chart1,
title1: title1,
xAxis1: xAxis1,
yAxis1: yAxis1,
series1: series1
})
});
$(document).ready(function() {
$(chart2_id).highcharts({
chart2: chart2,
title2: title2,
xAxis2: xAxis2,
yAxis2: yAxis2,
series2: series2
})});
HTML
..../templates/index.html
<body>
<div id={{ chart1ID|safe }} class="chart1" style="height: 500px; width: 500px">
<script>
var chart_id = {{ chart1ID|safe }}
var series = {{ series1|safe }}
var title = {{ title1|safe }}
var xAxis = {{ xAxis1|safe }}
var yAxis = {{ yAxis1|safe }}
var chart = {{ chart1|safe }}
</script>
</div>
<br>
<P>***********************************************************************************</P>
<div id={{ chart2ID|safe }} class="chart2" style="height: 500px; width: 500px">
<script>
var chart_id = {{ chart2ID|safe }}
var series = {{ series2|safe }}
var title = {{ title2|safe }}
var xAxis = {{ xAxis2|safe }}
var yAxis = {{ yAxis2|safe }}
var chart = {{ chart2|safe }}
</script>
</div>
<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/main.js"></script>
</body>
Python
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
@app.route('/index')
def index(chart1ID = 'chart1_ID', chart1_type = 'line', chart1_height = 500, chart2ID = 'chart2_ID', chart2_type = 'line', chart2_height = 500):
chart1 = {"renderTo": chart1ID, "type": chart1_type, "height": chart1_height,}
series1 = [{"name": 'Label1', "data": [1,2,3]}, {"name": 'Label2', "data": [9, 10, 11]}]
title1 = {"text": 'Chart 1 Title'}
xAxis1 = {"categories": ['xAxis Data1', 'xAxis Data2', 'xAxis Data3']}
yAxis1 = {"title": {"text": 'yAxis Label'}}
chart2 = {"renderTo": chart2ID, "type": chart2_type, "height": chart2_height,}
series2 = [{"name": 'Label1', "data": [1,2,3]}, {"name": 'Label2', "data": [14, 15, 20]}]
title2 = {"text": 'Second Chart Title'}
xAxis2 = {"categories": ['xAxis Data1', 'xAxis Data2', 'xAxis Data3']}
yAxis2 = {"title": {"text": 'yAxis Label'}}
return render_template('index.html',
chart1ID=chart1ID, chart1=chart1, series1=series1, title1=title1, xAxis1=xAxis1, yAxis1=yAxis1,
chart2ID=chart2ID, chart2=chart2, series2=series2, title2=title2, xAxis2=xAxis2, yAxis2=yAxis2)
if __name__ == "__main__":
app.run(debug = True)
I can't see the wood for the trees with this at the moment, I imagine it is something basic I am overlooking. This is all the code I am working with at the moment, I removed it from a larger application to make it clearer when posting the question.
Thanks