Chart Elements - Tooltip - Tooltip Styles

Object: tooltip()

  • set_shadow( $shadow )
    Boolean, true or false.
  • set_stroke( $stroke )
    Number, stroke in pixels
  • set_colour( $colour )
    String, HTML HEX colour
  • set_background_colour( $bg )
    String, HTML HEX colour
  • set_title_style( $style )
    String, a css style
  • set_body_style( $style )
    String, a css style

This is the global tooltip style.

The tooltips are a little odd and I may change how they work in the future. But at the moment they have one or two strange rules. If there is a single line of text, the text is the body. If there are more than one lines of text, the first line is the title and the rest is the body. Yeah. Sorry about that ;-)

All chart types have some magical variables that you can put in the tooltip tip string. The most common is #val#, this sub-string gets replaced with the value of the element you are hovering over. So a tip string "Hello<br>val = #val#" becomes something like "Hello<br>val = 12". These magic values explained in the charts that have them.

A tooltip string can be set for each 'data set'. It can also be set per chart item, so you can have two bar charts, each with different tooltip strings. Each bar can also contain items that override the parents tooltip string with their own. So you can label points with extra info if you so need.

This goes into the <head> of the page:

<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF(
"open-flash-chart.swf", "my_chart", "550", "200",
"9.0.0", "expressInstall.swf",
{"data-file":"gallery/tooltip.php"} );
</script>
This writes the chart into a div with id="my_chart", right click and view source to see it in action, [the tutorials have more details]

gallery/tooltip.php
<?php

include '../php-ofc-library/open-flash-chart.php';

$title = new title( date("D M d Y") );

$bar = new bar();
$bar->set_values( array(9,8,7,6,5,4,3,2,1) );
$bar->set_tooltip( "Title Bar 1<br>val = #val#" );
$bar->set_colour( '#47092E' );

$bar2 = new bar();
$bar2->set_tooltip( "Spoon {#val#}<br>Title Bar 2" );
$bar2->set_colour( '#CC2A43' );

$vals = array();
$vals[] = 1;
$vals[] = 2;
$vals[] = 3;
$vals[] = 4;
$tmp = new bar_value(5);
$tmp->set_colour( '#000000' );
$tmp->set_tooltip( "Spoon {#val#}<br>Title Bar 2<br>Override bar 2 tooltip<br>Special data point" );
$vals[] = $tmp;
$vals[] = 6;
$vals[] = 7;
$vals[] = 8;
$vals[] = 9;

$bar2->set_values( $vals );

$t = new tooltip( 'Hello<br>val = #val#' );
$t->set_shadow( false );
$t->set_stroke( 5 );
$t->set_colour( "#6E604F" );
$t->set_background_colour( "#BDB396" );
$t->set_title_style( "{font-size: 14px; color: #CC2A43;}" );
$t->set_body_style( "{font-size: 10px; font-weight: bold; color: #000000;}" );

$chart = new open_flash_chart();
$chart->set_title( $title );
$chart->add_element( $bar );
$chart->add_element( $bar2 );
//
$chart->set_tooltip( $t );
//

echo $chart->toPrettyString();
To see the data produced : gallery/tooltip.php, then 'view source'.
Support This Project
Adverts:


Open Flash Chart logo by numb.me.uk. | Syntax highlights are by GeSHi