Tag Archives: tabs

Displaying charts in tabs

I have two amcharts on different tabs. A stock chart to be place on #chartdiv and a pie chart to be placed on #chartdivpie. This is how I solved my problem.

My custom css – to overwrite bootstrap –

#chartdivpie { width: 1138px; height: 500px; }
.tab-content .tab-pane {
   position: absolute;
   top: -9999px;
   left: -9999px;
   display: inline;
}
.tab-content .tab-pane.active {
    position: inherit !important;
}

JQuery call

$('#myTab a').click(function (e) {
      e.preventDefault()
        $(this).tab('show');
        chart.invalidateSize();
        chart.write('chartdiv');
    })

 

See the discussion here http://stackoverflow.com/questions/10013408/amcharts-doesnt-display-chart-for-initially-hidden-divs/22289182#22289182