Listener created on mouseover for first graph also listen the mouseover events of 2nd & 3rd graph. [2nd & 3rd graph is inside the tooltip of 1st graph in two tab format]. Can anyone help here? it should listen event only for 1st graph
20 views
Skip to first unread message
Akshay Jade
Mar 23, 2016, 6:32:38 AM3/23/16
to Google Visualization API
<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>
Reply all
Reply to author
Forward
0 new messages