---
{
	"title": "Charts and graphs - Specific test cases",
	"language": "en",
	"category": "Plugins",
	"description": "Specific test cases for testing purposes.",
	"tag": "charts",
	"parentdir": "charts",
	"altLangPrefix": "testing",
	"dateModified": "2015-03-10"
}
---

<ul>
	<li><a href="charts-en.html">Charts and graphs - Simple and easy</a></li>
	<li><a href="labelsandreferencevalue-en.html">Labels and reference values</a></li>
	<li><a href="custom-en.html">Customization, custom presets and multiple charts and graphs types</a></li>
	<li><a href="piecustom-en.html">Customizing pie charts</a></li>
	<li><a href="testing-en.html">Specific test cases (current)</a></li>
</ul>

<hr />

<section>
	<h2>100% pie charts</h2>
	<p>The expected result is a circle where the legend only contains one value. The <em>emphasis</em> text in the table caption should be cloned into the title of the chart (<code>&lt;figcaption&gt;</code>) and into the link title (<code>&lt;summary&gt;</code>) for viewing the table.</p>

	<p><code>&lt;table class=&quot;wb-charts wb-charts-pie table&quot;&gt;</code></p>

	<table class="wb-charts wb-charts-pie table">
		<caption>Table with one item <em>(100%)</em></caption>
		<thead>
			<tr>
				<td></td>
				<th>Value</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>Car</th>
				<td>125</td>
			</tr>
		</tbody>
	</table>
</section>

<section>
	<h2>Labels and reversed table parsing</h2>
	<p>The expected result is that both tables should produce the <strong>same chart or graph</strong> with the following text labels:</p>

	<ul>
		<li><em>External needs</em>, x-axis position 0 of 5</li>
		<li><em>Needs bypass</em>, x-axis position 3 of 5</li>
		<li><em>Internal needs</em>, x-axis position 5 of 5</li>
	</ul>

	<p><code>&lt;table class=&quot;wb-charts table&quot; data-wb-charts='{&quot;labelposition&quot;: 1, &quot;noencapsulation&quot;: true}'&gt;</code></p>

	<table class="wb-charts table" data-wb-charts='{"labelposition": 1, "noencapsulation": true}'>
		<caption>Number of pages by main purpose and audience</caption>
		<thead>
			<tr>
				<td rowspan="2"></td>
				<th colspan="2">External needs</th>
				<th colspan="2">Needs bypass</th>
				<th colspan="2">Internal needs</th>
			</tr>

			<tr>
				<th>Education</th>
				<th>Task</th>
				<th>Navigation</th>
				<th>Support</th>
				<th>Information</th>
				<th>Corporate</th>
			</tr>
		</thead>
		<tbody>
			<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>Buisness</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>
		</tbody>
	</table>

	<hr />

	<p><code>&lt;table class=&quot;wb-charts table&quot; data-wb-charts='{&quot;labelposition&quot;: 1, &quot;noencapsulation&quot;: true, &quot;reversettblparsing&quot;: true}'&gt;</code></p>

	<table class="wb-charts table" data-wb-charts='{"labelposition": 1, "noencapsulation": true, "reversettblparsing": true}'>
	<caption>Number of pages by main purpose and audience</caption>
		<thead>
			<tr>
				<td colspan="2"></td>
				<th>General</th>
				<th>Students</th>
				<th>Buisness</th>
				<th>Professional</th>
				<th>Lawyer</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th rowspan="2">External needs</th>
				<th>Education</th>
				<td>2</td>
				<td>2</td>
				<td>60</td>
				<td>46</td>
				<td>0</td>
			</tr>
			<tr>
				<th>Task</th>
				<td>0</td>
				<td>2</td>
				<td>10</td>
				<td>26</td>
				<td>2</td>
			</tr>
			<tr>
				<th rowspan="2">Needs bypass</th>
				<th>Navigation</th>
				<td>20</td>
				<td>1</td>
				<td>20</td>
				<td>5</td>
				<td>4</td>
			</tr>
			<tr>
				<th>Support</th>
				<td>4</td>
				<td>5</td>
				<td>90</td>
				<td>101</td>
				<td>0</td>
			</tr>
			<tr>
				<th rowspan="2">Internal needs</th>
				<th>Information</th>
				<td>100</td>
				<td>50</td>
				<td>50</td>
				<td>200</td>
				<td>300</td>
			</tr>
			<tr>
				<th>Corporate</th>
				<td>50</td>
				<td>0</td>
				<td>8</td>
				<td>142</td>
				<td>300</td>
			</tr>
		</tbody>
	</table>
</section>

<section>
	<h2>Pie charts and reversed table parsing</h2>
	<p>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.</p>

	<p><code>&lt;table class=&quot;wb-charts wb-charts-pie table&quot; data-wb-charts='{ &quot;height&quot;: 500, &quot;decimal&quot;: 1 }'&gt;</code></p>

	<table class="wb-charts wb-charts-pie table" data-wb-charts='{ "height": 500, "decimal": 1 }'>
		<caption>Number of pages with tasks as a main purpose per audience</caption>
		<colgroup><col /></colgroup>
		<colgroup>
			<col />
			<col />
			<col />
			<col />
			<col />
		</colgroup>
		<thead>
			<tr>
				<td></td>
				<th>General</th>
				<th>Students</th>
				<th>Buisness</th>
				<th>Professional</th>
				<th>Lawyer</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>Task</th>
				<td>0</td>
				<td>2</td>
				<td>10</td>
				<td>26</td>
				<td>2</td>
			</tr>
		</tbody>
	</table>

	<hr />

	<p>Please note that <code>&lt;colgroup&gt;</code> elements are required for creating the following pie charts.</p>

	<p><code>&lt;table class=&quot;wb-charts wb-charts-pie table&quot; data-wb-charts='{ &quot;height&quot;: 500, &quot;decimal&quot;: 1, &quot;reversettblparsing&quot;: true }'&gt;</code></p>

	<table class="wb-charts wb-charts-pie table" data-wb-charts='{ "height": 500, "decimal": 1, "reversettblparsing": true }'>
		<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>
		<tr>
			<th>General</th>
			<td>0</td>
		</tr>
		<tr>
			<th>Students</th>
			<td>2</td>
		</tr>
		<tr>
			<th>Buisness</th>
			<td>10</td>
		</tr>
		<tr>
			<th>Professional</th>
			<td>26</td>
		</tr>
		<tr>
			<th>Lawyer</th>
			<td>2</td>
		</tr>
	</table>

	<pre><code>&lt;caption&gt;Number of pages with tasks as a main purpose per audience&lt;/caption&gt;
&lt;colgroup&gt;&lt;col /&gt;&lt;/colgroup&gt;
&lt;colgroup&gt;&lt;col /&gt;&lt;/colgroup&gt;
&lt;tr&gt;
	&lt;td&gt;&lt;/td&gt;
	&lt;th&gt;Task&lt;/th&gt;
&lt;/tr&gt;</code></pre>
</section>