Charts and graphs - Simple and easy

Looking for WET v3.1?

WET v4.0 is now the current version. There is a new location for the current page in WET v3.1.

Default

<table class="wb-charts table">

Number of pages by main purpose and audience
Education Task Navigation Support Information Corporate
General 2 0 20 4 100 50
Students 2 2 1 5 50 0
Business 60 10 20 90 50 8
Professional 46 26 5 101 200 142
Lawyer 0 2 4 0 300 300

Area charts

<table class="wb-charts wb-charts-area table">

Number of pages by main purpose and audience
Education Task Navigation Support Information Corporate
General 2 0 20 4 100 50
Students 2 2 1 5 50 0
Business 60 10 20 90 50 8
Professional 46 26 5 101 200 142
Lawyer 0 2 4 0 300 300

Bar charts

<table class="wb-charts wb-charts-bar table">

Number of pages by main purpose and audience
Education Task Navigation Support Information Corporate
General 2 0 20 4 100 50
Students 2 2 1 5 50 0
Business 60 10 20 90 50 8
Professional 46 26 5 101 200 142
Lawyer 0 2 4 0 300 300

Pie charts

<table class="wb-charts wb-charts-pie table">

Number of pages by main purpose and audience
Education Task Navigation Support Information Corporate
General 2 0 20 4 100 50
Students 2 2 1 5 50 0
Business 60 10 20 90 50 8
Professional 46 26 5 101 200 142
Lawyer 0 2 4 0 300 300

Data table used

Number of pages by main purpose and audience
Education Task Navigation Support Information Corporate
General 2 0 20 4 100 50
Students 2 2 1 5 50 0
Business 60 10 20 90 50 8
Professional 46 26 5 101 200 142
Lawyer 0 2 4 0 300 300
View code 
<table class="table">
	<caption>Number of pages by main purpose and audience</caption>
	<tr>
		<td></td>
		<th>Education</th>
		<th>Task</th>
		<th>Navigation</th>
		<th>Support</th>
		<th>Information</th>
		<th>Corporate</th>
	</tr>
	<tr>
		<th>General</th>
		<td>2</td>
		<td>0</td>
		<td>20</td>
		<td>4</td>
		<td>100</td>
		<td>50</td>
	</tr>
	<tr>
		<th>Students</th>
		<td>2</td>
		<td>2</td>
		<td>1</td>
		<td>5</td>
		<td>50</td>
		<td>0</td>
	</tr>
	<tr>
		<th>Business</th>
		<td>60</td>
		<td>10</td>
		<td>20</td>
		<td>90</td>
		<td>50</td>
		<td>8</td>
	</tr>
	<tr>
		<th>Professional</th>
		<td>46</td>
		<td>26</td>
		<td>5</td>
		<td>101</td>
		<td>200</td>
		<td>142</td>
	</tr>
	<tr>
		<th>Lawyer</th>
		<td>0</td>
		<td>2</td>
		<td>4</td>
		<td>0</td>
		<td>300</td>
		<td>300</td>
	</tr>
</table>
Date modified: