google bubble chart how to add HTML tooltip

Question

I have a Google chart: bubble chart. I want to add a custom HTML tooltip, with the specified value relative to the point:

<div class="clearfix>
     <h3>Metric: []</h3>
     <h4>ID comes here: []</h4>
     <h4>X Axis Value comes here: []</h4>
     <h4>Y Axis Value comes here: []</h4>
     <h4>Volume comes here: []</h4>
</div>

Currently it shows a default tooltip, which is not arranged in the way i want. And I cannot edit the fields also.

I want to use Custom HTML tooltip, but sadly it is not supported by Google charts in bubble chart as of yet.

Any way to achieve the same.

MY CODE

JSFIDDLE Demo

<html>
<head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("visualization", "1", {
            packages: ["corechart"]
        });
        google.setOnLoadCallback(drawChart);

        function drawChart() {
            var data = google.visualization.arrayToDataTable([
["ID", "X Axis Value", "Y Axis Value", "Metric", "Volume"],
["Range: 2-5", 3, 2.5, "Value Provider", 300],
["Range: 2-5", 4, 2.5, "Third Provider", 239],
["Range: 3-8", 3, 7.4, "Second Provider", 344],
["Range: 5-8", 5, 7.3, "Value Provider", 324],
["Range: 2-10", 9, 2.32, "Third Provider", 765],
["Range: 2-5", 5, 3, "Value Provider", 342],
]);

            var options = {
                title: 'Range Volume',
                hAxis: {
                    title: 'X Axis'
                },
                vAxis: {
                    title: 'Y Axis'
                },
                bubble: {
                    textStyle: {
                        fontSize: 11,
                                                    color:'transparent'
                    }
                }
            };
            var chart = new google.visualization.BubbleChart(document.getElementById('chart_div'));
            chart.draw(data, options);
        }
    </script>
</head>

<body>
    <div id="chart_div" style="width: 100%; height: 90vh;"></div>
</body>

score 0 · Answer 1 · edited May 23 '17 at 11:52

Basically you need some kind of mousetracker to know where tooltip should be shown and you need two listeners like this:

google.visualization.events.addListener chart, 'onmouseover', mouseoverHandler
google.visualization.events.addListener chart, 'onmouseout', mouseoutHandler

and you should add id='tooltip' to your tooltip with css like:

#tooltip {
  display: none;
  position: absolute;
  padding: 10px;
  border: 1px solid #ddd;
  background: white;
  width: 350px;
  -webkit-box-shadow: 0 0 5px #ddd;
  -moz-box-shadow: 0 0 5px #ddd;
  box-shadow: 0 0 5px #ddd;
  z-index: 1;
}

javascript:

var $tooltip = $('#tooltip')

mouseoverHandler = function(event) {
  metric = data.getValue(event.row, 3);
  id = data.getValue(event.row, 0);
  xAxis = data.getValue(event.row, 1);
  yAxis = data.getValue(event.row, 2);
  volume = data.getValue(event.row, 4);
  $tooltip.find('h3').append(metric);
  $tooltip.css({
    top: y,
    left: x
  }).show();
};

mouseoutHandler = function() {
  $tooltip.hide();
};

x and y are your mouse cords taken from some kind of mouse tracker like: Javascript - Track mouse position.

title = data.getValue(event.row, 3); is line where you take data from your data from your chart and you have to insert this data into your tooltip the way you want it to be inserted. I hope it will help.

This doesn't explain how do i get row,column wise data what you are getting is just the title — Alex, May 30 '16 at 13:59
Now it should show how to do this with all your columns, I've edited my answer. — Szymon, May 30 '16 at 14:35

google bubble chart how to add HTML tooltip

1 Answers1