CODEWITHSUNDEEP
ruby-on-railsherokuhighchartslazy-high-charts
John
John

Reputation: 6612

Highcharts not working on Heroku environment, works on local environment

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?

Upvotes: 3

Views: 542

Answers (2)

ErvalhouS
ErvalhouS

Reputation: 4216

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)

Upvotes: 1

Arctodus
Arctodus

Reputation: 5847

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.

Upvotes: 0

Related Questions