Working with bootstrap tabs

[rob2360]

I have ChartNew working well with multiple charts on one page. Want to split them up so that it is one chart per bootstrap tab. When I do this each chart is just a blank canvas.

Code snippit is below. Think it is to do with the tab not being visible at the time of creation but not sure best way to resolve.

<ul class="nav nav-tabs">
  <li><a data-toggle="tab" href="#Discount_Profile">Discount Profile</a></li>
  <li><a data-toggle="tab" href="#Premium_Profile">Premium Profile</a></li>
</ul>
<div class="tab-content">
  <div id="Discount_Profile" class="tab-pane">
    <script src='/static/plugins/chartnew/ChartNew.js'></script>
    <script>
        $(function () {
        var linedata_Discount_Profile = {
            labels: ["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31","32","33","34","35","36","37","38","39","40","41","42","43","44","45","46","47","48","49","50"],
            datasets : [
            {
                title: "All Products",
                fillColor : "#5DA5DA",
                strokeColor : "#5DA5DA",
                pointColor : "#5DA5DA",
                pointStrokeColor : "#5DA5DA",
                data : [11,7,2,0,9,11,5,2,21,148,6,2,5,1,7,6,3,8,8,19,13,14,6,12,21,8,13,14,12,19,24,8,13,24,27,11,9,19,16,9,5,0,7,2,2,6,1,0,3,4],
            },
            ]
        };
        var barChartOptions = {
          responsive: true,
          maintainAspectRatio: true,          legend: true,
          datasetFill: false,
          showXLabels : 5,
          firstLabelToShow : -3,
          xAxisLabel: "Discount (%)",
          yAxisLabel: "Frequency",
          yAxisMinimumInterval: 1,          
          rotateLabels: 0,
          barValueSpacing: 2,
          xAxisLabelSpaceBefore: 0,
          xAxisSpaceAfter: 0,
          graphSpaceAfter: 0,
        };
        var chart_Discount_Profile = new Chart(document.getElementById("Discount_Profile").getContext("2d")).Bar
(linedata_Discount_Profile, barChartOptions);
    </script>
  </div>
  <div id="Premium_Profile" class="tab-pane">
    <script src='/static/plugins/chartnew/ChartNew.js'></script>
    <script>
        $(function () {
        var linedata_Premium_Profile = {
            labels: ["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20",
"21","22","23","24","25","26","27","28","29","30","31","32","33","34","35","36","37","38","39","40","41","42","4
3","44","45","46","47","48","49","50"],
            datasets : [
            {
                title: "All Products",
                fillColor : "#5DA5DA",                strokeColor : "#5DA5DA",
                pointColor : "#5DA5DA",
                pointStrokeColor : "#5DA5DA",
                data : [27,44,107,41,21,21,35,17,5,7,6,1,1,0,0,0,2,1,0,0,1,0,0,0,1,0,0,0,0,0,0,0,0,1,3,0,0,2,1,0
,0,0,0,0,0,0,0,0,0,0],
            },
            ]
        };
        var barChartOptions = {
          responsive: true,
          maintainAspectRatio: true,
          legend: true,
          datasetFill: false,
          showXLabels : 5,
          firstLabelToShow : -3,
          xAxisLabel: "Premium (%)",
          yAxisLabel: "Frequency",
          yAxisMinimumInterval: 1,
          rotateLabels: 0,
          barValueSpacing: 2,
          xAxisLabelSpaceBefore: 0,
          xAxisSpaceAfter: 0,
          graphSpaceAfter: 0,
        };

        var chart_Premium_Profile = new Chart(document.getElementById("Premium_Profile").getContext("2d")).Bar(linedata_Premium_Profile, barChartOptions);
        });
    </script>
  </div>
</div>

[davidsanders]

Can confirm I am doing the exact same thing at the moment.

Shifting the charts to a single tab-pane div generates the chart just fine. When the chart model is injected into the dom via js but something with the bootstrap tab-panes is preventing it from being generated.

Would love a fix.

[FVANCOP]

I've been working on it to find a solution... But not easy to fix it. The problem is the responsive option set to true. If you remove it, it works much better. A first draft is available in Samples\bootstrap.htm.

I check if I can fix it for responsive option.

[davidsanders]

Did some research and found a work around, granted it's dirty (more of a dodge than a solution). add this quick resize event to your jquery doc ready call. The below snippet works cross-browser:

 $('a[data-toggle=tab').on('shown.bs.tab', function (e) {
            if (document.createEvent) { // W3C
                var ev = document.createEvent('Event');
                ev.initEvent('resize', true, true);
                window.dispatchEvent(ev);
            } else { // IE
                document.fireEvent('onresize');
            }
        });

This is fired on the tab swap function and dispatches a resize event. I haven't tested it, but I believe this will only work if you are passing the responsive property in your chart options as a resize would not affect a non-responsive chart.

Try it out and let me know your mileage.

[davidsanders]

Updated snippet to be cross-browser.

[FVANCOP]

A new version of "Samples\bootstrap.html" is available; it use a new add-ins (Add-ins\bootstrap_ChartNew.js).

@rob2360 & @davidsanders : Can you try it and give your feed-back about this version ?

@davidsanders : thanks - you give me a good tips.