La aplicación Flask a continuación hace llamadas Ajax indefinidamente a una función de índice de back-end que consulta una base de datos e inyecta el resultado en la plantilla.
Espero que, después de que finalice Ajax, los datos inyectados se actualizarán y, por lo tanto, se actualizará la trama, pero no es así.
¿Cómo actualizar Ajax de una manera que actualice los datos inyectados en 'index.html' (por lo tanto, actualizar el gráfico que consume esos datos)?
¡Aprecio tu ayuda!
Código HTML:
<div class="card-body"> <div class="chart-area"> <div id = 'load' class = 'chart' style = 'height:100%'></div> <!--This is where chart appears --> </div> </div>Código JQuery:
<script> $(document).ready(function(){ function ajaxCall(){ $.ajax({ async: false, type: 'POST', url: '/', dataType: 'json', contentType: 'application/json;charset=UTF-8', success: function (data) { ??? perhaps something here??? } }); } setInterval(ajaxCall, 2000); // repeatedly calls ajaxCall() var graphs = {{graphJSON | safe}}; // saves injected data to variable Plotly.plot('load',graphs,{}); // passes saved variable to Python function for plotting which then appears in div with 'load' id above. }); </script>Código de matraz:
from flask import render_template, Blueprint, from App.functions.reddit_streamer import AWS_RDB import json import plotly import plotly.express as px core = Blueprint('core', __name__) @core.route('/', methods = ['GET', 'POST']) def index(): db = AWS_RDB() df = db.query_half_hour() fig = px.line(df.loc[1:,:], x = 'date' , y = '# of comments') graphJSON = json.dumps(fig, cls = plotly.utils.PlotlyJSONEncoder) return render_template('index.html', graphJSON = graphJSON)Un ejemplo simple de consulta y visualización de datos para plotly a través de ajax a intervalos periódicos.
He creado otra ruta que proporciona los datos en formato JSON. Luego uso la API Fetch para consultar los datos, que luego se usan para actualizar el gráfico. También sería concebible una implementación con jQuery .
from flask import Flask from flask import make_response, render_template import json, random import pandas as pd import plotly import plotly.express as px app = Flask(__name__) @app.route('/') def index(): return render_template('index.html') @app.route('/data') def data(): df = pd.DataFrame({ 'Year': ['2012', '2014', '2016', '2018', '2020', '2022'], 'Amount': [random.randint(0, 10) for _ in range(6)], }) fig = px.line(df, x='Year', y='Amount') dat = json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder) resp = make_response(dat) resp.mimetype = 'application/json' return resp <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="chart" class="chart"></div> <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> <script type="text/javascript"> (() => { const update = () => { fetch('/data') .then(resp => resp.json()) .then(data => Plotly.react('chart', data, {})); }; update(); setInterval(update, 2000); })(); </script> </body> </html>