<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script src="//www.jqueryscript.net/demo/Bar-Chart-jQuery-Graphite/graphite.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<br/><br/>
<div class="tabs">
<div class="tab-button-outer">
<ul id="tab-button">
<li><a href="#tab01">Summary</a></li>
<li><a href="#tab02">Clicks</a></li>
<li><a href="#tab03">Geo</a></li>
<li><a href="#tab04">Social</a></li>
</ul>
</div>
<div class="tab-select-outer">
<select id="tab-select">
<option value="#tab01">Tab 1</option>
<option value="#tab02">Tab 2</option>
<option value="#tab03">Tab 3</option>
<option value="#tab04">Tab 4</option>
</select>
</div>
<div id="tab01" class="tab-contents">
<h2>Tab 1</h2>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card mb">
<img class="card-img-top" src="http://www.placehold.it/286x180" alt="Card image cap">
<div class="card-body mb">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb">
<img class="card-img-top" src="http://www.placehold.it/286x180" alt="Card image cap">
<div class="card-body mb">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb">
<img class="card-img-top" src="http://www.placehold.it/286x180" alt="Card image cap">
<div class="card-body mb">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="tab02" class="tab-contents">
<div class="container" style="height: 300px;">
<div class="row my-2">
<script src="https://cdn.anychart.com/releases/8.0.0/js/anychart-base.min.js"></script>
<div id="container"></div>
</div>
</div>
</div>
<div id="tab03" class="tab-contents">
<h2>Geo</h2>
<div class="container">
<div class="row">
<div class="span5">
<table class="table" width="100%">
<thead>
<tr>
<th>Username</th>
<th>Date registered</th>
<th>Role</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Donna R. Folse</td>
<td>2012/05/06</td>
<td>Editor</td>
<td><span class="label label-success">Active</span>
</td>
</tr>
<tr>
<td>Emily F. Burns</td>
<td>2011/12/01</td>
<td>Staff</td>
<td><span class="label label-important">Banned</span></td>
</tr>
<tr>
<td>Andrew A. Stout</td>
<td>2010/08/21</td>
<td>User</td>
<td><span class="label">Inactive</span></td>
</tr>
<tr>
<td>Mary M. Bryan</td>
<td>2009/04/11</td>
<td>Editor</td>
<td><span class="label label-warning">Pending</span></td>
</tr>
<tr>
<td>Mary A. Lewis</td>
<td>2007/02/01</td>
<td>Staff</td>
<td><span class="label label-success">Active</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div id="tab04" class="tab-contents">
<h2>Social</h2>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card mb">
<img class="card-img-top" src="http://www.placehold.it/286x180" alt="Card image cap">
<div class="card-body mb">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb">
<img class="card-img-top" src="http://www.placehold.it/286x180" alt="Card image cap">
<div class="card-body mb">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb">
<img class="card-img-top" src="http://www.placehold.it/286x180" alt="Card image cap">
<div class="card-body mb">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
#container {
width: 100%;
height: 300px;
margin: 0;
padding: 0;
}
body {
font-family: 'Open Sans', sans-serif;
font-weight: 300;
}
.tabs {
max-width: 1000px;
margin: 0 auto;
padding: 0 20px;
}
#tab-button {
display: table;
table-layout: fixed;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
#tab-button li {
display: table-cell;
width: 20%;
}
#tab-button li a {
display: block;
padding: .5em;
background: #eee;
border: 1px solid #ddd;
text-align: center;
color: #000;
text-decoration: none;
}
#tab-button li:not(:first-child) a {
border-left: none;
}
#tab-button li a:hover,
#tab-button .is-active a {
border-bottom-color: transparent;
background: #fff;
}
.tab-contents {
padding: .5em 2em 1em;
border: 1px solid #ddd;
}
.tab-button-outer {
display: none;
}
.tab-contents {
margin-top: 20px;
}
@media screen and (min-width: 768px) {
.tab-button-outer {
position: relative;
z-index: 2;
display: block;
}
.tab-select-outer {
display: none;
}
.tab-contents {
position: relative;
top: -1px;
margin-top: 0;
}
}
$(function() {
var $tabButtonItem = $('#tab-button li'),
$tabSelect = $('#tab-select'),
$tabContents = $('.tab-contents'),
activeClass = 'is-active';
$tabButtonItem.first().addClass(activeClass);
$tabContents.not(':first').hide();
$tabButtonItem.find('a').on('click', function(e) {
var target = $(this).attr('href');
$tabButtonItem.removeClass(activeClass);
$(this).parent().addClass(activeClass);
$tabSelect.val(target);
$tabContents.hide();
$(target).show();
e.preventDefault();
});
$tabSelect.on('change', function() {
var target = $(this).val(),
targetSelectNum = $(this).prop('selectedIndex');
$tabButtonItem.removeClass(activeClass);
$tabButtonItem.eq(targetSelectNum).addClass(activeClass);
$tabContents.hide();
$(target).show();
});
//Tab2
anychart.onDocumentReady(function() {
// set the data
var data = {
header: ["Name", "Death toll"],
rows: [
["Mon", 45],
["Tue", 67],
["Wed", 34],
["Chil", 100],
["Tian", 45],
["Arme", 67],
["Iran", 78]
]};
// create the chart
var chart = anychart.column();
// add data
chart.data(data);
// set the chart title
chart.title("The deadliest earthquakes in the XXth century");
// draw
chart.container("container");
chart.draw();
});
});
/* chart.js chart examples */
