Search code examples
phpjavascripttooltipgoogle-visualizationbubble-chart

Customize Bubble chart's tooltip from Google Charts API


I'm trying to change the tooltip of the bubbles in the Bubble Chart from Google API.

The role:tooltip, which would solve my problem, doesn't work with this kind of charts.

Right now my bubble shows information about the values of the rows, which is correct according the documentation, but I only need that information to draw the chart and I need to show a string as the tooltip. This string is composed by some of the values, which I need to format.

Can this be done?

For the record I'm using PHP to serve the data through JSON to the Javascript and I'm using the latest API from google (https://www.google.com/jsapi).

This is my columns definition as they are right now:

$data['cols'][] = array('id' => 'ID', 'label' => 'ID', 'pattern' => "", 'type' => 'string');
$data['cols'][] = array('id' => 'Fecha', 'label' => 'Fecha', 'pattern' => "", 'type' => 'number');
$data['cols'][] = array('id' => 'h', 'label' => 'h', 'pattern' => "", 'type' => 'number');
$data['cols'][] = array('id' => 'stringRes', 'label' => 'Valor', 'pattern' => "", 'type' => 'string');
$data['cols'][] = array('id' => 'Resultado', 'label' => 'Resultado', 'pattern' => "", 'type' => 'number');

Thanks in advance!

EDIT:

[SOLUTION]

If someone is asking the same question, I solved my problem by just erasing the labels of the fields which I didn't want to show, and that was it!

I changed my columns model to this:

$data['cols'][] = array('id' => 'ID', 'label' => 'Fecha', 'pattern' => "", 'type' => 'string');
$data['cols'][] = array('id' => 'Fecha', 'label' => '', 'pattern' => "", 'type' => 'number');
$data['cols'][] = array('id' => 'h', 'label' => '', 'pattern' => "", 'type' => 'number');
$data['cols'][] = array('id' => 'stringRes', 'label' => 'Resultado', 'pattern' => "", 'type' => 'string');
$data['cols'][] = array('id' => 'Resultado', 'label' => '', 'pattern' => "", 'type' => 'number');

Thanks @jmac for giving some approach on my problem.


Solution

  • [SOLUTION]

    If someone is asking the same question, I solved my problem by just erasing the labels of the fields which I didn't want to show, and that was it!

    I changed my columns model to this:

    $data['cols'][] = array('id' => 'ID', 'label' => 'Fecha', 'pattern' => "", 'type' => 'string');
    $data['cols'][] = array('id' => 'Fecha', 'label' => '', 'pattern' => "", 'type' => 'number');
    $data['cols'][] = array('id' => 'h', 'label' => '', 'pattern' => "", 'type' => 'number');
    $data['cols'][] = array('id' => 'stringRes', 'label' => 'Resultado', 'pattern' => "", 'type' => 'string');
    $data['cols'][] = array('id' => 'Resultado', 'label' => '', 'pattern' => "", 'type' => 'number');
    

    Thanks @jmac for giving some approach on my problem.