Modify c3.js table after deleting form "display: none" div

Question

So, I have a function to preload an element and use "display: none" for a hidden chart

<div class="col-sm-9 topTenWebCus" ></div> 

javscript:

 $(document).ready(function() { window.setTimeout(function(){ $(".topTenWebCus").css("display","none"); },200); }); 

And after that I got another onclick function to remove the screen : "none" css

 $("#buttonFire").click(function(){ $(".topTenWeb30d").css("display","none"); $(".topTenWebCus").css("display","block"); }); 

It works great. but it would not resize even if I have a bootstrap embed on the website.

I am going to use an internal function to execute .resize (), but it does not work, is there a better way to fix the resize problem?

Update 1:

The chart will resize if the user changes the zoom speed.

I’ll just find out one important thing: the chart displays correctly if the scaling factor is 100%, but if the user zooms out, the chart does not resize to the appropriate size.

Update2 I am trying to use .show () and .hide () but no luck

Solution example

 $("#buttonFire").click(function(){ $(".topTenWeb30d").css("display","none"); $(".topTenWebCus").css("display","block"); chart.flush() // chart depends on your chart name it could be anything like charrt112.flush() }); 

Answer 1

Your problem does not seem to be related to boorstrap. Check out jsFiddle , your exact code is great for displaying the correct column width after display.

Without additional information about which graphics library you are using, my guess is similar to most graphics libraries, and you get its size when it is first displayed. When the div is resized, you will have to manually call things like resize , redraw or referesh , etc. On your chart object, depending on your chart library.

If you can specify your chart library, or even better update my jsFiddle example to show your chart, it will be easier to figure out how you can update the chart.

Update for c3.js

After displaying your div again, try calling chart.flush(); and see if it changes correctly.

 $("#buttonFire").click(function(){ $(".topTenWeb30d").css("display","none"); $(".topTenWebCus").css("display","block"); chart.flush(); // use reference to your chart object }); 

If chart.flush() does not work, as a last option you can set the width and height of the chart dynamically based on your div sizes like this.

 chart.resize({ height: $(".topTenWebCus").innerHeight(), width: $(".topTenWebCus").innerWidth() }); 

Answer 2

I think you need this if I understand you correctly:

 $(window).resize(function(){ $("#buttonFire").trigger('click'); });