chart.JS in combination with Jquery Tabs

I do have a slight fight with chart.js in combination with Jquery tab sheets. If I use following code without the tabs, all shows up correctly, but with the use of tabs, the 2nd chart is not drawn. The canvas stays empty in the screen. Reversing the 2 charts makes again the second to disapear, su the chart data seem correct. What am I missing?

var shrchdata=['-6', '-5', '-4', '-3', '-2', '-1', '0', '+1', '+2', '+3', '+4', '+5', '+6'];
var shrchdegr=['287 ','113 ','110 ','108 ','109 ','109 ','109 ','279 ','291 ','286 ','285 ','285 '];
var StromingData = {
    title:    ['Stroming' ],
        labels:   ['-6', '-5', '-4', '-3', '-2', '-1', '0', '+1', '+2', '+3', '+4', '+5', '+6'],
        datasets: [
        {
            strokeColor : 'rgba(0,0,0,1)',
            pointColor  : 'rgba(0,0,0,1)',
            label:    'Gemiddeld (Coef 70)',
              data : [-0.55, 0.45, 0.75, 0.95, 1.30, 1.60, 1.00, -0.35, -1.05, -1.35, -1.25, -1.15]
},
        {
            strokeColor : 'rgba(255,0,0,1)',
            pointColor  : 'rgba(255,0,0,1)',
            label:    'Dode tij (Coef 45)',                  data : [-0.30, 0.60, 0.80, 1.00, 1.20, 1.20, 0.60, -0.40, -1.10, -1.20, -1.10, -1.00]
},
        {
            strokeColor : 'rgba(0,0,255,1)',
            pointColor  : 'rgba(0,0,255,1)',
            label:    'Sprijgtij (Coef 90)',                  data : [-0.80, 0.30, 0.70, 0.90, 1.40, 2.00, 1.40, -0.30, -1.00, -1.50, -1.40, -1.30]
}

    ]
    }
function showstroming (){

    var options = {legendTemplate : '<center><% for (var i=0; i<datasets.length; i++) { %>'
                   +'<span style="color:white; background-color:<%=datasets[i].strokeColor%>">'
                   +'<% if (datasets[i].label) { %><%= datasets[i].label %><% } %></span>&nbsp;&nbsp;&nbsp;&nbsp;'
                   +'<% } %></center>',
                   datasetFill : false,
                   bezierCurve: true,
                   responsive : false,
                   scaleOverride : true,
                   scaleSteps : 10,
                   scaleStepWidth : 0.5,
                   scaleStartValue : -2.5,

                   multiTooltipTemplate: function(v) {
                        var i=0;
                        for (i = 0; i <= 13; i++)
                        {
                                if (shrchdata[i] == v.label)
                                {
                                   if (v.datasetLabel.search('70')>=0)
                               {
                                        var id = '000'+shrchdegr[i];
                                    var last3 = id.substr(id.length - 4);
                                    var retval=v.value + 'Knots HW ' + v.label + 'H Direction ' + last3+ '�'
                                } else {
                                    var retval=v.value + 'Knots';
                                }
                                return retval;
                                }
                        }
                        return ' another.'; },


                    }
        var ctx = document.getElementById('StromingCanvas').getContext('2d');
    window.myBar = new Chart(ctx).Line(StromingData, options);
    document.getElementById('legendStr').innerHTML = myBar.generateLegend();
}
addLoadEvent(showstroming);


function showdiagram (){

var barChartData = {
    title: {
       text : 'Bodem'
    },
        labels : ['0-5 m.','15-40 m.','5-15 m.','> 40m.'],
    datasets : [        {                fillColor : 'rgba(213,7,26,0.5)',
                strokeColor : 'rgba(213,7,26,0.75)',
                highlightFill: 'rgba(213,7,26,0.8)',
                highlightStroke: 'rgba(213,7,26,1)',
                label : 'Rotsen',
                showInLegend: true,
                data : [20.00000,90.00000,80.00000,90.00000]},
    {                fillColor : 'rgba(58,58,58,0.50)',
                strokeColor : 'rgba(58,58,58,0.8)',
                highlightFill: 'rgba(58,58,58,0.8)',
                highlightStroke: 'rgba(58,58,58,1)',
                label : 'Zand',
                showInLegend: true,
                data : [80.00000,10.00000,20.00000,10.00000]} ]
}

var options = { legendTemplate : "<center><% for (var i=0; i<datasets.length; i++) { %>"
               +"<span style=\"background-color:<%=datasets[i].fillColor%>\">"
               +"<% if (datasets[i].label) { %><%= datasets[i].label %><% } %></span>&nbsp;&nbsp;&nbsp;&nbsp;"
               +"<% } %></center>",
               datasetFill : false

              };
var ctx = document.getElementById("Diagcanvas").getContext("2d");
        window.myBBar = new Chart(ctx).Radar(barChartData, options);

document.getElementById('legendDiv').innerHTML = myBBar.generateLegend();
}
addLoadEvent(showdiagram);
$(function() {
    $('#str-tab').tabs();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="str-tab" style="width: 750px;">
<ul>
        <li><a href="#str-tab-chart"><span>Bodemsamenstelling</span></a></li>
        <li><a href="#str-tab-stroming"><span>Stromingscurve</span></a></li>
        <li><a href="#str-tab-cursus"><span>Klik voor opleidingen</span></a></li>
</ul>
        <div id="str-tab-chart">
                <center>
                <canvas id="Diagcanvas" height="500" width="500"></canvas>
        <div id="legendDiv"></div>
                </center>
        </div>
        <div id="str-tab-stroming">
                <center>
                <canvas  title="Curve die de stroming in knopen (KNOTS) weergeeft, van 6 uur voor tot 6 uur na HW in VLISSINGEN." id="StromingCanvas" width="500" height="500"></canvas>
        <div id="legendStr"></div>
        <div id="chartjs-tooltip"></div>
                </center>
        </div>
        <div id="str-tab-cursus">
                <table style="margin: auto;" border="1">
            <tr><td>Intro-dive</td>
            <td width="35"><img src="whatever/checkbox_no.gif" /></td></tr><tr><td>Open Water&nbsp;(N1)</td>
            <td width="35"><img src="whatever/checkbox_no.gif" /></td></tr><tr><td>Advanced&nbsp;(N1)</td>
            <td width="35"><img src="whatever/checkbox_no.gif" /></td></tr><tr><td>Rescue&nbsp;(N2)</td>
            <td width="35"><img src="whatever/checkbox_no.gif" /></td></tr><tr><td>Specialties&nbsp;(N1)</td>
            <td width="35"><img src="whatever/checkbox_no.gif" /></td></tr>
        </table>
    </div>
</div>