Charts - Radar Charts - Radar Chart Lines
Personally, I find a chart with fewer adornments easier to read.
We fill the line with custom points, each with a tooltip that shows the value and
the spoke name.
The radar axis max value is set to 150 and the setps value to 10.
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",
"400", "460", "9.0.0", "expressInstall.swf",
{"data-file":"gallery/radar-chart-steps.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/radar-chart-steps.php
<?php
include '../php-ofc-library/open-flash-chart.php';
$chart = new open_flash_chart();
$chart->set_title( new title( 'Radar Chart' ) );
$values = array(30,50,60,70,80,90,100,115,130,115,100,90,80,70,60,50);
$spokes = array('a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p');
$vals = array();
for( $i=0; $i<count($values); $i++ )
{
$tmp = new dot_value( $values[$i], '#D41E47' );
$tmp->set_tooltip("#val#<br>Spoke: {$spokes[$i]}");
$vals[] = $tmp;
}
$line = new line_hollow();
$line->set_values( $vals );
$line->set_halo_size( 0 );
$line->set_width( 2 );
$line->set_dot_size( 6 );
$line->set_colour( '#FBB829' );
$line->set_key( 'Hearts', 10 );
$line->loop();
// add the area object to the chart:
$chart->add_element( $line );
$r = new radar_axis( 150 );
$r->set_steps(10);
$r->set_colour( '#DAD5E0' );
$r->set_grid_colour( '#EFEFEF' );
$chart->set_radar_axis( $r );
$tooltip = new tooltip();
$tooltip->set_proximity();
$chart->set_tooltip( $tooltip );
$chart->set_bg_colour( '#ffffff' );
echo $chart->toPrettyString();
|
Adverts:
|