Chart Elements - Tooltip - Tooltip Proximity
Choose the closest element to the mouse.
Also take a look at the radar charts as they
use this tooltip style.
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",
"350", "350", "9.0.0", "expressInstall.swf",
{"data-file":"gallery/tooltip-closest.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-closest.php
<?php
include '../php-ofc-library/open-flash-chart.php';
// also include the sugar (helper funtions)
include '../php-ofc-library/ofc_sugar.php';
$chart = new open_flash_chart();
$title = new title( date("D M d Y") );
$chart->set_title( $title );
//
// plot a wobbly circle
//
$s2 = new scatter( '#D600FF', 3 );
$s2->set_default_dot_style( new s_star('#8B1D55', 4) );
$v = array();
for( $i=0; $i<360; $i+=5 )
{
$r = rand( 3,5 );
$v[] = new scatter_value(
number_format(sin(deg2rad($i))*$r, 2, '.', ''),
number_format(cos(deg2rad($i))*$r, 2, '.', '') );
}
$s2->set_values( $v );
$chart->add_element( $s2 );
$x = new x_axis();
$x->set_range( -5, 5 );
$chart->set_x_axis( $x );
$y = new x_axis();
$y->set_range( -5, 5 );
$chart->add_y_axis( $y );
$tooltip = new tooltip();
//
// LOOK:
//
$tooltip->set_proximity();
//
//
//
$tooltip->set_stroke( 1 );
$tooltip->set_colour( "#000000" );
$tooltip->set_background_colour( "#ffffff" );
$chart->set_tooltip( $tooltip );
echo $chart->toPrettyString();
|
Adverts:
|