WordPress.org

Forums

Visualizer
Chart not loading fully inside tabs (9 posts)

  1. andrewsj
    Member
    Posted 1 year ago #

    Greetings,

    Thank you very much for this awsome plugin.
    I'm have inserted the grapgh into different tabs as here - http://goo.gl/UYb3tA 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.

    https://wordpress.org/plugins/visualizer/

  2. madpixels
    Member
    Plugin Author

    Posted 1 year ago #

    Hi there! The link shows 404 page. Can you fix it and show real example?

  3. andrewsj
    Member
    Posted 1 year ago #

    Sorry, please have a look now :)

  4. andrewsj
    Member
    Posted 1 year ago #

    Hi there, any luck?

  5. madpixels
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  6. andrewsj
    Member
    Posted 1 year ago #

    Thank you ^_^

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

  7. brightestspark
    Member
    Posted 10 months ago #

    I have the same issue and I see another person has recently asked how to do this. http://wordpress.org/support/topic/loading-charts-into-tabs/

    Can you pls advise.

  8. mhvalentcffp
    Member
    Posted 8 months ago #

    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.

  9. mhvalentcffp
    Member
    Posted 8 months ago #

    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")})});

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Visualizer
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic