python dashboard

Comment

1

import pandas as pd
import dash
from dash.dependencies import Input, Output, State
from jupyter_dash import JupyterDash
import plotly.graph_objects as go
import plotly.express as px
from dash import Dash, no_update, dcc, html

app = Dash(__name__) # Create a dash application

# Clear the layout and do not display exception till callback gets executed
app.config.suppress_callback_exceptions = True

your_data = pd.read_csv('your_file.csv') # Load data

def compute_data_choice_1(df):
    # You calculations
    return bar_data, map_data, tree_data

def compute_data_choice_2(df):
        # You calculations
    return data1, data2, data3

# Application layout
app.layout = html.Div(children=[
    html.H1('Your Title, style={'textAlign': 'center', 'font-size': 24, 'color': '#503D36'}),
    html.Div([
        # Holder of two dropdowns
        html.Div([
            # Dropdown 1 Div Area
            html.Div([html.H2('Dropdown 1 choices:', style={'margin-right': '2em'}),]),
            dcc.Dropdown(id='input-dropdown-1',
                         options=[{'label': 'Option 1','value': 'OPT1'},
                             {'label': 'Option 2','value': 'OPT2'}],
                         placeholder='Choose option for dropdown 1',
                         style={'textAlign': 'center', 'font-size': 20, 'color': '#503D36',   'padding': 3, 'width': '80%'})
        ], style={'display': 'flex'}), # Place them next to each other using the division style

        # Dropdown 2 Div Area
        html.Div([
            # Create an division for adding dropdown helper text for choosing year
            html.Div([html.H2('Dropdown 2 choices:', style={'margin-right': '2em'})]),
            dcc.Dropdown(id='input-dropdown-2',
                         options=[{'label': i, 'value': i} for i in range(1,10)],
                         placeholder="Choose option for dropdown 2", style={'width': '80%', 'padding': '3px', 'font-size': '20px', 'text-align-last': 'center'}),
        ], style={'display': 'flex'}), # Place them next to each other using the division style
    ]),

    # Divs for graphs
    # id of each Div  will be updated during callback
    html.Div([], id='plot1'), # Plot-1 Div 
    html.Div([ html.Div([], id='plot2'), html.Div([], id='plot3')], style={'display': 'flex'})]) # Plot-2 and Plot-3 Div 

# Callback function definition
@app.callback([Output(component_id='plot1', component_property='children'), Output(component_id='plot2', component_property='children'),Output(component_id='plot3', component_property='children')],
              [Input(component_id='input-dropdown-1', component_property='value'),Input(component_id='input-dropdown-2', component_property='value')],
              # Holding output state till user enters all the form information. In this case, it will be chart type and year
              [State("plot1", 'children'), State("plot2", "children"), State("plot3", "children")])
# Add computation to callback function and return graph
def get_graph(option_dropdown_1, option_dropdown_2, c1, c2, c3):
    # Select data
    df = df[df['col'] == int(option_dropdown_2)]
    if option_dropdown_1 == 'OPT1':
        # Extract necessary dataframe for plotting
        bar_data, map_data, tree_data = compute_data_choice_1(df)
        # Bar plot
        bar_fig = px.bar(bar_data, .... , title='Title for barchart')
        bar_fig.update_layout(transition_duration=500)
        # Choropleth Plot
        map_fig = px.choropleth(map_data,  .... , range_color=[0, map_data['Flights'].max()])
        map_fig.update_layout( title_text='Title for Choropleth',geo_scope='usa')  # Plot only the USA instead of globe
        # Treemap Plot
        tree_fig = px.treemap(tree_data..... ,title='Title for treemap')
        tree_fig.update_layout(transition_duration=500)
        # Return dcc.Graph component to the empty division
        return [dcc.Graph(figure=tree_fig), dcc.Graph(figure=map_fig),dcc.Graph(figure=bar_fig)]
    else:
        data1, data2, data3 = compute_data_choice_2(df) # Extract necessary dataframe for plotting
        # Create graph for line plots
        data1_fig = px.line(data1, x='x', y='y', color='z',title='Line chart 1')
        data2_fig = px.line(data2,....)
        data3_fig = px.line(data3,....)
        return[dcc.Graph(figure=data1_fig), dcc.Graph(figure=data2_fig),dcc.Graph(figure=data3_fig)]

# Run the app
if __name__ == '__main__':
    app.run_server(port=8002, host='127.0.0.1', debug=False)

Popularity 9/10 Helpfulness 4/10 Language python

Source: Grepper

Tags: dashboard python

Share

Link to this answer
Share Copy Link

Contributed on Feb 03 2023

Innocent Iguana

0 Answers Avg Quality 2/10

dashboard python

Comment

0

Use Plotly Dash
	- Interacts well flask
	- Interacts well reactsj
    - Cross-platform
    - Mobile-ready
    - Rendered in browsers
    - Can be deployed to servers
go to : https://dash.plotly.com/
examples : https://dash.gallery/Portal/

Popularity 9/10 Helpfulness 2/10 Language whatever

Source: Grepper

Tags: dashboard dash

Share

Link to this answer
Share Copy Link

Contributed on Jan 31 2023

Innocent Iguana

0 Answers Avg Quality 2/10

python - dashboard

Comment

0

// views.py inside APP folder 

def logout(request):
    if request.method == 'POST':
        auth.logout(request)
        messages.success(request, 'You are successfully logged out')
        return redirect('login')

// topbar.html paste code below  

<ul class="top-social-media pull-right">
  {% if user.is_authenticated %}
  <li>
      <a href="{% url 'dashboard'%}" class="sign-in"><i class="fa fa-tachometer"></i> Dashboard</a>
  </li>
  <li>
      <a href="javascript:{document.getElementById('logout').submit()}" class="sign-out"><i class="fa fa-sign-out"></i> Logout</a>
      <form action="{% url 'logout' %}" method="POST" id="logout">
        {% csrf_token %}
        <input type="hidden">
      </form>
  </li>
  {% else %}
    <li>
        <a href="{% url 'login'%}" class="sign-in"><i class="fa fa-sign-in"></i> Login</a>
    </li>
    <li>
        <a href="{% url 'register' %}" class="sign-in"><i class="fa fa-user"></i> Register</a>
    </li>
  {% endif %}
</ul>

Popularity 10/10 Helpfulness 1/10 Language python

Source: Grepper

Tags: dashboard dash

Share

Link to this answer
Share Copy Link

Contributed on Feb 12 2022

BenLeolam

0 Answers Avg Quality 2/10

python dashboard

Contents

More Related Answers

python dashboard

Closely Related Answers

dashboard python

python - dashboard

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.