title: Plotly Dash: How to display a calculated value from a data frame created from a file upload?
body: <p>I have the following data in a <code>Pandas</code> data frame:</p>
  
  <pre><code>     df = pd.DataFrame({'Make':['Mercedes', 'BMW', 'Mercedes', 'Mercedes', 'Chrysler', 'Chrysler', 'Chrysler', 'Chrysler', 'BMW', 'Chrysler', 'BMW', 'Mercedes', 'BMW', 'Mercedes'],
                            'Dimension':['Styling', 'Styling', 'Price', 'Styling', 'MPG', 'MPG', 'Styling', 'Styling', 'MPG', 'MPG', 'Price', 'Price', 'Styling', 'MPG'],
                            'Country':['USA', 'USA', 'USA', 'Germany', 'USA', 'USA', 'USA', 'England', 'Germany', 'USA', 'Germany', 'Poland', 'Italy', 'USA'],
                            'LowValue':['64', '61', '70', '65', '59', '68', '63', '57', '58', '55', '69', '63', '69', '61'],
                            'HighValue':['82', '95', '93', '95', '87', '93', '85', '85', '95', '92', '83', '87', '80', '80']})
  </code></pre>
  
  <p>I'm building a web application using the <code>Plotly Dash</code> framework.  The app allows the user to upload a file and render the contents on screen.  I'd like to display some summary statistics about the <code>Pandas</code> data frame that gets created when the file is uploaded.</p>
  
  <p>Here is the code to upload the file and render the app:</p>
  
  <pre><code>import base64
  import dash
  from dash.dependencies import Input, Output, State
  import dash_html_components as html
  import dash_core_components as dcc
  import dash_table
  import datetime
  from datetime import datetime as dt
  import io
  import os
  import pandas as pd
  import re
  
  
  # initialize the application
  app = dash.Dash()
  
  # define the layout of the app
  app.layout = html.Div([
  
      html.Div([
          dcc.Upload(
              id='upload-data',
              children=html.Div([
                  'Drag and Drop or ',
                  html.A('Select Files')
              ]),
              style={
              'width' : '50%',
              'height' : '60px',
              'lineHeight' : '60px',
              'borderWidth' : '1px',
              'borderStyle' : 'dashed',
              'borderRadius' : '5px',
              'textAlign' : 'center',
              'marginTop' : '10px',
              'marginRight' : '10px',
              'marginBottom' : '50px',
              'marginLeft' : '300px',
              'color' : '#87ceeb'
              },
              multiple=True
              ),
          html.Div(id='output-data-upload'),
          ]),
  
  ])
  
  
  def parse_contents(contents, filename, date):
      content_type, content_string = contents.split(',')
  
      decoded = base64.b64decode(content_string)
      try:
          if 'csv' in filename:
              # assume that the user uploaded a CSV file
              df = pd.read_csv(
                  io.StringIO(decoded.decode('utf-8')))
          elif 'xls' in filename:
              # assume that the user uploaded an Excel file
              df = pd.read_excel(io.BytesIO(decoded))
          elif 'txt' or 'tsv' in filename:
              # assume that the user uploaded a TXT file
              df = pd.read_csv(io.StringIO(decoded.decode('utf-8')), delimiter = r'\s+')
      except Exception as e:
          print(e)
          return html.Div([
              'There was an error processing this file.'
              ])
  
      # transform the original data frame to get the average of low value for Styling
      df_new = df[(df['Dimension'] == 'Styling')]
      df_new['LowValue'] = pd.to_numeric(df_new['LowValue'])
      mean_of_low_value = df_new['LowValue'].mean()
  
      return html.Div([
          html.H5(filename),
          html.H6(datetime.datetime.fromtimestamp(date)),
  
          dash_table.DataTable(
              id='table',
              columns=[{'name': i, 'id': i} for i in df.columns],
              data=df.to_dict('records'),
              sort_action='native',
              filter_action='native',
              page_size= 5,
              style_table={'height' : '300px',
                           'overflowY' : 'auto'},
              style_cell={'width' : '300px',
                          'height' : '30px',
                          'textAlign' : 'left'}
              ),
  
  ])
  
  
  
  @app.callback(Output('output-data-upload', 'children'),
      [Input('upload-data', 'contents')],
      [State('upload-data', 'filename'),
       State('upload-data', 'last_modified')])
  def update_output(list_of_contents, list_of_names, list_of_dates):
      if list_of_contents is not None:
          children = [
              parse_contents(c, n, d) for c, n, d in
              zip(list_of_contents, list_of_names, list_of_dates)]
          return children
  
  
  if __name__ == '__main__':
      app.run_server(debug = True, use_reloader=True)
  </code></pre>
  
  <p>A <code>df</code> object is created when the file is uploaded.  I then manipulate the <code>df</code> to get the mean value of the <code>Low</code> scores for <code>Styling</code>.</p>
  
  <p>Using this data set, the <code>mean_of_low_value variable</code> is 63.1666.</p>
  
  <p><strong>Question:  How would I display the following on the screen?</strong></p>
  
  <p>"The average Styling score is:  63.1666"</p>
  
  <p>Thanks in advance!</p>