JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tab.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://www.amcharts.com/lib/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/raphael.js"></script>
<div class="container-fluid">
<div class="row-fluid">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#1" data-toggle="tab">Section 1</a></li>
<li><a href="#2" data-toggle="tab">Section 2</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="1">
<div id="chartDivOne" class="chartdiv"></div>
</div>
<div class="tab-pane" id="2">
<div id="chartDivTwo" class="chartdiv"></div>
</div>
</div>
</div>
</div>
</div>
CSS
.chartdiv {
/* Ensure the div has some height so the charts actually get rendered */
height: 300px;
width: 400px;
}
JavaScript
var tabs = $('.tabbable').tab()
tabs.on('shown', function(e){
id = $(e.target).attr('href');
chartdiv_id = $(id).find('.chartdiv').attr('id');
doChart(chartdiv_id, true);
});
var chartData = [
{date: new Date(1332201600000), x: 5, y: 8, z: 2},
{date: new Date(1332288000000), x: 7, y: 6, z: 10}
];
var rendered = []
function doChart(target, includeZ) {
if( $.inArray(target, rendered) === -1 ){
rendered.push(target);
var chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.categoryField = "date";
chart.categoryAxis.parseDates = true;
var graph = new AmCharts.AmGraph();
graph.valueField = 'x';
chart.addGraph(graph);
graph = new AmCharts.AmGraph();
graph.valueField = 'y';
chart.addGraph(graph);
if(includeZ) {
graph = new AmCharts.AmGraph();
graph.valueField = 'z';
chart.addGraph(graph);
}
chart.write(target);
}
}
doChart("chartDivOne", false);