Adding property in php datatable for google chart custom html tooltips

Question

I am trying to create custom html tooltips in my google chart by adding them into the datatable, right now my datatable is being created in PHP like this:

  $datatable = array('cols' => array(
 array('type' => 'string', 'role' => 'domain', 'label' => 'Month'),
 array('type' => 'string', 'role' => 'tooltip'), 
 array('type' => 'string', 'role' => 'domain', 'label' => 'Omzet'), 
 array('type' => 'number', 'label' => 'Omzet '.$jaar), 
 array('type' => 'number', 'label' => 'Omzet '.($jaar-1)), 
 array('type' => 'string', 'role' => 'domain', 'label' => 'Aantal'), 
 array('type' => 'number', 'label' => 'Aantal '.$jaar), 
 array('type' => 'number', 'label' => 'Aantal '.($jaar-1))
));

and filled like this:

$datatable['rows'][] = array('c' => array(
 array('v' => $monthname),
 array('v' => '<h1>custom</h1> tooltip '.$monthname),
 array('v' => 'Omzet '.$monthname),
 array('v' => $row['totaal']),
 array('v' => $omzet),
 array('v' => 'Aantal'),
 array('v' => $row['aantal']),
 array('v' => $aantal)
));

however for the datatable you can specify in Javascript for the google chart, you have to add something like

dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});

otherwise the tooltip would come out as plain text instead of html markup https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#customizing-html-content

which means I will have to somehow add the 'p' : { 'html' : true } property to my datatable

I have tried by editing it to

array('type' => 'string', 'role' => 'tooltip', 'p' => '{ html : true}'),

or even to

array('type' => 'string', 'role' => 'tooltip', 'html' => true),

but none of these seem to work and I can't find a way to do it on google either.

I hope i've given enough information to help come up with an answer, if there's anything more you need please let me know.

This is my first time posting a question here so please be nice (:

Answer 1

You were on the right track with array('type' => 'string', 'role' => 'tooltip', 'p' => '{ html : true}'),but you need to have an additional array for the 'html': true part.

It should look like array('type' => 'string', 'role' => 'tooltip', 'p' => array('html' => true));

I tried it out here: Link to test

Answer 2

dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});

That is in json format. So if I understand you right you just need to convert your array into json array. In PHP you can do that via json_encode function.

Answer 3

Alright i've managed to fix it, thing is I had to add it as an extra array element like so:

array('type' => 'string', 'role' => 'tooltip', 'p' => array('html' => true)),

this created JSON in the format that the Google chart acccepted to turn the tooltip into HTML formatted text.