Highcharts not working on Heroku environment, works on local environment

Question

I'm using graphs created with Highcharts. They work fine on my local development environment, but on Heroku the graphs are not showing. The div is just empty:

<div id="dashboard_chart_75"></div>

I'm using the lazy_high_charts gem and this is my application.js:

//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require general.js.erb
//= require_tree .
//= require turbolinks
//= require highcharts/highcharts
//= require highcharts/highcharts-more
//= require social-share-button
//= require ckeditor-jquery

This is the code the generate the chart:

spider_chart = LazyHighCharts::HighChart.new('graph') do |f|
  f.chart(polar: true, type: 'line', height: @height)
  f.pane(size: @size)
  f.colors(['#C41D21','#1c77bb'])
  f.xAxis(
    categories: categories.map{ |c| [@survey.id,c.id, c.name] },
    tickmarkPlacement: 'on',
    lineWidth: 0,
    labels: {
      style: {
        fontSize: '12px',
        weight: 'bold',
        width: '100%'
      },
      formatter: %|function() {return '<a href="' + window.location.hostname + '/dashboards/spiders?level=2&survey_id=' + this.value[0] + '&category_id=' + this.value[1] + '">' + this.value[2] + '</a>';}|.js_code }
      )
  f.yAxis(gridLineInterpolation: 'polygon', lineWidth: 0, min: 0, max: 10,tickInterval: 1, tickWidth: 20)
  f.tooltip(enabled: false)
  f.series(name: "Gemiddelde van gewenste score", data: norm_scores, pointPlacement: 'on')
  f.series(name: "Gemiddelde van huidige score", data: current_scores, pointPlacement: 'on')
  f.legend(enabled: @legend, align: 'center', verticalAlign: 'top', y: 10, layout: 'vertical')
end

On production I see this error in the console:

Uncaught ReferenceError: Highcharts is not defined at window.onload

Which refers to this line:

window.chart_spider_chart = new Highcharts.Chart(options);

What could be the cause of this?

Answer 1

You really seem to be having a simple asset versioning problem, no reason to highcharts to behave differently in production.

Try clearing your assets and forcing precompiling using:

$ bundle exec rake assets:clobber
$ RAILS_ENV=production bundle exec rake assets:precompile

Then, add and commit your public/assets folder to push into Heroku. I have ran into a lot of trouble trusting that deployment precompile would work as expected. Some times compiling assets gets bugged and you need to change the file before precompiling to perceive a change.

If that doesn't work

You may have a problem with the gem in production, maybe it is inside a development block in gemfile, or maybe even =// require_tree . or any other require that would possibly insert that code before highcharts lib initializing, messing around with the order of the scripts would help (even though your pasted code doesn't reflect that)