Show chart in tab

HTML

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/light.js"></script>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
    <li ><a href="#tab1" role="tab" data-toggle="tab">Tab 1</a>
    </li>
    <li><a href="#tab2" role="tab" data-toggle="tab">Tab 2</a>
    </li>
    <li class="active"><a href="#tab3" role="tab" data-toggle="tab" data-chart>Chart</a>
    </li>
    <li><a href="#tab4" role="tab" data-toggle="tab">Tab 3</a>
    </li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
    <div class="tab-pane active" id="tab1">...</div>
    <div class="tab-pane" id="tab2">...</div>
    <div class="tab-pane" id="tab3">
        <div id="chartdiv"></div>
    </div>
    <div class="tab-pane" id="tab4">...</div>
</div>

CSS

#chartdiv {
    width : 100%;
    height : 500px;
}

JavaScript

// OBSERVE TAB CHANGE
jQuery(".nav-tabs a").on("shown.bs.tab", function () {
    var data = jQuery(this).data();
    if (data.chart !== undefined) {
        chart.validateSize();
    }
});
// CREATE CHART
var chart = AmCharts.makeChart("chartdiv", {
    "type": "serial",
        "theme": "light",
        "pathToImages": "http://www.amcharts.com/lib/3/images/",
        "dataDateFormat": "YYYY-MM-DD",
        "valueAxes": [{
        "id": "v1",
            "axisAlpha": 0,
            "position": "left"
    }],
        "graphs": [{
        "id": "g1",
            "bullet": "round",
            "bulletBorderAlpha": 1,
            "bulletColor": "#FFFFFF",
            "bulletSize": 5,
            "hideBulletsCount": 50,
            "lineThickness": 2,
            "title": "red line",
            "useLineColorForBulletBorder": true,
            "valueField": "value"
    }],
        "chartScrollbar": {
        "graph": "g1",
            "scrollbarHeight": 30
    },
        "chartCursor": {
        "cursorPosition": "mouse",
            "pan": true,
            "valueLineEnabled": true,
            "valueLineBalloonEnabled": true
    },
        "categoryField": "date",
        "categoryAxis": {
        "parseDates": true,
            "dashLength": 1,
            "minorGridEnabled": true,
            "position": "top"
    },
    exportConfig: {
        menuRight: '20px',
        menuBottom: '50px',
        menuItems: [{
            icon: 'http://www.amcharts.com/lib/3/images/export.png',
            format: 'png'
        }]
    },
        "dataProvider": [{
        "date": "2012-07-27",
            "value": 13
    }, {
        "date": "2012-07-28",
            "value": 11
    }, {
        "date": "2012-07-29",
            "value": 15
    }, {
        "date": "2012-07-30",
            "value": 16
    }, {
        "date": "2012-07-31",
            "value": 18
    }, {
        "date": "2012-08-01",
            "value": 13
    }, {
        "date": "2012-08-02",
           ...