Home forums Using CanvasJS Charts aren't full-size until page is refreshed

Tagged: 

This topic contains 12 replies, has 6 voices, and was last updated by  jarode 9 months ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #4846

    kgarvey
    Participant

    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.

    #4847

    Sunil Urs
    Keymaster

    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?…

    #4849

    kgarvey
    Participant

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

    #4850

    Sunil Urs
    Keymaster

    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

    #4851

    kgarvey
    Participant

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

    #4855

    kgarvey
    Participant

    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!

    #5235

    kgarvey
    Participant

    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 3 years, 2 months ago by  kgarvey.
    #5241

    Sunil Urs
    Keymaster

    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

    #5273

    syduck
    Participant

    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"
          },
    
    #7582

    vulturistic
    Participant

    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!

    #9956

    jarode
    Member

    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

    #9959

    Sanjoy
    Moderator

    Jarode,

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

    #9960

    jarode
    Member

    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

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.