title: Rails - Highcharts on Heroku - Getting 'ReferenceError: Highcharts is not defined'
body: <p>I'm using highcharts to plot some graphs. It works just fine locally, but when deployed to heroku, I get this javascript error saying that Highcharts is not defined. I though maybe the javascript file isn't precompiled, but I checked the heroku logs and I see that it does get precompiled. I also go to <strong>myapp.herokuapp.com/assets/highcharts.js</strong> and I find it there.
  So I'm not sure what the problem is.</p>
  
  <p>Any help is appreciated, thanks.</p>
  
  <p>--- This is the html of the page</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;link href="/assets/application-eb12a5437181ffb065f7793b96f720c9.css" media="all" rel="stylesheet" type="text/css" /&gt;
  &lt;script src="/assets/application-b5b4fd7bed721cbc4cc70b5a8c8654e9.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;meta content="authenticity_token" name="csrf-param" /&gt;
  ....
  &lt;div id="container2" style="min-width: 400px; height: 100%; margin: 0 auto"&gt;&lt;/div&gt;&lt;br&gt;&lt;br /&gt;
  
  &lt;script&gt;
  $(function () {
      var chart2;
      $(document).ready(function() {
          chart2 = new Highcharts.Chart({
              chart: {
              renderTo: 'container2',
              type: 'bar',
              height: 450
           },
          title: {
              text: 'Questions'
          },
           subtitle: {
              text: 'number of students with answer'
          },
          xAxis: {
              categories: ["Part3 00:03:31", "Part4 00:03:41", "Part5 00:06:17"],
              labels:{
              useHTML: true}
  
          },
          yAxis: {
              min: 0,
              allowDecimals: false,
              title: {
                  text: 'Number of Students'
              }
          },
          legend: {
              enabled: false,
              layout: 'vertical',
              backgroundColor: '#FFFFFF',
              align: 'left',
              verticalAlign: 'top',
              x: 100,
              y: 70,
              floating: true,
              shadow: true
          },
          tooltip: {
              formatter: function() {
                  return ''+
                      this.series.name+': '+ this.y +' student(s)&lt;br&gt;'+question(this.point.x, this.series.name);
              }
          },
          plotOptions: {
              column: {
                  pointPadding: 0.2,
                  borderWidth: 0
              }
          },
  
          series: [{"name":"Answer 1","data":[11,7,6]},{"name":"Answer 2","data":[4,6,2]},{"name":"Answer 3","data":[5,7,6]},{"name":"Answer 4","data":[0,0,6]}]
      });
  </code></pre>