plotly HTML Flask

The problem of plotly HTML Flask

In this blog post, we will learn how one can integrate Plotlyt Dash with the help of the flask application. This problem is popularly known as a plotly HTML Flask. For better understanding let’s take an example. To set this example one needs to follow certain steps:

Step 1 – One needs to import all the required libraries from the flask. The name of these libraries is Flask, render_template, request, redirect_session.

Step 2 – As a second step one needs to import the following by executing the commands shown below:

import pandas as pd

Another library is:

import plotly.express as px

One more is:

import matplotlib.pyplot as plt

from flask.helpers import url_for

The code for the same in python is also shown below:

# Step – 2 (configuring your application)
   app = Flask(__name__)
   app.secret_key = 'xyz'
   
   # step – 3 (Here we are create a dictionary for storing the info of users)
   user = {"username": "abc", "password": "123"}
   
   # Step – 4 (creating route for login)
   @app.route('/', methods=['POST', 'GET'])
   def login():
       if (request.method == 'POST'):
           username = request.form.get('username')
           password = request.form.get('password')
           if username == user['username'] and password == user['password']:
               session['user'] = username
               return redirect('/New_temp')
   
           return "<h1>Wrong username or password</h1>"
   
       return render_template("login.html")
   
   # Step -5( In step 5 we are creating the route for logout and dashboard)
   @app.route('/New_temp')
   def home():
    if ('user' in session and session['user'] == user['username']):
        return render_template('New_temp.html')
   
   @app.route('/graph', methods=['POST'])
   def graph():
       return render_template('Machine_graph.html')
       pass
       #subprocess.call('Machine_graph.html')
       #return home()
   
       return '<h1>You are not logged in.</h1>'
   
   # Step -7(run the app)
   if __name__== '__main__':
       app.run(debug=True)

Answer

One of the easiest and most effective solutions for the above problem is to pass the flask application into Dash Object with “server” as a parameter. The below lines shows the code for the solution to the above problem: 

dash_app = Dash(__name__, server=app, url_base_pathname='/dash/')

The above solution is considered one of the best solutions to get the above results. This code will connect the Plotlyt Dash with the help of the flask application. It will surely solve the issue of the users.

Also Read: streamlit work with python2