FF Chartwell Radar Web Pro

cx 60 60 60 60	cx 60 60 60 60	cx 60 60 60 60
300px	400px	200px

Number of segments	3—10
Value of each segment	0—100
Grids

Example Code

In the head element of your HTML page, you need to add at least three links to JavaScript files. The first one is inside a conditional comment which makes only older versions of Internet Explorer load it:

<!--[if lt IE 9]>
	<!-- For compatibility with older IEs -->
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
	<script src="excanvas.min.js"></script>
<![endif]-->

The second link goes to the main FF Chartwell JavaScript module. It needs to be loaded before any of the seven modules for the different chart types are loaded:

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

After that, load all of the chart-specific modules that you want to use:

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

<!-- Load additional modules if you need them and have licenced them -->

<!-- <script src="chartwell_bars.min.js" type="text/javascript"></script> -->
<!-- <script src="chartwell_barsvertical.min.js" type="text/javascript"></script> -->
<!-- <script src="chartwell_lines.min.js" type="text/javascript"></script> -->
<!-- <script src="chartwell_pies.min.js" type="text/javascript"></script> -->
<!-- <script src="chartwell_rings.min.js" type="text/javascript"></script> -->
<!-- <script src="chartwell_rose.min.js" type="text/javascript"></script> -->

This line will make sure that Internet Explorer will render the page in its latest and greatest Standards Mode:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

The drawing function must be triggered when the page has finished loading:

<script>
	window.onload = function(){
		FFChartwell()
	}
</script>

If your site uses jQuery, trigger the drawing function like this instead:

<script>
	$(document).ready(function(){
		FFChartwell()
	})
</script>

That’s it for the head element. The chart data resides in a span element that is inside a div element in the body of your HTML page. Here’s a minimal example:

<div>
	<span class="chartwell radar">
		<span>61</span>
		<span>58</span>
		<span>47</span>
		<span>68</span>
		<span>95</span>
		<span>86</span>
		<span>52</span>
	</span>
</div>

This chart doesn’t look very nice yet. Colours are lacking. You can add them via class or style attributes to the span elements. Also, make the chart bigger:

.segment03 {
	color: #91b82e;
}

<!-- [...] -->

<div style="font-size: 400px;">
	<span class="chartwell radar">
		<span style="color: #c19485">61</span>
		<span style="color: #dccfb7">58</span>
		<span class="segment03">47</span>
		<span style="color: #5edc38">68</span>
		<span style="color: #4fe37e">95</span>
		<span style="color: #5fab9b">86</span>
		<span style="color: #77a6bb">52</span>
	</span>
</div>

If you want a grid behind your chart, you can add one of the grid codes as the first element of the chart:

.segment03 {
	color: #91b82e;
}

<!-- [...] -->

<div style="font-size: 400px;">
	<span class="chartwell radar">
		<span style="color: #d0d0d0">dx</span> <!-- grey ‘dx’ grid -->
		<span style="color: #c19485">61</span>
		<span style="color: #dccfb7">58</span>
		<span class="segment03">47</span>
		<span style="color: #5edc38">68</span>
		<span style="color: #4fe37e">95</span>
		<span style="color: #5fab9b">86</span>
		<span style="color: #77a6bb">52</span>
	</span>
</div>

So let’s put it all together. Here’s a complete example HTML page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
		<title>FF Chartwell Demo</title>
		<!--[if lt IE 9]>
			<!-- For compatibility with older IEs -->
			<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
			<script src="excanvas.min.js"></script>
		<![endif]-->
		<script src="chartwell.min.js" type="text/javascript"></script>
		<script src="chartwell_radar.min.js" type="text/javascript"></script>
		<script>
			// Trigger FF Chartwell drawing here.
			
			// Standard JavaScript trigger:
			window.onload = function(){
				FFChartwell()
			}
			
			// jQuery trigger. Use this instead if your site uses jQuery:
			//$(document).ready(function() {
			//	FFChartwell()
			//})
		</script>
	</head>
	<body>
		<h1>Chartwell Radar</h1>
		<div style="font-size: 400px;">
			<span class="chartwell radar">
				<span style="color: #d0d0d0">dx</span> <!-- grey ‘dx’ grid -->
				<span style="color: #c19485">61</span>
				<span style="color: #dccfb7">58</span>
				<span style="color: #91b82e">47</span>
				<span style="color: #5edc38">68</span>
				<span style="color: #4fe37e">95</span>
				<span style="color: #5fab9b">86</span>
				<span style="color: #77a6bb">52</span>
			</span>
		</div>
	</body>
</html>

Web FontFont Specimen

FF Chartwell Radar Web Pro

Parameters

Example Code