Charts and graphs - Simple and easy
Looking for WET v3.1?
As of September 23, 2014, version 3.1 of the Web Experience Toolkit is no longer supported. The source code and documentation have been moved to the wet-boew-legacy repository.
- Labels and reference values
- Customization, custom presets and multiple charts and graphs types
- Customizing pie charts
- Thousands separator
- Custom preset functions
- Specific test cases
Default
<table class="wb-charts table">
| 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">
| 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">
| 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">
| 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
| 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: