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 "", :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}", "{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
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./#{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
Share Improve this question edited Jan 31, 2014 at 14:15 David Clarke asked Jan 30, 2014 at 13:21 David ClarkeDavid Clarke 531 silver badge7 bronze badges 4- Your images doesn't work. Could you recreate issue on jsFiddle? It should be fixed since Highcharts 3.0.0. – Paweł Fus Commented Jan 30, 2014 at 15:45
- hey @PawełFus , here are the two links to the tiny grab: grab.by/tY80 and grab.by/tY86 , let me know if you see them, thanks. And im not sure if I can recreate the issue in Jsfiddle..sorry – David Clarke Commented Jan 30, 2014 at 17:53
- Are you sure you have latest version of Highcharts? Try 3.0.9, please. See: jsfiddle/3bQne/881 - simple example works fine. – Paweł Fus Commented Jan 31, 2014 at 12:19
- Hey, I actually got it to work now.. I've edited my initial post! :) – David Clarke Commented Jan 31, 2014 at 14:13
2 Answers
Reset to default 3This 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!
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.