A radar chart (sort of)

Not quite your typical radar chart but hey ho. It still seems to represent the data very well, and in this case, it's easy to see the market share. Here, there are 5 values, hence 5 segments of equal angle. The magnitude of each data point is represented by how large the segment is. I think this represents market share more obviously than a simple pie.

Browser market share at the beginning of July 2008

	Microsoft Internet Explorer 7 (41%)
	Microsoft Internet Explorer 6 (37%)
	Mozilla Firefox (16%)
	Safari (3%)
	Other (3%)

This code drags in the Radar chart library:


<script type="text/javascript" src="RadarChart.js"></script>

The canvas tag:


<canvas id="myRadar" width="300" height="300" style="float: left">

    <span style="border: 1px solid black; color: red">

        [No canvas support]

    </span>

</canvas>

And this draws the graph:


<script type="text/javascript">

<!--

    radar = new RadarChart(document.getElementById('myRadar'), [41,37,16,3,3]);

    radar.Draw();

// -->

</script>

It doesn't draw the key. If you want that, you're on your own.

A basic example

A basic example is available here.

Download

You can download the code here.

Download RGraph - the HTML5 graphing library... Home ~ Downloads ~ FAQs ~ Search ~ Licensing

phpguru.org

Blog Categories

Me

Articles

PEAR components

PHP5

HTML5

PHP4

Javascript

C#

A radar chart (sort of)

A basic example

Download