<script src="http://code.jquery.com/jquery-1.12.0.min.js";></script>
<script
src="http://code.jquery.com/jquery-migrate-1.2.1.min.js";></script>
<script type="text/javascript"
src="https://www.gstatic.com/charts/loader.js";></script>
<style>
.google-visualization-tooltip{
width: 500px !important;
height: 240px !important;
}
/*----- Tabs -----*/
.tabs {
width: 100%;
display: inline-block;
}
/*----- Tab Links -----*/
/* Clearfix */
.tab-links:after {
display: block;
clear: both;
content: '';
}
.tab-links li {
margin: 0px 5px;
float: left;
list-style: none;
}
.tab-links a {
padding: 9px 15px;
display: inline-block;
border-radius: 3px 3px 0px 0px;
background: #7FB5DA;
font-size: 16px;
font-weight: 600;
color: #4c4c4c;
transition: all linear 0.15s;
}
.tab-links a:hover {
background: #a7cce5;
text-decoration: none;
}
li.active a, li.active a:hover {
background: #fff;
color: #4c4c4c;
}
/*----- Content of Tabs -----*/
.tab-content {
padding: 15px;
border-radius: 3px;
background: #fff;
}
.tab {
display: none;
}
.tab.active {
display: block;
}
</style>
<div id="chart_div"></div>
<script type="text/javascript">
$(document).ready(function () {
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart);
});
$(document).on('click', '.tab-links a', function (e) {
try {
var currentAttrValue = $(this).attr('href');
$('.tabs ' + currentAttrValue).show().siblings().hide();
$(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
}
catch (e) { }
});
function customTooltip() {
return '<div class="tabs">' +
'<ul class="tab-links">' +
'<li class="active"><a
href="#tab1">Division</a></li>' +
'<li><a href="#tab2">FOPs</a></li>' +
'</ul>' +
'<div class="tab-content" disabled="disabled">' +
'<div id="tab1" class="tab active">' +
'<div id="barchartDivisions_values"
style="width: 400px; height: 100px;"></div>' +
'</div>' +
'<div id="tab2" class="tab">' +
'<div id="barchartFOPs_values"
style="width: 400px; height: 100px;"></div>' +
'</div>' +
'</div>' +
'</div>';
return '';
}
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'year');
data.addColumn({ type: 'string', role: 'annotation' });
data.addColumn('number', 'Saved');
data.addColumn({ type: 'string', role: 'tooltip', 'p': { 'html': true } });
data.addColumn('number', 'TBD');
data.addColumn({ type: 'string', role: 'tooltip', 'p': { 'html': true } });
data.addColumn('number', 'Lost');
data.addColumn({ type: 'string', role: 'tooltip', 'p': { 'html': true } });
data.addRows([
[2, '',
25, '<h1>Test1</h1>',
50, '<h1>Test2</h1>',
25, '<h1>Test3</h1>'],
]);
var width = 1000;
var height = 130;
// Set chart options
var options = {
tooltip: {
isHtml: true,
trigger: 'selection',
text: 'none'
},
series: {
0: { color: '#008000' },
1: { color: '#FF6600' },
2: { color: '#FF0000' }
},
isStacked: 'percent',
height: height,
legend: 'none',
width: width,
vAxis: {
baselineColor: '#fff',
gridlineColor: '#fff',
textPosition: 'none'
},
hAxis: {
baselineColor: '#fff',
gridlineColor: '#fff',
textPosition: 'none'
}
};
// Instantiate and draw our chart, passing in some options.
var mainChart = new
google.visualization.BarChart(document.getElementById('chart_div'));
mainChart.draw(data, options);
var widthOffset = width * (82 / 100);
google.visualization.events.addListener(mainChart, 'select', function (e) {
var selectedItem = mainChart.getSelection()[0];
if (selectedItem) {
var value = data.getValue(selectedItem.row, selectedItem.column);
if ($(".google-visualization-tooltip").length) {
var graphWidth = widthOffset * (value / 100);
var graphWidth = graphWidth / 2;
var tooltipPopUpWidth = 500 / 2;
if (selectedItem.column == 6) {
var left = 92 + (widthOffset * (data.getValue(0, 2) / 100)) + (widthOffset
* (data.getValue(0, 4) / 100)) + (graphWidth - tooltipPopUpWidth);
$('.google-visualization-tooltip').css("left", left);
drawBarChart('Lost');
}
else if (selectedItem.column == 4) {
var left = 92 + (widthOffset * (data.getValue(0, 2) / 100)) + (graphWidth -
tooltipPopUpWidth);
$('.google-visualization-tooltip').css("left", left);
drawBarChart('TBD');
}
else if (selectedItem.column == 2) {
var left = 92 + (graphWidth - tooltipPopUpWidth);
$('.google-visualization-tooltip').css("left", left);
drawBarChart('Saved');
}
$('.google-visualization-tooltip').css("left", left);
$('.google-visualization-tooltip').css("top", (height + 5));
$("div.google-visualization-tooltip").html("<div class='tabs'>" +
$('.tabs').html() + "</div>");
}
}
});
google.visualization.events.addListener(mainChart, 'onmouseover', function
(e) {
var selectedItem = mainChart.getSelection()[0];
if (selectedItem) {
var value = data.getValue(selectedItem.row, selectedItem.column);
if ($(".google-visualization-tooltip").length) {
var graphWidth = widthOffset * (value / 100);
var graphWidth = graphWidth / 2;
var tooltipPopUpWidth = 470 / 2;
if (selectedItem.column == 6) {
var left = 92 + (widthOffset * (data.getValue(0, 2) / 100)) + (widthOffset
* (data.getValue(0, 4) / 100)) + (graphWidth - tooltipPopUpWidth);
$('.google-visualization-tooltip').css("left", left);
drawBarChart('Lost');
}
else if (selectedItem.column == 4) {
var left = 92 + (widthOffset * (data.getValue(0, 2) / 100)) + (graphWidth -
tooltipPopUpWidth);
$('.google-visualization-tooltip').css("left", left);
drawBarChart('TBD');
}
else if (selectedItem.column == 2) {
var left = 92 + (graphWidth - tooltipPopUpWidth);
$('.google-visualization-tooltip').css("left", left);
drawBarChart('Saved');
}
$('.google-visualization-tooltip').css("left", left);
$('.google-visualization-tooltip').css("top", (height + 5));
$("div.google-visualization-tooltip").html("<div class='tabs'>" +
$('.tabs').html() + "</div>");
}
}
});
}
function drawBarChart(renewalStatus) {
var barColour = '#008000';
if (renewalStatus == 'Saved') { barColour = '#008000'; }
else if (renewalStatus == 'TBD') { barColour = '#FF6600'; }
else if (renewalStatus == 'Lost') { barColour = '#FF0000'; }
var dataDivisions = google.visualization.arrayToDataTable([
["Division", "MTC", { role: "style" }],
["Div1", 8.94, "#b87333"],
["Div2", 10.49, "silver"],
["Div3", 19.30, "gold"],
["Div4", 21.45, "color: #e5e4e2"]
]);
var viewDivisions = new google.visualization.DataView(dataDivisions);
viewDivisions.setColumns([1, 0, 2]);
var optionsDivisions = {
title: "Division",
width: 470,
height: 150,
bar: { groupWidth: "55%" },
chartArea: { left: 120, top: 20 }
};
var chartDivision = new
google.visualization.BarChart(document.getElementById("barchartDivisions_values"));
chartDivision.draw(viewDivisions, optionsDivisions);
var dataFOPs = google.visualization.arrayToDataTable([
["FOP", "MTC", { role: "style" }],
["FOP1", 8.94, "#b87333"],
["FOP2", 10.49, "silver"],
["FOP3", 19.30, "gold"],
["FOP4", 21.45, "color: #e5e4e2"]
]);
var viewFOPs = new google.visualization.DataView(dataFOPs);
viewFOPs.setColumns([1, 0, 2]);
var optionsFOPs = {
title: "FOPs",
width: 470,
height: 150,
bar: { groupWidth: "55%" },
chartArea: { left: 120, top: 20 }
};
var chartFOPs = new
google.visualization.BarChart(document.getElementById("barchartFOPs_values"));
chartFOPs.draw(viewFOPs, optionsFOPs);
}
</script>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/97f3ed10-c3cd-4268-9db2-c4918abf478a%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
