Skip to content

Instantly share code, notes, and snippets.

@FranciscoGutierrez

FranciscoGutierrez/histograms.html

Created August 2, 2018 13:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save FranciscoGutierrez/b7f83a0a07e15b498ee191f89f70a01a to your computer and use it in GitHub Desktop.
Save FranciscoGutierrez/b7f83a0a07e15b498ee191f89f70a01a to your computer and use it in GitHub Desktop.
Download ZIP
An example of how to add tooltips to histograms in Google Charts
Raw
histograms.html
<html>
<head>
<!-- This can be done with plain javascript, no jquery needed !-->
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
var mouseX;
var mouseY;
$(document).mousemove( function(e) {
mouseX = e.pageX;
mouseY = e.pageY;
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['a', 'b'],
[ 'a', '1' ] ,
[ 'b', '2' ] ,
[ 'c', '3' ] ,
]);
var options = {
title: 'Histogram of abc ratings',
legend: { position: 'none' },
width: 600,
height: 600,
hAxis: { title: 'abc',
minValue: 1,
maxValue: 7,
ticks: [1,2,3,4,5,6,7],
textPosition:'out'},
//gridlines: {count:'7'}},
vAxis: { title: '', ticks: []},
colors: ['#1abc9c'],
tooltip : { trigger: 'none' },
};
var chart = new google.visualization.Histogram(document.getElementById('chart_div'));
google.visualization.events.addListener(chart, 'onmouseover', selectHandler);
google.visualization.events.addListener(chart, 'onmouseout', function(){
$(".overcontainer").fadeOut();
});
chart.draw(data, options);
google.visualization.events.addListener(chart, 'ready', function(){
});
function selectHandler(a) {
var value = data.getValue(a.row, 0);
var level = data.getValue(a.row, 1);
console.log(value);
$(".overcontainer").remove();
$("#chart_div").append('<div class="overcontainer">'
+'<img src="'+value+'" />'
+'<span>Fascination Level: <b>'+level+'</b></span>'
+'</div>');
$('.overcontainer').css({'top':mouseY,'left':mouseX}).fadeIn('slow');
}
}
</script>
<style>
.overcontainer {
position: absolute;
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: 0px 0px 10px #c1c1c1;
background: white;
width: 150px;
padding: 10px;
}
.overcontainer img {
width: 70%;
}
.overcontainer span {
margin-top: 10px;
font-size: 12px;
font-style: italic;
font-family: Helvetica, Arial, sans-serif;
}
#chart_div {
position: relative;
}
</style>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment