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