Open Flash Chart

:: Home - Gallery - Line - Extra Tooltip Info

Info: Open Flash Chart 2 is out. Version 1.x and these pages will never disappear and the charts will continue working forever, but further development on 1.x has stopped. Take a look at version 2 here Open Flash Chart 2.

Gallery - Line - Extra Tooltip Info

Add extra tooltip info per data point.

Method: add_data_tip( $data, string $tip )

This will add a data point to the line object (or line_hollow or line_dot) along with some extra tooltip info.

You need to modify the tooltip string to display this extra tooltip info, the magic value is #tip#:

//
// NOTE: the extra tooltip info is on the second line
//       of the tooltip:
//
$g->set_tool_tip( '#x_label# [#val#]<br>#tip#' );

Note: you can also include <br> in the #tip#, so you can create your own multi-line tooltip for each data point (or bar in a bar chart) e.g:

// .... your code ....
$data_1->add_data_tip( rand(14,19), 'Title<br>Line 1<br>Line 2' );

// .... more code ....
$g->set_tool_tip( '#tip#' );

// .... more code and render (see example)

Create the flash object

<?php
include_once 'ofc-library/open_flash_chart_object.php';
open_flash_chart_object( 450, 300, 'http://'. $_SERVER['SERVER_NAME'] .'/open-flash-chart/gallery-data-51.php' );
?>

gallery-data-51.php

<?php

include_once( 'ofc-library/open-flash-chart.php' );

// generate some random data
srand((double)microtime()*1000000);

//
// NOTE: how we are filling 3 arrays full of data,
//       one for each line on the graph
//
$data_1 = new line( 2, '#9933CC' );
$data_1->key( 'Page views', 10 );

$data_2 = new line_hollow( 2, 5, '#CC3399' );
$data_2->key( 'Downloads', 10 );

$data_3 = new line_hollow( 2, 4, '#80a033' );
$data_3->key( 'Bounces', 10 );

for( $i=0; $i<12; $i++ )
{
  $data_1->add_data_tip( rand(14,19), '(Extra: '.$i.')' );
  $data_2->add_data_tip( rand(8,13), '(Extra: '.$i.')' );
  $data_3->add_data_tip( rand(1,7), '(Extra: '.$i.')' );
}


$g = new graph();
$g->title( 'Many data lines', '{font-size: 20px; color: #736AFF}' );

$g->data_sets[] = $data_1;
$g->data_sets[] = $data_2;
$g->data_sets[] = $data_3;

$g->set_tool_tip( '#x_label# [#val#]<br>#tip#' );

$g->set_x_labels( array( 'January','February','March','April','May','June','July','August','Spetember','October','November','December' ) );
$g->set_x_label_style( 10, '#000000', 0, 2 );

$g->set_y_max( 20 );
$g->y_label_steps( 4 );
$g->set_y_legend( 'Open Flash Chart', 12, '#736AFF' );
echo $g->render();
?>

To see the data produced : gallery-data-51.php, then 'view source'.

Help support the project:

Adverts:

AnyChart - flash charts, maps and dashboards