简体   繁体   中英

Google Charts Custom Tooltip - Generating the JSON from PHP (accessing mySQL Server)

I'm using the Google Charts to plot daily build completion times (x-axis: date-of-build as string, y-axis: build-completion-time as number); the data is retrieved from a mySQL database with a PHP script that then encodes into JSON.

Because I have plotted the build completion times as a number (decimal format), I want to customize the tooltip such that when a viewer hovers over it, they see a formatted time (and some string info) (12:34am, etc.) as opposed to the plotted decimal (12.5, etc.).

I know you can create a tooltip column with the code below if you are passing the row data directly from client side,

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

... but I'm not sure how to get the right JSON format for the tooltip column if I'm encoding JSON from the php script as below:

$table['cols'] = array
(
    array('label' => 'Day', 'type' => 'string'),
    array('label' => 'Arrival Time', 'type' => 'number'),
    array('label' => 'Expected Time', 'type' => 'number'),
);


while($row = mysql_fetch_array($result)) 
{ 
// some data parsing
        $temp = array();
        $temp[] = array('v' => $row['current_formatted']);
        //$temp[] = array('v' => $time_units_splited[0]);
        $temp[] = array('v' => $time_in_decimal);
        $temp[] = array('v' => $time_expected_in_decimal);
        $rows[] = array('c' => $temp);
}
    $table['rows'] = $rows;
    echo json_encode($table);

To be more specifically, I'm not sure how to set up the column array in PHP. It's certainly not:

array('label' => 'tooltip', 'type' => 'source'), ...

JSON is as per below at the moment:

{"cols":[{"label":"Day","type":"string"},{"label":"Arrival Time","type":"number"},{"label":"Expected Time","type":"number"}],"rows":[{"c":[{"v":"22\/08\/13"},{"v":"1.19"},{"v":"1.00"}]},{"c":[{"v":"26\/08\/13"},{"v":"3.01"},{"v":"1.00"}]},{"c":[{"v":"27\/08\/13"},{"v":"2.30"},{"v":"1.00"}]},{"c":[{"v":"28\/08\/13"},{"v":"2.37"},{"v":"1.00"}]},{"c":[{"v":"29\/08\/13"},{"v":"2.36"},{"v":"1.00"}]},{"c":[{"v":"30\/08\/13"},{"v":"2.40"},{"v":"1.00"}]},{"c":[{"v":"03\/09\/13"},{"v":"2.25"},{"v":"1.00"}]},{"c":[{"v":"04\/09\/13"},{"v":"2.33"},{"v":"1.00"}]},{"c":[{"v":"05\/09\/13"},{"v":"3.06"},{"v":"1.00"}]},{"c":[{"v":"06\/09\/13"},{"v":"3.29"},{"v":"1.00"}]},{"c":[{"v":"09\/09\/13"},{"v":"3.34"},{"v":"1.00"}]},{"c":[{"v":"10\/09\/13"},{"v":"3.41"},{"v":"1.00"}]},{"c":[{"v":"11\/09\/13"},{"v":"3.34"},{"v":"1.00"}]},{"c":[{"v":"12\/09\/13"},{"v":"3.33"},{"v":"1.00"}]}]}

Any help would be greatly appreciated, thanks!

to specify a tooltip via php to encode to JSON later you can use

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

As far as I know this will override the tooltip for the entire row and you mean to do that seeing you other comments

So your new code would look something like this:

$table['cols'] = array
(
  array('label' => 'Day', 'type' => 'string'),
  array('label' => 'Arrival Time', 'type' => 'number'),
  array('label' => 'Expected Time', 'type' => 'number'),
  array('label' => 'tooltip', 'type' => 'string', 'role' => 'tooltip')
);

Note that label is not the way to specify what role the column should have, this also applies if you wish to use roles such as Domain, Certainty and other google chart roles.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM