jqplot: make chart appear in tab navigation + print view

Question

I have a tab navigation whose second tab contains a jqplot chart.

My goals:

• Displaying the chart in the second tab.

• Displaying both tabs in the print view with the chart.

Here comes my code:

HTML:

<nav>
    <ul>
        <li><a class="tablink" title="box-tab1" href="#">Tab 1</a></li>
        <li><a class="tablink" title="box-tab2" href="#">Tab 2</a></li>
    </ul>
</nav>

<br><br><br>

<div id="tabcon">
    <div class="tabbox" id="box-tab1"><p>Tab 1</p></div>
    <div class="tabbox" id="box-tab2"> <div id="chart"></div></div>
</div>

CSS:

.tabbox {
    display: none;
}

#box-tab1 {
    display: block;
}

JS:

var plot1 = $.jqplot ('chart', [[3,7,9,1,4,6,8,2,5]]);

 $('.tablink').click(function (e) {
                    var tabtitle = $(this).attr('title');
                    $('.tabbox').hide();
                    $('#' + tabtitle).show();

                    if (tabtitle == 'box-tab2') {
                        plot1.replot();
                    }

                    e.preventDefault();
 });

JSFIDDLE: http://jsfiddle.net/yGLmT/69/

How do I achieve my two goals?

Answer 1

Generally you should use techniques mentioned here:

http://www.jqplot.com/deploy/dist/examples/hiddenPlotsInTabs.html

But if you use Bootstrap 3, the events have different names than the documentation above says; correct ones are here:

http://getbootstrap.com/javascript/#tabs-events