Charts - Radar Charts - Radar Chart Lines
For radar charts it is neccessary to set the line style to 'loop' so the first
and last points are connected. In the above example you can see that the gold
line has not had its loop attribute set.
The default tooltip is of no use with radar charts so we change its behaviour to
proximity.
This goes into the <head> of the page:
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-personalized-1.6rc2.min.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF(
"open-flash-chart.swf", "my_chart",
"100%", "100%", "9.0.0", "expressInstall.swf",
{"data-file":"gallery/radar-chart-lines.php"} );
$(document).ready(function(){
$("#resize").resizable();
});
</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/radar-chart-lines.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();
$chart->set_title( new title( 'Radar Chart' ) );
$line_1 = new line();
$line_1->set_values(array(3, 4, 5, 4, 3, 3, 2.5));
$line_1->set_default_dot_style( new s_hollow_dot('#FBB829', 4) );
$line_1->set_width( 1 );
$line_1->set_colour( '#FBB829' );
$line_1->set_tooltip( "Gold<br>#val#" );
$line_1->set_key( 'Mr Gold', 10 );
//$line_1->set_loop();
$line_2 = new line();
$line_2->set_values(array(2, 2, 2, 2, 2, 2, 2));
$line_2->set_default_dot_style( new s_star('#8000FF', 4) );
$line_2->set_width( 1 );
$line_2->set_colour( '#8000FF' );
$line_2->set_tooltip( "Purple<br>#val#" );
$line_2->set_key( 'Mr Purple', 10 );
$line_2->loop();
// add the area object to the chart:
$chart->add_element( $line_1 );
$chart->add_element( $line_2 );
$r = new radar_axis( 5 );
$r->set_colour( '#DAD5E0' );
$r->set_grid_colour( '#DAD5E0' );
$labels = new radar_axis_labels( array('Zero','','','Middle','','High') );
$labels->set_colour( '#9F819F' );
$r->set_labels( $labels );
$spoke_labels = new radar_spoke_labels(
array(
'Strength',
'Smarts',
'Sweet<br>Tooth',
'Armour',
'Max Hit Points',
'???',
'Looks Like a Monkey') );
$spoke_labels->set_colour( '#9F819F' );
$r->set_spoke_labels( $spoke_labels );
$chart->set_radar_axis( $r );
$tooltip = new tooltip();
$tooltip->set_proximity();
$chart->set_tooltip( $tooltip );
$chart->set_bg_colour( '#ffffff' );
echo $chart->toPrettyString();
|
|
