Bootstrap Tab Not Loading Content

Question

I have the following problem, I'm making an application in Visual Studio 2013, and have used Bootstrap 3 for this, I have a Master Page with the libraries and I have the following page that loads the Content of the page.

I'm trying to display graphics in 3 Tabs, however only shows me the graph of the active panel and not load others.

Do not know what else to do, I understand that the problem is related with Bootstrap and can not find documentation of how fix it. If you were using Morris.js could use the Redraw function, however I am using DevExpress Charts

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <script src="Scripts/js/knockout-3.0.0.js"></script>
    <script src="Scripts/js/globalize.min.js"></script>
    <script src="Scripts/js/dx.chartjs.js"></script>
    <div class="container">
        <div class="row">
            <div class="col-md-5">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title">Tab Panel<span class="badge pull-right">Area 500</span></h3>
                    </div>
                    <div class="panel-body">
                        <script type="text/javascript">
                            $(function () {
                                var dataSource = [
                                                    { country: "Russia", area: 12 },
                                                    { country: "Canada", area: 7 },
                                                    { country: "USA", area: 7 },
                                                    { country: "China", area: 7 },
                                                    { country: "Brazil", area: 6 },
                                                    { country: "Others", area: 55 }
                                ];

                                $("#chartTab1").dxPieChart({
                                    dataSource: dataSource,
                                    series: [
                                        {
                                            argumentField: "country",
                                            valueField: "area",
                                            label: {
                                                visible: true,
                                                connector: {
                                                    visible: true,
                                                    width: 1
                                                }
                                            }
                                        }
                                    ],
                                    title: "Area of Countries"
                                });
                            })
                        </script>
                        <script type="text/javascript">
                            $(function () {
                                var dataSource = [
                                                    { country: "Russia", area: 12 },
                                                    { country: "Canada", area: 7 },
                                                    { country: "USA", area: 7 },
                                                    { country: "China", area: 7 },
                                                    { country: "Brazil", area: 6 },
                                                    { country: "Others", area: 55 }
                                ];

                                $("#chartTab2").dxPieChart({
                                    dataSource: dataSource,
                                    series: [
                                        {
                                            argumentField: "country",
                                            valueField: "area",
                                            label: {
                                                visible: true,
                                                connector: {
                                                    visible: true,
                                                    width: 1
                                                }
                                            }
                                        }
                                    ],
                                    title: "Area of Countries"
                                });
                            })
                        </script>
                        <script type="text/javascript">
                            $(function () {
                                var dataSource = [
                                                    { country: "Russia", area: 12 },
                                                    { country: "Canada", area: 7 },
                                                    { country: "USA", area: 7 },
                                                    { country: "China", area: 7 },
                                                    { country: "Brazil", area: 6 },
                                                    { country: "Others", area: 55 }
                                ];

                                $("#chartTab3").dxPieChart({
                                    dataSource: dataSource,
                                    series: [
                                        {
                                            argumentField: "country",
                                            valueField: "area",
                                            label: {
                                                visible: true,
                                                connector: {
                                                    visible: true,
                                                    width: 1
                                                }
                                            }
                                        }
                                    ],
                                    title: "Area of Countries"
                                });
                            })
                        </script>

                        <ul class="nav nav-tabs" id="myTab">
                            <li class="active"><a href="#Tab1" data-toggle="tab">Tab1</a></li>
                            <li><a href="#Tab2" data-toggle="tab">Tab2</a></li>
                            <li><a href="#Tab3" data-toggle="tab">Tab3</a></li>
                        </ul>

                        <!-- Tab panes -->
                        <div class="tab-content">
                            <div class="tab-pane active" id="Tab1">
                                <div id="chartTab1"></div>
                            </div>
                            <div class="tab-pane" id="Tab2">
                                <div id="chartTab2"></div>
                            </div>
                            <div class="tab-pane" id="Tab3">
                                <div id="chartTab3"></div>
                            </div>
                        </div>

                        <script>
                            $('#myTab a').click(function (e) {
                                e.preventDefault();
                                $(this).tab('show');
                            })
                        </script>
                    </div>
                </div>
            </div>
        </div>
    </div>
</asp:Content>

Answer 1

you are using both the data-api and the programmatic api in your code. remove this script from your code

<script>
$('#myTab a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
})
</script>

your data-toggle s in your html will take care of your tabs.