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?

Please share the code where you create the Highcharts chart. — Kamil Kulig, Feb 12 '18 at 13:45
Perhaps https://stackoverflow.com/questions/11998902/highcharts-doesnt-work-on-heroku can help — muZk, Feb 14 '18 at 19:29
Nope, already seen that. It seems an assets precompile issue. Normally that is done by Heroku when deploying, but I did it one time manually before deployment. Since then the charts don't work anymore. — John, Feb 14 '18 at 19:42
Where is the line `window.chart_spider_chart = new Highcharts.Chart(options);`? Have you tried removing the formatter, just to test? — Pablo, Feb 14 '18 at 21:05
Anything in `public/assets` that has accidentally been committed? You could try to force a Heroku asset recompile by bumping the asset version in `config/production.rb`. E.G changing `config.assets.version = 1.0` to `1.1` and then push. — Arctodus, Feb 15 '18 at 00:19
Can you share a link to the production site or some sample project we can use? Else it would be hard to asses what could be wrong — Tarun Lalwani, Feb 15 '18 at 03:33
Also check if any of these links helps https://github.com/pablojim/highcharts-ng/issues/441, https://stackoverflow.com/questions/11198568/having-trouble-just-getting-the-highchart-to-show, https://stackoverflow.com/questions/14990858/highcharts-is-undefined — Tarun Lalwani, Feb 15 '18 at 03:40

ErvalhouS · Accepted Answer · 2018-02-16T13:28:21.270

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)

edited Feb 16 '18 at 13:28

answered Feb 16 '18 at 02:54

ErvalhouS

4,178
1
22
38

Hi, I did what you said with the assets precompile, but no luck unfortunately. When I deploy to Heroku, I see it says `Detected manifest file, assuming assets were compiled locally`, is that OK? Because normally Heroku takes care of this? – John Feb 16 '18 at 07:12
Yes this is OK, it only means you did what it said: you compiled your assets locally. Assets clobbering clear all files precompiled, including `.sprockets-manifest` which would fix asset versioning problem, have you tryed the second option? – ErvalhouS Feb 16 '18 at 12:37
Your second option did the trick! Both removing `=// require_tree .` completely, or moving it to the bottom helped, thanks! – John Feb 18 '18 at 10:05

Arctodus · Answer 2 · 2018-02-16T08:54:50.933

0

Try looking for a .sprockets-manifest file in the public directory and delete it if found (it's a hidden file). If you compiled the assets locally and accidentally committed that file it can prevent asset compilation on Heroku.

You can also try to force a Heroku asset recompile by bumping the asset version in config/production.rb. I.E changing config.assets.version = 1.0 to 1.1 and then push.

edited Feb 16 '18 at 08:54

answered Feb 16 '18 at 08:36

Arctodus

5,743
3
32
44

I did both things you mentioned, no luck. When I look into `public/assets` I would expect to see something like `highcharts.jsxxxxxx`, but I cannot see anything related to highcharts? – John Feb 18 '18 at 09:53

Highcharts not working on Heroku environment, works on local environment

2 Answers2