✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

Dash does not display data on the graph

Please see code and fix error in the code. It displays data on the graph when I put ‘w_countries = Spain’ in the data frame. It does not display data on the graph when I select values from the drop down list.

It displays data on the graph when data frame is equal to ‘spain’.The image is below

Below does not work when I select input value from the list. Please fix below code.

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.graph_objs as go
import pandas as pd

sales1 = pd.read_csv("sales_data_sample.csv", encoding='unicode_escape')

# Create combination of bar chart and line chart (show sales of each product in each country)
# Data for bar
product_sales1 = sales1.groupby(['PRODUCTLINE', 'COUNTRY'])['QUANTITYORDERED'].sum().reset_index()
product_sales1[product_sales1['COUNTRY'] == 'Spain']['PRODUCTLINE'].unique()
product_sales1[product_sales1['COUNTRY'] == 'Spain']['QUANTITYORDERED']

# Data for line
product_sales2 = sales1.groupby(['PRODUCTLINE', 'COUNTRY'])['PRICEEACH'].mean().reset_index()
product_sales2[product_sales2['COUNTRY'] == 'Spain']['PRODUCTLINE'].unique()
product_sales2[product_sales2['COUNTRY'] == 'Spain']['PRICEEACH']




app = dash.Dash(__name__,)
app.layout = html.Div([

    html.Div([
    html.H1('Sales Dashboard')],
    style={'text-align': 'center','color':'#00FFFF','background':'#008000'

    }),

    html.Div([
        dcc.Dropdown(id='w_countries',
                     multi=False,
                     clearable=True,
                     value='Australia',
                     placeholder='Select Countries',
                     options=[{'label': c, 'value': c}
                              for c in (sales1['COUNTRY'].unique())])

    ], style={'width': '40%',
              'margin-left': '30%',

              }),
    html.Div([
    dcc.Graph(id='bar_line_1',
              config={'displayModeBar': False})

        ],style={'margin-left':'23%','margin-top':'1%'})

  ])
@app.callback(Output('bar_line_1', 'figure'),
              [Input('w_countries', 'value')])
def bar_line_1(w_countries):


    return {
        'data': [go.Bar(x=product_sales1[product_sales1['COUNTRY'] == 'w_countries']['PRODUCTLINE'].unique(),
                        y=product_sales1[product_sales1['COUNTRY'] == 'w_countries']['QUANTITYORDERED'],
                        text=product_sales1[product_sales1['COUNTRY'] == 'w_countries']['QUANTITYORDERED'],
                        name='Quantity Ordered',
                        texttemplate='%{text:.2s}',
                        textposition='inside',
                        marker=dict(color='rgb(500,0,0)'),
                        yaxis='y1'),

                go.Scatter(
                            x=product_sales2[product_sales2['COUNTRY'] == 'w_countries']['PRODUCTLINE'].unique(),
                            y=product_sales2[product_sales2['COUNTRY'] == 'w_countries']['PRICEEACH'],
                            name='Price of Product',
                            text=product_sales2[product_sales2['COUNTRY'] == 'w_countries']['PRICEEACH'],
                            mode='markers + lines',
                            marker=dict(color='Black'),
                            yaxis='y2')],


        'layout': go.Layout(
             width=1050,
             height=520,
             title={
                'text': 'Quantity ordered and price of each product',
                'y': 0.9,
                'x': 0.5,
                'xanchor': 'center',
                'yanchor': 'top'},

             hovermode='closest',

             xaxis=dict(title='Name of Product',
                        showline=True,
                        showgrid=True,
                        showticklabels=True,
                        linecolor='rgb(104, 204, 104)',
                        linewidth=2,
                        ticks='outside',
                        tickfont=dict(
                            family='Arial',
                            size=12,
                            color='rgb(82, 82, 82)')),
             yaxis=dict(title='Quantity Ordered'),
             yaxis2=dict(title='Price of Each Product in ($)', overlaying='y', side='right'),

             legend=dict(
                 x=0.82,
                 y=0.97,
                 traceorder="normal",
                 font=dict(
                     family="sans-serif",
                     size=12,
                     color="black")),
             uniformtext_minsize=10,
             uniformtext_mode='hide',
             legend_title='<b> Trend </b>',

             title_font_family="Times New Roman",
             title_font_color="red",
             title_font_size=30,
             legend_title_font_color="green",


         )

    }

if __name__ == '__main__':
    app.run_server(debug=True)

data link: https://www.kaggle.com/kyanyoga/sample-sales-data



Hi @jawabutt

In your code, you are comparing to the string’ 'w_countries'
Try removing the quotes so it’s using the variable: w_countries

1 Like

Thank you. You solved my problem

1 Like