oecd-simple-charts
Version:
D3 charting library for creating pearl charts, stacked bar charts and box plots
1,099 lines (381 loc) • 17.7 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>BoxPlot - Documentation</title>
<script src="scripts/prettify/prettify.js"></script>
<script src="scripts/prettify/lang-css.js"></script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/prettify.css">
<link type="text/css" rel="stylesheet" href="styles/jsdoc.css">
</head>
<body>
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger" class="navicon-button x">
<div class="navicon"></div>
</label>
<label for="nav-trigger" class="overlay"></label>
<nav>
<h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BoxPlot.html">BoxPlot</a><ul class='methods'><li data-type='method'><a href="BoxPlot.html#update">update</a></li></ul></li><li><a href="PearlChart.html">PearlChart</a><ul class='methods'><li data-type='method'><a href="PearlChart.html#update">update</a></li></ul></li><li><a href="StackedChart.html">StackedChart</a><ul class='methods'><li data-type='method'><a href="StackedChart.html#update">update</a></li></ul></li></ul>
</nav>
<div id="main">
<h1 class="page-title">BoxPlot</h1>
<section>
<header>
<h2>
BoxPlot
</h2>
<div class="class-description"><p>A BoxPlot component</p></div>
</header>
<article>
<div class="container-overview">
<h2>Constructor</h2>
<h4 class="name" id="BoxPlot"><span class="type-signature"></span>new BoxPlot<span class="signature">(options)</span><span class="type-signature"></span></h4>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="BoxPlot.js.html">BoxPlot.js</a>, <a href="BoxPlot.js.html#line55">line 55</a>
</li></ul></dd>
</dl>
<h5>Example</h5>
<pre class="prettyprint"><code>var BoxPlotExample = new OECDCharts.BoxPlot({
container: '#BoxPlotExample',
title: 'Box Plot',
extent: [350, 650],
step: 50,
renderInfoButton: true,
data: [
{
values: [480, 500, 530],
colors: ['#fddd5d', '#C7754E', '#900c3f'],
labelLeft: {
text: 'male low'
},
labelRight: {
text: 'male top'
}
},
{
values: [400, 520, 550],
colors: ['#aad356', '#61B77F', '#189aa8']
}
]
});</code></pre>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>options</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="description last"><p>The options object for the Box Plot</p>
<h6>Properties</h6>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>container</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last"><p>The DOM element to use as container</p></td>
</tr>
<tr>
<td class="name"><code>title</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last"><p>The title to display</p></td>
</tr>
<tr>
<td class="name"><code>extent</code></td>
<td class="type">
<span class="param-type">array</span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last"><p>The min and max value for generating the x-axis</p></td>
</tr>
<tr>
<td class="name"><code>step</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last"><p>Indicates the stepsize for the x-axis ticks</p></td>
</tr>
<tr>
<td class="name"><code>legend</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last"><p>HTML code for the legend</p></td>
</tr>
<tr>
<td class="name"><code>renderInfoButton</code></td>
<td class="type">
<span class="param-type">bool</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
<code>false</code>
</td>
<td class="description last"><p>The info-icon for the tooltip, renders after the title</p></td>
</tr>
<tr>
<td class="name"><code>fontSize</code></td>
<td class="type">
<span class="param-type">int</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
<code>12</code>
</td>
<td class="description last"><p>The font-size for the labels in px</p></td>
</tr>
<tr>
<td class="name"><code>markerHeight</code></td>
<td class="type">
<span class="param-type">int</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
<code>30</code>
</td>
<td class="description last"><p>The height of the marker in px</p></td>
</tr>
<tr>
<td class="name"><code>markerHeight</code></td>
<td class="type">
<span class="param-type">int</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
<code>10</code>
</td>
<td class="description last"><p>The width of the marker in px</p></td>
</tr>
<tr>
<td class="name"><code>radius</code></td>
<td class="type">
<span class="param-type">int</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
<code>10</code>
</td>
<td class="description last"><p>The radius for the pearl in px</p></td>
</tr>
<tr>
<td class="name"><code>data</code></td>
<td class="type">
<span class="param-type">array</span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last"><p>The data as array</p>
<h6>Properties</h6>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>values</code></td>
<td class="type">
<span class="param-type">array</span>
</td>
<td class="description last"><p>The values to display</p></td>
</tr>
<tr>
<td class="name"><code>colors</code></td>
<td class="type">
<span class="param-type">array</span>
</td>
<td class="description last"><p>The colors for the elements</p></td>
</tr>
<tr>
<td class="name"><code>labelLeft</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="description last"><p>(optional) Label for the left marker</p>
<h6>Properties</h6>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>label</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last"><p>(optional) Text for the left marker</p></td>
</tr>
<tr>
<td class="name"><code>icon</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last"><p>(optional) Path to icon for the left marker</p></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="name"><code>labelRight</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="description last"><p>(optional) Label for the right marker</p>
<h6>Properties</h6>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>label</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last"><p>(optional) Text for the right marker</p></td>
</tr>
<tr>
<td class="name"><code>icon</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last"><p>(optional) Path to icon for the right marker</p></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<h3 class="subsection-title">Methods</h3>
<h4 class="name" id="update"><span class="type-signature"></span>update<span class="signature">(data)</span><span class="type-signature"></span></h4>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="BoxPlot.js.html">BoxPlot.js</a>, <a href="BoxPlot.js.html#line103">line 103</a>
</li></ul></dd>
</dl>
<h5>Example</h5>
<pre class="prettyprint"><code>BoxPlotExample.update([
{
values: [400, 550, 580],
colors: ['#fddd5d', '#C7754E', '#900c3f'],
labelLeft: {
text: 'new label left',
},
labelRight: {
text: 'new label right',
}
},
{
values: [400, 520, 570],
colors: ['#aad356', '#61B77F', '#189aa8']
}
]);</code></pre>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>data</code></td>
<td class="type">
<span class="param-type">array</span>
</td>
<td class="description last"><p>an array containing objects with the new data</p></td>
</tr>
</tbody>
</table>
</article>
</section>
</div>
<br class="clear">
<footer>
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
</footer>
<script>prettyPrint();</script>
<script src="scripts/linenumber.js"></script>
</body>
</html>