Skip to content

Instantly share code, notes, and snippets.

@gueryacine

gueryacine/chartistjs tab debug probleme

Last active December 6, 2016 17:09
Show Gist options
  • Save gueryacine/e112e05e32160a1f710074b722a70a25 to your computer and use it in GitHub Desktop.
Save gueryacine/e112e05e32160a1f710074b722a70a25 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
chartistjs tab debug probleme
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
<link href="http://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" rel="stylesheet" type="text/css" />
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation" ><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#hey" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<div class="wrapper">
This one is displayed right away
<div class="ct-chart ct-chart-1"></div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="profile">
<div class="wrapper">
This one appears later, and doesn't display the chart
<div class="ct-chart profile"></div>
</div></div>
<div role="tabpanel" class="tab-pane" id="hey">
<div class="wrapper">
This one appears later, and doesn't display the chart2
<div class="ct-chart hey"></div>
</div></div>
</div>
</div>
</div>
<script>
new Chartist.Bar('.ct-chart-1', {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
series: [
[5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8]
]
});
new Chartist.Bar('.profile', {
labels: ['test', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
series: [
[5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8]
]
});
new Chartist.Bar('.hey', {
labels: ['test', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
series: [
[5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8]
]
});
$("li").on("click",(function() {
var myTruncatedString = "."+$(this).find("a").attr("href").substring(1,$(this).find("a").attr("href").length);
test(myTruncatedString)
}));
function test(myTruncatedString)
{
setTimeout(function(){
document.querySelector(myTruncatedString).__chartist__.update();
},0);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment