Highcharts with Flask and Python: how to create interactive graph?

Question

I'm a new to Highcharts and know a little bit JavaScript. Do not ask why, but I got a task to create some web UI that uses Highcharts based on Python, that get data via Athena. I managed to create static graphs, but I need that this graph changes according to values that in the drop down list. All examples that I found till now explain how to implement it via JavaScript code and this code have the possible data is created already in this code.

In my case I get the data via the Python code. And I have no idea how to connect it to the examples that I found. Maybe I miss any small point or maybe I try to create something completely not correct?

I tried to use this example for interactive code How to set the highcharts interactive with select option

But I can't get how to connect my python code with data to this example :(

For the static graph I used this example https://pythonprogramming.net/adding-js-plugins-flask-highcharts-example/ and I have currently 3 files:

1. app.py
2. index.html
3. graph.js

app.py

from flask import Flask, render_template

app = Flask(__name__)

#here the code that connect to Athene
my_df = as_pandas(cursor)

@app.route('/')
@app.route('/index')
def graph(chartID = 'chart_ID', chart_type = 'line', chart_height = 500):

Here the code that created data_array from my_df

#example of data_array: [[2, 10], [3, 20], [4, 30]]
chart = {"renderTo": chartID, "type": chart_type, "height": chart_height,}
series = [{"name": 'Blabla1', "data": data_array1, "color":"#ff00ff", "yAxis":0},{"name": 'Blabla2', "data": data_array2, "yAxis":0}]
title = {"text": 'My Graph'}
xAxis = {"categories": [],"title": {"text": 'Weeks'}}
yAxis = {"title": {"text": 'Something'}}
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='127.0.0.1', port=5000, passthrough_errors=True)  

index.html

<div>
    Please Select!

    <select name='location' onchange="updateChart(this.value)">
            <option value="north" selected value="north">north</option>
            <option value="east">east</option>
    </select>

    <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>   
</div>

graph.js

$(document).ready(function() {
    $(chart_id).highcharts({
    chart: chart,
    title: title,
    xAxis: xAxis,
    yAxis: yAxis,
    series: series
   });
});

Maybe I don't need to use Python code at all and get data from Athena by other (which) way?

Thanks!