title: How to incorporate local and external JS files into Dash Plotly framework
body: <p>My goal is to incorporate a GitHub heatmap written in JS into my test.py Dash framework.</p>
  <pre><code>root-
      -assets–&gt;google.js
             –&gt;index.js
             –&gt;main.css 
      -css–&gt;main.css 
      -index.html 
      -test.py
  </code></pre>
  <p>my heatmap(index.html) is written as follows,</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Github contribution graph&lt;/title&gt;
      &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/main.css&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css&quot;&gt;
      &lt;!-- Libraries --&gt;
      &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/d3/4.4.0/d3.min.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
      &lt;script type=&quot;text/javascript&quot; src=&quot;js/index.js&quot;&gt;&lt;/script&gt;
  
      &lt;script&gt;
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
  
      ga('create', 'UA-68576141-1', 'auto');
      ga('send', 'pageview');
  
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
  
      &lt;div class=&quot;results&quot;&gt;
        &lt;div class=&quot;js-heatmap&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;js-months&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;js-legend&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;js-empty  hidden  center&quot;&gt;
          &lt;h4&gt;Oops!&lt;/h4&gt;
          &lt;img src=&quot;assets/404.gif&quot; style=&quot;width:400px;height:300px&quot;&gt;&lt;/img&gt;
        &lt;/div&gt;
        &lt;div class=&quot;js-spinner  loader  hidden&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
    &lt;/html&gt;
  </code></pre>
  <p>and I am trying to translate that to my dash framework(test.py),</p>
  <pre><code>from datetime import date
  import dash
  import dash_html_components as html
  import dash_core_components as dcc
  import re
  
  # external JavaScript files
  external_scripts = [
      {'src': 'https://cdn.polyfill.io/v2/polyfill.min.js'},
      {'src': 'https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'},
      {'src': 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.4.0/d3.min.js'},
      {'src': 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'},
      {'src':'assets/index.js'},
      {'src':'assets/google.js'}
  
  
   
  ]
  
  # external CSS stylesheets
  external_stylesheets = [
      'https://codepen.io/chriddyp/pen/bWLwgP.css',
      {'rel':&quot;stylesheet&quot;,'src':'assets/main.css'},
      {'rel':&quot;stylesheet&quot;,'href':'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'},
      {'https://codepen.io/chriddyp/pen/bWLwgP.css'}
  
  ]
  
  
  # external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
  
  app = dash.Dash(__name__, external_scripts=external_scripts,
                  external_stylesheets=external_stylesheets)
  
  app.layout = html.Div([
      html.Div(
          'Plotly Dash5',
          className =&quot;results&quot;,
          ),
      html.Div(
          className='js-heatmap'),
      html.Div(
          className='js-months'),
      html.Div(
          className='js-legend'),
      html.Div(
          className='js-spinner  loader  hidden'),
      dcc.DatePickerRange(
          id='my-date-picker-range',
          min_date_allowed=date(1995, 8, 5),
          max_date_allowed=date(2017, 9, 19),
          initial_visible_month=date(2017, 8, 5),
          end_date=date(2017, 8, 25)
      ),
      html.Div(id='output-container-date-picker-range')
  ])
  
  
  @app.callback(
      dash.dependencies.Output('output-container-date-picker-range', 'children'),
      [dash.dependencies.Input('my-date-picker-range', 'start_date'),
       dash.dependencies.Input('my-date-picker-range', 'end_date')])
  def update_output(start_date, end_date):
      string_prefix = 'You have selected: '
      if start_date is not None:
          start_date_object = date.fromisoformat(start_date)
          start_date_string = start_date_object.strftime('%B %d, %Y')
          string_prefix = string_prefix + 'Start Date: ' + start_date_string + ' | '
      if end_date is not None:
          end_date_object = date.fromisoformat(end_date)
          end_date_string = end_date_object.strftime('%B %d, %Y')
          string_prefix = string_prefix + 'End Date: ' + end_date_string
      if len(string_prefix) == len('You have selected: '):
          return 'Select a date to see it displayed here'
      else:
          return string_prefix
  
  if __name__ == '__main__':
      app.run_server(debug=True)
  </code></pre>
  <p>Right now, there’s no error showing, neither is the heatmap.
  I am not quite sure how to translate standard HTML <code>&lt;div class=&quot;js-heatmap&quot;&gt;&lt;/div&gt;</code> into plotly format. Thank you</p>