Charts and graphs - Specific test cases
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.
- Charts and graphs - Simple and easy
- Labels and reference values
- Customization, custom presets and multiple charts and graphs types
- Customizing pie charts
- Thousands separator
- Custom preset functions
100% pie charts
The expected result is a circle where the legend only contains one value. The emphasis text in the table caption should be cloned into the title of the chart (<figcaption>) and into the link title (<summary>) for viewing the table.
<table class="wb-charts wb-charts-pie table">
| Value | |
|---|---|
| Car | 125 |
Labels and reversed table parsing
The expected result is that both tables should produce the same chart or graph with the following text labels:
- External needs, x-axis position 0 of 5
- Needs bypass, x-axis position 3 of 5
- Internal needs, x-axis position 5 of 5
<table class="wb-charts table" data-wb-charts='{"labelposition": 1, "noencapsulation": true}'>
| External needs | Needs bypass | Internal needs | ||||
|---|---|---|---|---|---|---|
| Education | Task | Navigation | Support | Information | Corporate | |
| General | 2 | 0 | 20 | 4 | 100 | 50 |
| Students | 2 | 2 | 1 | 5 | 50 | 0 |
| Buisness | 60 | 10 | 20 | 90 | 50 | 8 |
| Professional | 46 | 26 | 5 | 101 | 200 | 142 |
| Lawyer | 0 | 2 | 4 | 0 | 300 | 300 |
<table class="wb-charts table" data-wb-charts='{"labelposition": 1, "noencapsulation": true, "reversettblparsing": true}'>
| General | Students | Buisness | Professional | Lawyer | ||
|---|---|---|---|---|---|---|
| External needs | Education | 2 | 2 | 60 | 46 | 0 |
| Task | 0 | 2 | 10 | 26 | 2 | |
| Needs bypass | Navigation | 20 | 1 | 20 | 5 | 4 |
| Support | 4 | 5 | 90 | 101 | 0 | |
| Internal needs | Information | 100 | 50 | 50 | 200 | 300 |
| Corporate | 50 | 0 | 8 | 142 | 300 | |
Pie charts and reversed table parsing
The expecting result is the table produceds the same chart or graph. There is one exception where the width of both pie charts could be different.
<table class="wb-charts wb-charts-pie table" data-wb-charts='{ "height": 500, "decimal": 1 }'>
| General | Students | Buisness | Professional | Lawyer | |
|---|---|---|---|---|---|
| Task | 0 | 2 | 10 | 26 | 2 |
Please note that <colgroup> elements are required for creating the following pie charts.
<table class="wb-charts wb-charts-pie table" data-wb-charts='{ "height": 500, "decimal": 1, "reversettblparsing": true }'>
| Task | |
|---|---|
| General | 0 |
| Students | 2 |
| Buisness | 10 |
| Professional | 26 |
| Lawyer | 2 |
<caption>Number of pages with tasks as a main purpose per audience</caption>
<colgroup><col /></colgroup>
<colgroup><col /></colgroup>
<tr>
<td></td>
<th>Task</th>
</tr>- Date modified: