✊🏿 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 chart

Please fix error in the code below. This code does not display data on the chart.

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


# Data for line







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='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('countries', 'value')])
def update_graph(countries):
    product_sales1 = sales1.groupby(['PRODUCTLINE', 'COUNTRY'])['QUANTITYORDERED'].sum().reset_index()
    print(product_sales1.head())
    product_sales2 = sales1.groupby(['PRODUCTLINE', 'COUNTRY'])['PRICEEACH'].mean().reset_index()
    print(product_sales2.head())


    return {
        'data': [go.Bar(x=product_sales1[product_sales1['COUNTRY'] == 'countries']['PRODUCTLINE'],
                        y=product_sales1[product_sales1['COUNTRY'] == 'countries']['QUANTITYORDERED'],
                        text=product_sales1[product_sales1['COUNTRY'] == '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'] == 'countries']['PRODUCTLINE'],
                            y=product_sales2[product_sales2['COUNTRY'] == 'countries']['PRICEEACH'],
                            name='Price of Product',
                            text=product_sales2[product_sales2['COUNTRY'] == '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

duplicate post - see Dash does not display data on the graph