Highcharts Graph displays correctly ONLY on Window Resize

Question

In my rails application, I have a highcharts graph, and it is displayed in a modal dialog box, and when the modal dialog box loads; the graph takes up the entire box (incorrectly), but then when I resize the window; the graph resizes to its proper size, the way it is supposed to be.

This is how the graph looks when first loaded --> [Link][1] (incorrectly) This is how the graph looks after window resize --> [Link][2] (correct)

How do I get it so that the graph is properly displayed the first time it is loaded, and not after window resize?

Here is the code to that part of the page:

- player_url = URI.encode('http://'+request.host_with_port + player.url)
- player_title = "AmericanSoccerNow: #{player.title}"
- player_description = player.dek

- highchart_data = @asns.map { |asn| [asn.asn_month.try(:strftime, '%b/%y'), asn.player_rank(player)] }
- highchart_xaxis_data = @asns.collect { |asn| asn.asn_month.try(:strftime, '%b-%y')}


.detail
  / :javascript
  /   alert( 'You are running jQuery version: ' + $.fn.jquery );
  .left
    - if player.hero_image and player.hero_image.attached
      = image_tag player.hero_image.attached.url, :height => "auto", :width => "100%"
      %span.imageCaption
        = player.hero_image.credit.try(:html_safe)
      .block
        #contain{:style => "width: 100%; height: auto; "}
        :javascript
          $(function() {
            $('#contain').highcharts({
                chart: {
                    spacingLeft: 0
                },
                title: {
                  text: 'ASN 100 Ranking Tracker',
                    style: {
                      color: 'black',
                      font: 'normal 12px "Alfa Slab One", Helvetica, Arial, sans-serif',
                    }
                },
                xAxis: {
                  categories: #{raw highchart_xaxis_data.to_json},
                  labels: {
                    lineColor: 'red',
                    lineWidth: 2,
                    enabled: true,
                    style: {
                        color: 'black',
                        font: 'normal 10px "Arial", sans-serif',
                    }
                  },
                },
                yAxis: {
                    reversed: true,
                    opposite: true,
                    gridLineColor: 'black',
                    lineColor: 'black',
                    lineWidth: 1,
                    title: {
                      text: '',
                      style: {
                        color: 'red',
                        fontWeight: 'bold'
                      }
                    },
                    plotLines: [{
                      value: 0,
                      width: 1,
                      color: '#808080'
                    }]
                },
                legend: {
                  layout: 'vertical',
                  align: 'right',
                  verticalAlign: 'middle',
                  borderWidth: 0
                },
                credits: {
                  enabled: false,
                },
                series: [{
                  showInLegend: false,
                  name: "#{player.title}'s Rank",
                  color: 'red',
                  data: #{raw highchart_data.to_json}
                }]
            });
          });

    - else 
      = image_tag "http://placehold.it/200x240", :height => 240, :width => 250
    - unless player.relatables.external_videos.empty?
      - player.relatables.external_videos.each do |video|
        .block
          = image_tag video.preview_image, :class => 'video_preview', :width => "100%", :height => "auto", :data => {'youtube-id' => video.youtube_id, :player_id => player.slug, :player_rank => @rank}
          .video_embed{:style => 'display:none;', :data => {'youtube-id' => video.youtube_id}}
            = video.movie_embed.html_safe
          %p.meta
            = video.title

    #secretSocial
    %ul.socialIcons
      = render '/shared/player_addthis', :url => player_url, :title => player_title, :description => player_description, :show_print => true

  .right.arct
    %h2.player
      - unless @rank.nil?
        %span.red
          = "##{@rank}"
      = player.title

    %ul
      %li
        %span
          DOB
        = player.birth_date.try(:strftime, '%B %e, %Y')
      %li
        %span
          Age
        = player.age
      - if player.birth_place.present?
        %li
          %span
            Place of birth
          = player.birth_place
      %li
        %span POSITION
        = player.human_readable_position
      %li
        %span HEIGHT 
        = display_feet(player.height)
      %li
        %span WEIGHT
        = player.weight
      %li
        %span U.S. CAPS
        = player.us_caps
      - if player.club.present?
        %li
          %span CLUB
          = player.club.name
      - if player.twitter_handle.present?
        %li
          %span
            TWITTER
          = link_to "@#{player.twitter_handle}", "http://twitter.com/#{player.twitter_handle}", :target => '_blank'
          = "(#{humanize_twitter_followers(player.twitter_followers)} followers)"
      / - @asns.each do |asn|
      /   - if rank = asn.player_rank(player)
      /     - if rank > 100
      /       - ranking = 'unranked in the top 100'
      /     - else
      /       - ranking = "ranked #{rank}"
      /   - else
      /     - ranking = 'unranked'
      /   %li
      /     %span= "#{asn.asn_month.strftime('%b %Y')}: #{ranking}" 
      - if @current_rank or @previous_rank
        %li
          %span Current ASN 100 Rank
          = (@current_rank.nil? or @current_rank > 100) ? "Unranked" : @current_rank
        %li
          %span Previous ASN 100 Rank
          = (@previous_rank.nil? or @previous_rank > 100) ? "Unranked" : @previous_rank 
      - if player.youth_experience.present?
        %li
          %span Youth Experience
          = player.youth_experience
      - if player.contract_status.present?
        %li
          %span Contract Status
          = player.contract_status
      - if player.questionnaire.present?
        %li
          %span ASN QUESTIONNAIRE
          = link_to "Read now", player.questionnaire.url

    = player.body.try(:html_safe)

    - unless player.relatables.external_links.empty?
      %h4 Noteworthy Reads
      - player.relatables.external_links.each do |external_link|
        = link_to external_link.title, external_link.url, :target => '_blank'
        %br

  .clear

