I am currently trying to plot a plotly bar chart that is generated in a background task, once the background task is completed, the graph values are emitted using flask socketio to my frontend html and JavaScript code.
Python Script:
from flask import Flask, render_template, request
import pandas as pd
from flask_executor import Executor
import plotly
import plotly.graph_objs as go
from flask_socketio import SocketIO, emit
import json
global test_val
app = Flask(__name__)
socketio = SocketIO(app)
def create_plot(feature_importance):
feature_importance=feature_importance.reset_index(drop=True)
feature_importance=feature_importance.iloc[0:5]
print(feature_importance)
data = [
go.Bar(
x=feature_importance['Age'], # assign x as the dataframe column 'x'
y=feature_importance['Name'], orientation='h'
)
]
graphJSON = json.dumps(data, cls=plotly.utils.PlotlyJSONEncoder)
return graphJSON
@socketio.on("response")
def background_task_func():
global test_val
global plot
data = {'Name': ['Tom', 'Joseph', 'Krish', 'John'], 'Age': [20, 21, 19, 18]}
test_val= pd.DataFrame(data)
bar = create_plot(test_val)
plot=bar
if test_val.shape[0]>1:
print(test_val)
socketio.sleep(10)
print(plot)
emit('response_output',plot ,broadcast=True)
socketio.sleep(1)
#return render_template('views/index_img_soc.html', plot=bar)
@app.route('/', methods=['GET'])
def index():
executor.submit(background_task_func)
return render_template('views/index_img_soc3.html')
if __name__ == "__main__":
executor = Executor(app)
socketio.run(app)
Html Code:
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<style>
#bargraph ={display:none;}
</style>
<button id="button_demo" class="w3-button w3-white w3-small w3-border w3-border-green w3-round-large" onclick="myFunctionChart()">View Chart</button>
<div class="chart" id="bargraph">
<script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js" integrity="sha256-yr4fRk/GU1ehYJPAs8P4JlTgu0Hdsp4ZKrx8bDEDC3I=" crossorigin="anonymous"></script>
<script type="text/javascript" charset="utf-8">
var socket = io().connect('http://127.0.0.1:5000');
socket.emit('response')
var graphs;
socket.on('response_output', function(receiving_data) {
console.log(receiving_data);
graphs = {{receiving_data | safe}};
});
</script>
</div>
<script>
function myFunctionChart() {
var x = document.getElementById("bargraph");
if (x.style.display === "none") {
x.style.display = "block";
console.log(graphs);
Plotly.plot('bargraph',graphs,{});
} else {
x.style.display = "none";
}
}
</script>
When I run the code, html does not recognize {{receiving_data | safe}}.
