Support » Plugin: WordPress Charts and Graphs Lite » Chart not loading fully inside tabs

  • Resolved andrewsj



    Thank you very much for this awsome plugin.
    I’m have inserted the grapgh into different tabs as here – but the graph doesn’t load properly. if i restore down the browser or open up the inspect element the graph comes normally. This happens in all the browsers. I have tried all tabs plugin same problem, now i’m using Easy Responsive Tabs.

Viewing 8 replies - 1 through 8 (of 8 total)
  • Hi there! The link shows 404 page. Can you fix it and show real example?

    Sorry, please have a look now 🙂

    Hi there, any luck?

    Hm… I think you need to re-render charts after tab is switch. To do it you need to call visualizer.render() javascript function. Let me know if it helps.

    Thank you ^_^

    but i’m so sorry, can you please advise me on how to do it please…



    I have the same issue and I see another person has recently asked how to do this.

    Can you pls advise.

    I am having the same problem as well and it seems that no one has found the solution. Best I can tell for some reason the SVG object automatically sizes at 400px X 200px when the parent has yet to be created. Once you open a tab, toggle or accordion the object isn’t resizing to fit the new parent it is created in, unless you resize the browser window which triggers a resize event.

    Hopefully someone wiser than I can figure out how to trigger that resize event on the action of the opening of the tab, toggle, or accordion.

    I figured out how to add the visualize.render() to the click event of my tab, toggle, accordion plugin and now it works just fine.

    I’m using a plugin called Whistles and it took a modification to whistles.js to make it work.

    I simply had to add an else statement and insert visualize.render()

    Since I’m only adding the visualizer to my toggles I only made the adjustment there, but I’m sure it would work on tabs and accordions as well.

    Here is my new minimized.

    jQuery(document).ready(function(){jQuery(".whistles-tabs .whistle-content").hide(),jQuery(".whistles-tabs .whistle-content:first-child").show(),jQuery(".whistles-tabs-nav :first-child").attr("aria-selected","true"),jQuery(".whistles-tabs-nav li a").click(function(t){t.preventDefault();var e=jQuery(this).attr("href");jQuery(this).parents(".whistles-tabs").find(".whistle-content").hide(),jQuery(this).parents(".whistles-tabs").find(e).show(),jQuery(this).parents(".whistles-tabs").find(".whistle-title").attr("aria-selected","false"),jQuery(this).parent().attr("aria-selected","true")}),jQuery(".whistles-toggle .whistle-content").hide(),jQuery(".whistles-toggle .whistle-title").click(function(){jQuery(this).attr("aria-selected","true"),jQuery(this).next(".whistle-content").slideToggle("slow",function(){jQuery(this).is(":visible")?visualizer.render():jQuery(this).prev().attr("aria-selected","false")})}),jQuery(".whistles-accordion .whistle-content").hide(),jQuery(".whistles-accordion .whistle-content:first-of-type").show(),jQuery(".whistles-accordion .whistle-title:first-of-type").attr("aria-selected","true"),jQuery(".whistles-accordion .whistle-title").click(function(){jQuery(this).parents(".whistles-accordion").find(".whistle-content").not(this).slideUp("slow",function(){jQuery(this).is(":visible")||jQuery(this).prev().attr("aria-selected","false")}),jQuery(this).next(".whistle-content:hidden").slideDown("slow",function(){jQuery(this).parents(".whistles-accordion").find(".whistle-content").not(this).slideUp("slow"),jQuery(this).is(":visible")||jQuery(this).prev().attr("aria-selected","false")}),jQuery(this).attr("aria-selected","true")})});

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Chart not loading fully inside tabs’ is closed to new replies.