Announcing Dash Bio 1.0.0 🎉 : a one-stop-shop for bioinformatics and drug development visualizations.

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