使用 Flask Chart.js 绘制实时数据

Question

I am sending some data to my Flask server from another application using HTTP requests. I need to plot and display the data on my webpage. The graph needs to update whenever new data comes in. The plot is a real-time plot. So far data transfer is working properly but I am unable to plot the data. This is my python code

@app.route('/', methods=["GET", "POST"])
def main():
   
return render_template('index.html')


@app.route('/data', methods=["GET", "POST"])
def data():
    # Using Static data
    #data = [time() * 1000, random() * 100]


    data = [request.json["time"],request.json["value"]]
    print(data)

    response = make_response(json.dumps(data))
    response.content_type = 'application/json'
    return response

Using data inside the app, the plot works but when I try to get data from server, it does not work.

The script used for plotting is given below

 <script> var chart; function requestData() { // Ajax call to get the Data from Flask var requests = $.get('/data'); var tm = requests.done(function (result) { var series = chart.series[0], shift = series.data.length > 20; // add the point chart.series[0].addPoint(result, true, shift); // call it again after one second setTimeout(requestData, 2000); }); } $(document).ready(function() { chart = new Highcharts.Chart({ chart: { renderTo: 'data-container', defaultSeriesType: 'spline', events: { load: requestData } }, title: { text: 'Live random data' }, xAxis: { type: 'datetime', tickPixelInterval: 150, maxZoom: 20 * 1000 }, yAxis: { minPadding: 0.2, maxPadding: 0.2, title: { text: 'Value', margin: 80 } }, series: [{ name: 'Random data', data: [] }] }); }); </script>

I keep getting the error "NoneType" object is not subscript-able. Any help would be much appreciated. Thanks in advance.

Answer 1

Try this:

@app.route('/data', methods=["GET", "POST"])
def data():
    data = [time() * 1000, random() * 100]
    response = make_response(json.dumps(data))
    response.content_type = 'application/json'
    return response

I use it in my app and it works.