Hide/Show and Resize Issue with Am Charts

Question

I'm having trouble with a jQuery plugin called AmCharts. The issue I'm having is that I want it to be hidden when the site loads, but when a button is clicked it should be shown. My jQuery is all set up properly, but when the button is clicked the chart does not appear. At first. As soon as you click the button and then resize the window, the chart magically appears and stays. So it seems to be a bug of some kind, but I'm not proficient enough with jQuery yet to say for certain. Here's the jQuery code:

$("#button").show();
$("#chartdiv").hide();

$("#button").click(function(){
    $("#chartdiv").toggle();
});

var chart = AmCharts.makeChart("chartdiv", {
        "type": "pie",
        "theme": "none",
        "startEffect": "easeOutSine",
        "legend": {
            "markerType": "circle",
            "position": "bottom",
            "marginRight": 0,
            "autoMargins": false
        },
        labelsEnabled: false,
        "dataProvider": [{
            "pictures": "Stock",
            "total": 256.9
        }, {
            "pictures": "3rd Party",
            "total": 131.1
        }, {
            "pictures": "360 Spin",
            "total": 115.8
        }, {
            "pictures": "360 Detail",
            "total": 109.9
        }, {
            "pictures": "No Content",
            "total": 132
        }],
        "valueField": "total",
        "titleField": "pictures",
        "balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
        "exportConfig": {
            "menuTop": "0px",
            "menuItems": [{
                "icon": '/lib/3/images/export.png',
                "format": 'png'
            }]
        }
    });

Here's a working fiddle to see what I'm talking about. Any help would be appreciated!

Answer 1

AmCharts doesn't know how to measure its size if it's hidden.

You have to tell it to update the size explicitly using:

chart.handleResize();

The answer was taken from here: https://stackoverflow.com/a/22070739/478440

And here is an updated and working fiddle: http://jsfiddle.net/N3fpz/1/

Nonetheless take into account, as one of the other responses says, that it's not a complete solution, and can give you problems with other things such as margins or axis.