Resize issue using JQuery Tabs

[tcodeuser]

Hi All.

I’m testing canvasjs charts and I’m trying to see how well they integrate with JQuery tabs. I am having some sizing issues when I put my canvasjs charts into the jquery tabs. I know this is related to the load order when using JQuery tabs, i.e., if the chart is rendered before the tab, then the chart can’t see any width/ height dimensions, therefore, uses the default settings.

I’ve read very similar posts to mine that are already on this forum, so apologies for posting something similar. However, I have tried to use the other posts to fix my problem, but to no avail.

I’ve included some of my code snippets below (unfortunately I’m unable to use JSFiddle in work). Please could someone help.

I have 3 tabs, and I have my charts in the 3rd tab. But when I click on the 3rd tab the charts do not have the size settings I have assigned in the DIV containers. However, when I put the charts in the 1st tab, they work fine. I also have a JQuery Datatable in the 2nd tab, but I don’t believe this is causing any trouble.

Many thanks for any help.

Javascript

var options1 = {
// chart options
};

var options2 = {
// chart options
};

                    var charts = [];
                    var charts2 = [];

                    $(function () {
                        $("#tabs").tabs()
                          .on('tabsactivate', function (event, ui) {
                              var index = ui.newTab.index();
                              //alert(index);
                              charts[index].render();
                              charts2[index].render();
                          });
                    });

                    var chart1 = new CanvasJS.Chart("chartContainer", options1);
                    var chart2= new CanvasJS.Chart("chartContainer2", options2);

                    chart1.render();
                    charts.push(chart1);

                    chart2.render();
                    charts2.push(chart2);

<div id="tabs">
    <ul style="font-size: 20px;">
        <li><a href="#tabs-1" data-tab="1">Info</a></li>
        <li><a href="#tabs-2" data-tab="2">Data</a></li>
        <li><a href="#tabs-3" data-tab="3">Charts</a></li>
    </ul>

    <!-- Start Tab 1 -->
    <div id="tabs-1" data-content="1">
        <p>info here</p>
    </div>
    <!-- End Tab 1 -->

    <!-- Start Tab 2 -->
    <div id="tabs-2" data-content="2">
                        <table id="data_table" class="table_a smpl_tbl">
                            <thead>
                                <tr style="font-size:small; font-weight: bold;">
                                    <td>Response</td>
                                    <td>Completed Date</td>
                                    <td></td>
                                </tr>
                            </thead>

                            <tfoot>
                                <tr>
                                    <th>Response</th>
                                    <th>Completed Date</th>
                                    <th></th>
                                </tr>
                            </tfoot>
                        </table>             
    </div>
    <!-- End Tab 2 -->

    <!-- Start tab 3-->
    <div id="tabs-3" data-content="3">

                        <div id="chartContainer" style="width: 100%; height: 370px;"></div><br />
                        <div id="chartContainer2" style="width: 100%; height: 400px;"></div>

    </div>
    <!-- End tab 3-->

</div>

[Vishwas R]

@tcodeuser,

ui.newTab.index() gives you the index of the current tab, which is 2 in this case. However you are trying to access charts[index] and charts2[index], i.e. charts[2] and charts2[2] which doesn’t exists as the length of both charts and charts2 is 1. Rendering chart1 and chart2 (or charts[0] and charts2[0]) on ‘tabsactivate’ should work fine in this case. Please take a look at this updated jsfiddle.

Still, if you are facing any issue please create a jsfiddle with sample data and share it with us so that we can understand your code better and help you out.

—
Vishwas R
Team CanvasJS

[tcodeuser]

Hi Vishwas

This has helped, thank you.