I really can't figure out whats going on!!!

Hey Guys I figured it out, and this is what I did to fix it:

#contain{:style => "width: 100%; height: auto; "}
    :javascript
      $(function() {
        var initializeChart = function() {
          $('#contain').highcharts({
            chart: {
                spacingLeft: 0,
                events: {
                  load: function() {
                    $(window).resize();
                  }
                }
            },
            title: {
              text: 'ASN 100 Ranking Tracker',
                style: {
                  color: 'black',
                  font: 'normal 12px "Alfa Slab One", Helvetica, Arial, sans-serif',
                }
            },
            xAxis: {
              categories: #{raw highchart_xaxis_data.to_json},
              labels: {
                lineColor: 'red',
                lineWidth: 2,
                enabled: true,
                style: {
                    color: 'black',
                    font: 'normal 10px "Arial", sans-serif',
                }
              },
            },
            yAxis: {
                reversed: true,
                opposite: true,
                gridLineColor: 'black',
                lineColor: 'black',
                lineWidth: 1,
                title: {
                  text: '',
                  style: {
                    color: 'red',
                    fontWeight: 'bold'
                  }
                },
                plotLines: [{
                  value: 0,
                  width: 1,
                  color: '#808080'
                }]
            },
            legend: {
              layout: 'vertical',
              align: 'right',
              verticalAlign: 'middle',
              borderWidth: 0
            },
            credits: {
              enabled: false,
            },
            series: [{
              showInLegend: false,
              name: "#{player.title}'s Rank",
              color: 'red',
              data: #{raw highchart_data.to_json}
            }]
          })
        };

        window.setTimeout(initializeChart, 200);
      });

Thanks let me know if you have questions

Answer 1

This is what I did to get it to work responsively:

#contain{:style => "width: 100%; height: auto; "}
    :javascript
      $(function() {
        var initializeChart = function() {
          $('#contain').highcharts({
            chart: {
                spacingLeft: 0,
                events: {
                  load: function() {
                    $(window).resize();
                  }
                }
            },
            title: {
              text: 'ASN 100 Ranking Tracker',
                style: {
                  color: 'black',
                  font: 'normal 12px "Alfa Slab One", Helvetica, Arial, sans-serif',
                }
            },
            xAxis: {
              categories: #{raw highchart_xaxis_data.to_json},
              labels: {
                lineColor: 'red',
                lineWidth: 2,
                enabled: true,
                style: {
                    color: 'black',
                    font: 'normal 10px "Arial", sans-serif',
                }
              },
            },
            yAxis: {
                reversed: true,
                opposite: true,
                gridLineColor: 'black',
                lineColor: 'black',
                lineWidth: 1,
                title: {
                  text: '',
                  style: {
                    color: 'red',
                    fontWeight: 'bold'
                  }
                },
                plotLines: [{
                  value: 0,
                  width: 1,
                  color: '#808080'
                }]
            },
            legend: {
              layout: 'vertical',
              align: 'right',
              verticalAlign: 'middle',
              borderWidth: 0
            },
            credits: {
              enabled: false,
            },
            series: [{
              showInLegend: false,
              name: "#{player.title}'s Rank",
              color: 'red',
              data: #{raw highchart_data.to_json}
            }]
          })
        };

        window.setTimeout(initializeChart, 200);
      });

I added in a setTimeout method, and I also added in a window.resize method.

Thanks!

Answer 2

Instead of waiting arbitrarily 200ms, putting the chart initialization on window load is enough:

$(window).load(initializeChart);

When the document is ready, $('#contain').width() might not have the values you are expecting, but they should all be set by the time window loads.