Difference between hiding a div initially and hiding it dynamically

Question!

I have a div that contains a pie chart, which shows the distribution of a particular statistic among cities. That was a bit unnecessary.

I want to show that pie only when Location is selected in my drop-down menu. But when I initially hide it and load it again, it doesn't fit to the div and overflows.

Here is the jsfiddle

$("#pie").hide(); // this line will be removed in second example

But when I initially show it and then hide and show again, there is no problem.

second fiddle

It is very annoying and I don't have any idea about this.



Answers
hide #pie after .highcharts

$(function(){
    $("#pie").highcharts({    
         //...
    });    
    $("#pie").hide();
});    

http://jsfiddle.net/nS5wp/5/



You need to give #pie a specific width, because highcharts is designed to fill the space it has.

#pie {
    width: 300px;
}

Fiddle

By : watson


This video can help you solving your question :)
By: admin