Charts aren't full-size until page is refreshed

[kgarvey]

I’ll start by saying this may very well be an issue with 3dcart, rather than CanvasJS, but just in case…

I’m using some charts in a 3dcart-hosted site. When the page is first loaded, the charts don’t load full-size.

Here’s the code I’m using (I had to put them in a separate DIV to expand the “tab” that they’re in on the page):

<div style=”height: 620px; width: 100%”>
<div id=”spectral_response” style=”height: 300px; width: 100%; margin-top: 10px;”>
<div id=”window_transmission” style=”height: 300px; width: 100%; margin-bottom: 10px;”>
</div>

First loaded:

After refresh:

You can see also that the charts, when first loaded, are technically outside the area they should be. Happens in both IE10 and Chrome 28.

I’ll also check with 3dcart on this.

[Sunil Urs]

@kgarvey,

CanvasJS basically takes the width and height from its container element. So the most probably issue is that the width/height/position of div element is not set properly when the chart is created. Just to confirm, can you try creating the charts after a couple of seconds of delay after the page load event?

—
Sunil Urs

[kgarvey]

Hi, thanks for the quick follow-up… sorry, but how would I go about doing this? I’m fairly new to this.

[Sunil Urs]

You can write something like

var chart = null;
setTimeout(function(){
 
chart = [create chart here]
chart.render();

},3000);
//3000 ms delay. Try increasing/decreasing the delay. 

Please remember this is not the ideal way to go. Am suggesting this just to confirm if the dimensions of the container are being set very late. If this works, you can instead try adding the chart rendering logic (without delay) at the end of the page (after all the other script tags) so that it runs after all other scripts are done.

—
Sunil Urs

[kgarvey]

I will give that a shot, thank you very much!

[kgarvey]

It was definitely an issue with the timing… I found that if I accessed the site via an overseas proxy server, it rendered the charts just fine. Since I’m working within the framework of 3dcart I don’t think I’m able to move the scripts that far down… what I ended up doing though was accessing the chart html in an iframe and that seems to have fixed it. Thanks for your help!

[kgarvey]

Maybe I was wrong about the timing. I waned to try removing the iframe, and I found that just hitting the ALT button in Firefox and IE, which temporarily resized the window by showing the menu bar, forces the charts to re-size. Given that is the case, do you have a suggestion on how to fix?

EDIT: also – manually resizing the browser window fixes the charts, too.

• This reply was modified 11 years, 3 months ago by kgarvey.

[Sunil Urs]

Hi,

Whenever the window size changes the chart checks to see if the parent container’s size is still the same. If not, it re-adjusts itself – this is just an added feature that I’ve put. So, whenever you press ALT key (which displays menu), it changes the size of view-port and hence triggers re-adjustment logic in Chart. Because the container’s size has been set by the time you hit ALT, chart re-adjusts to its actual width. So, I would still say that it was timing issue.

If you want to remove iframe, best solution is to create chart once the layout is set – either by using jQuery’s ready method or a time delay. I would prefer jQuery’s ready event if that worked in your case.

—
Sunil Urs

[syduck]

pro-tip: if you load the charts when they are display:none, their size will be messed up (if you re-size the window it fixes it). If you have to load the chart when its display:none, you can explicitly add height and width in the init code (although percentage doesn’t work):

    var chart = new CanvasJS.Chart("chartContainer",
    {
      height: 550, //in pixels
      width: 600,
      title:{
      text: "Earthquakes - per month"
      },

[vulturistic]

Thanks syduck! your pro-tip is super effective! :) the height and width works fine for me. At first I set the height and width in my <div> but sometimes my chart isn’t displaying the proper size until I refresh it. Your solution fixed the bug. Thanks again!

[jarode]

Hi
I’ve a similar issue but I don’t know where to post it.
my graph shows correctly, but when I change the title and it becomes longer (2 lines) the graph get resized and then smaller, but when I changed my title back so it’ll fit in one line, the graph won’t to be bigger.
what’s the problem here ?

Thanks

[Sanjoy]

Jarode,

We are unable to reproduce this issue. Can you please create a JSFiddle reproducing the same.

—
Sanjoy
Team CanvasJS

[jarode]

Hello Sanjoy,
I’ve tried to reproduce it in the JSFIddle but it won’t,
you can see the update in the link you’ve given me.
thanks man