Add property to php datatable for google chart custom html tooltips
I am trying to create custom html hints in my google diagram by adding them to 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 in as follows:
$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 data you can specify in Javascript for google chart you need to add something like
dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
otherwise the tooltip will exit as plain text instead of html markup https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#customizing-html-content
which means I need to somehow add a 'p': {'html: true} property to my datatable
I tried to change it to
array('type' => 'string', 'role' => 'tooltip', 'p' => '{ html : true}'),
or even
array('type' => 'string', 'role' => 'tooltip', 'html' => true),
but none of them work and I can't find a way to do this on Google either.
Hopefully I've provided enough information to help me come up with an answer, if you need anything else please let me know.
This is my first question asking a question, so please be nice (:
source to share
You've been on the right track since array('type' => 'string', 'role' => 'tooltip', 'p' => '{ html : true}'),
, but you need to have an extra array for the part 'html': true
.
It should look like array('type' => 'string', 'role' => 'tooltip', 'p' => array('html' => true));
I tried it here: Test link
source to share
dataTable.addColumn ({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
It's in json format. So if I understand you correctly, you just need to convert the array to json array. In PHP, you can do this via json_encode .
source to share