Question

I am trying to display a javascript chart inside of a jQuery togglable tab (using Ruby on Rails and bootstrap-tab.js). The chart displays fine if it is outside of the tab, but does not display inside of the tab. I’m sure I am overlooking a very simple thing, but I have been struggling with this one.

My view code:

 <ul class="nav nav-tabs">
 <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
 <li><a href="#graph" data-toggle="tab">Graph</a></li>
 </ul>

 <div class="tab-content">
 <div class="tab-pane active" id="home">...</div>
 <div class="tab-pane" id="graph">
 <div id="chartdiv" style="width: 100%; height: 400px;"></div>
 </div>

Javascript code:

I’ve tried this:

 <script type="text/javascript">
 $(function() {
 $ ('a#graph').click(function(){

        var chart;

        var chartData = [{
            country: "USA",
            visits: 4025
        }, {
            country: "Poland",
            visits: 328
        }];

        AmCharts.ready(function () {
            // SERIAL CHART
            chart = new AmCharts.AmSerialChart();
            chart.dataProvider = chartData;
            chart.categoryField = "country";
            chart.startDuration = 1;

            // AXES
            // category
            var categoryAxis = chart.categoryAxis;
            categoryAxis.labelRotation = 90;
            categoryAxis.gridPosition = "start";

            // GRAPH
            var graph = new AmCharts.AmGraph();
            graph.valueField = "visits";
            graph.balloonText = "[[category]]: [[value]]";
            graph.type = "column";
            graph.lineAlpha = 0;
            graph.fillAlphas = 0.8;
            chart.addGraph(graph);

            chart.write("chartdiv");
           });
         });
       });
    </script>

and this:

    <script type="text/javascript">

        var chart;

        var chartData = [{
            country: "USA",
            visits: 4025
        }, {
            country: "Poland",
            visits: 328
        }];

        AmCharts.ready(function () {
            // SERIAL CHART
            chart = new AmCharts.AmSerialChart();
            chart.dataProvider = chartData;
            chart.categoryField = "country";
            chart.startDuration = 1;

            // AXES
            // category
            var categoryAxis = chart.categoryAxis;
            categoryAxis.labelRotation = 90;
            categoryAxis.gridPosition = "start";

            // GRAPH
            var graph = new AmCharts.AmGraph();
            graph.valueField = "visits";
            graph.balloonText = "[[category]]: [[value]]";
            graph.type = "column";
            graph.lineAlpha = 0;
            graph.fillAlphas = 0.8;
            chart.addGraph(graph);

            chart.write("chartdiv");
           });
         });
       });
    </script>

Any help or pointers would be greatly appreciated.

Answer 1

This blog post details how to display a chart inside a tab or other dynamic page elements:
http://www.amcharts.com/tutorials/displaying-charts-in-tabs-or-other-dynamic-page-elements/