Chartjs-Allowing Chart.js to work with jQuery Tabs

by

0👍

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
<title>Untitled Document</title>
<style>
canvas{
        }
/***   tabs   ****/
.etabs { margin: 0;
padding-left:20%; }

.etabs li
{display:inline-block;
width:auto;
padding:0 3% 2% 3%;
text-align:center;

}
.tab { display: inline-block;
zoom:1;
display:inline;
background:url(../images/li_border.fw.png) no-repeat right; 
height:23px;

}
.tab a { font-size: 20px;
line-height: 2em;
display: block;
outline: none; 
color:#D80000;
font-size:20px;
text-decoration:none;
}
.tab a:hover { text-decoration: none; }
.tab.active { color:#D80000;

 position: relative; 
 border-color: #666; }

.tab a.active { 
color:#0085B2; }

.tab-container .panel-container { background: #fff;
border: solid #666 1px;
padding: 10px; 
-moz-border-radius: 0 4px 4px 4px; 
-webkit-border-radius: 0 4px 4px 4px;
}

/***   tabs   ****/
</style>
</head>

<body>

<div id="tab-container" class="tab-container">
<ul class='etabs'>
<li class='tab'><a href="#history">Chart</a></li>
<li class='tab'><a href="#business">Bar chart</a></li>
</ul>
<div id="history" class="heig">
<h1>bar chart</h1>
<canvas id="canvas" height="450" width="600"></canvas>

</div>
<div id="business" class="heig">
<h1>pie chart</h1>
<canvas id="canvaspie" height="450" width="450"></canvas>

</div>
</div>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="jquery.easytabs.js"></script>
<script src="Chart.js"></script>
<script>
$(document).ready(function(){ $('#tab-container').easytabs(); });
</script> 
<script>

var barChartData = {
labels : ["Pass","Fail"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
data : [65,0]
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
data : [0,47]
}
]

}

var myLine=new     Chart(document.getElementById("canvas").getContext("2d")).Bar(barChartData);
</script>
<script>

var pieData = [
            {
                value: 30,
                color:"#F38630"
            },
            {
                value : 50,
                color : "#E0E4CC"
            },
            {
                value : 100,
                color : "#69D2E7"
            }

        ];

var myPie = new Chart(document.getElementById("canvaspie").getContext("2d")).Pie(pieData);

</script>

</body>
</html>

0👍

I just posted an answer in a different related question in ChartJS charts not generating within tabs with example code and jsfiddle. I’m not using jquery.tabs but I was having the same problem with tabs I made myself. I realized the issue is that with display:none chartjs doesn’t know the size of the div to render the chart. The ^ fiddle makes use of two fixes actually: using jquery.hide()/show() instead and temporarily hiding the area with a cover while they render (which I found was necessary in large pages).

The trick is to hide each tab as soon as you render the chart. Again, using tabs I made myself but this should fix your issue too if you’re willing to adjust how you show/hide tabs.

The business (full code on the jsfiddle)

var ctx = document.getElementById('chart1').getContext('2d');
var chart1 = new Chart(ctx).Bar(data1);
$('#tab1').hide();

var ctx = document.getElementById('chart2').getContext('2d');
var chart2 = new Chart(ctx).Line(data2);
$('#tab2').hide();

$('#tab1_btn').on('click',function(){ 
    $('#tab1').show(); 
    $('#tab2').hide() 
})
$('#tab2_btn').on('click',function(){ 
    $('#tab1').hide(); 
    $('#tab2').show() 
})

0👍

This works for me. The trick is generate the chart when the tab activated.

var chartIsShow = false; 
$(function() {
    $( "#Tabs1" ).tabs({
        activate: function(event, ui) {
            if(chartIsShow === false) {
                var ctx = document.getElementById("chart").getContext("2d");
                window.myLine = new Chart(ctx).Line(chart_data,{ animation : false, responsive : true });
                chartIsShow = true;
            }
        }
    }); 
});

-1👍

download customized jquery-ui.js file and check minimum things (only tabs) and uncheck all other at http://jqueryui.com/download/ and include this js file instead of yours on this page

Leave a comment