JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="tab-div" id="tabs">
<ul>
<li><a href="#tabs-1">Call Disposition</a></li>
<li><a href="#tabs-2">Agent Activity</a></li>
</ul>
<div id="tabs-1">
<div class="report-style" id="chartDipo"></div>
</div>
<div id="tabs-2">
<div class="report-style" id="chartMins"></div>
</div>
</div>
CSS
.tab-div {}
.report-style {
padding-bottom: 10px;
}
JavaScript
$(document).ready(function() {
$(function() {
$("#tabs").tabs();
});
google.charts.load('current', {
packages: ['bar']
});
google.charts.setOnLoadCallback(drawMaterial);
function drawMaterial() {
var data = google.visualization.arrayToDataTable([
['Call Disposition', 'Answered', 'No Answer', 'Busy', 'Failed'],
['1000', 4, 0, 2, 0],
['1001', 4, 2, 0, 0],
['1002', 6, 0, 0, 0]
]);
var options = {
height: 350,
chart: {
title: 'Agent Call Dispositions',
subtitle: 'Agent call states',
}
};
var chart1 = new google.charts.Bar(document.getElementById('chartDipo'));
chart1.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Call Disposition', 'Answered', 'No Answer', 'Busy', 'Failed'],
['1000', 4, 0, 2, 0],
['1001', 4, 2, 0, 0],
['1002', 6, 0, 0, 0]
]);
var options = {
height: 350,
chart: {
title: 'Agent Call Dispositions',
subtitle: 'Agent call states',
}
};
var chart1 = new google.charts.Bar(document.getElementById('chartMins'));
chart1.draw(data, options);
}
});