Permalink
Fetching contributors…
Cannot retrieve contributors at this time
355 lines (299 sloc) 11.2 KB
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width; minimum-scale=1.0; maximum-scale=1.0">
<title>Peity &bull; progressive &lt;canvas&gt; pie charts</title>
<link href="docs/style.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="jquery.peity.js"></script>
<script>
$(function() {
// Just the defaults.
$("span.pie").peity("pie")
$(".line").peity("line")
$(".bar").peity("bar")
// Set a custom colour and/or diameter.
$(".diameter span").peity("pie", {
colours: function() {
return ["#dddddd", this.getAttribute("data-colour")]
},
diameter: function() {
return this.getAttribute("data-diameter")
}
})
// Simple evented example.
$("select").change(function(){
$(this)
.siblings("span.graph")
.text($(this).val() + "/" + 5).change()
}).change()
var chartUpdate = function(event, value) {
$("#notice").text(
"Chart updated: " + value
)
}
$("span.graph").peity("pie").bind("chart:changed", chartUpdate)
})
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-117680-14']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div id="container">
<h1>Peity</h1>
<p>Peity (sounds like deity) is a simple <a href="http://jquery.com/">jQuery</a>
plugin that converts an element's content into a simple <code>&lt;canvas&gt;</code>
mini pie <span class="pie">2/5</span>
line <span class="line">5,3,9,6,5,9,7,3,5,2</span>
or bar chart <span class="bar">5,3,9,6,5,9,7,3,5,2</span> and is
compatible with any browser that supports <code>&lt;canvas&gt;</code>:
Chrome, Firefox, IE9+, Opera, Safari.</p>
<nav>
<p>
Read about <a href="#pie-charts">pie charts</a>,
<a href="#line-charts">line charts</a>,
<a href="#bar-charts">bar charts</a>,
<a href="#custom-charts">custom charts</a>,
<a href="#events">events</a>,
<a href="#tips">tips</a> and
<a href="#defaults">defaults</a>.
</p>
</nav>
<h2>Download <span class="version">version 0.6.0</span></h2>
<dl>
<dt>Uncompressed 5.0Kb</dt>
<dd><a href="jquery.peity.js">jquery.peity.js</a></dd>
<dt>Minified 2.4Kb (+gzipped 1.1Kb)</dt>
<dd><a href="jquery.peity.min.js">jquery.peity.min.js</a></dd>
<dt>Source</dt>
<dd><a href="https://github.com/benpickles/peity">github.com/benpickles/peity</a></dd>
</dl>
<a href="https://github.com/benpickles/peity"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
<h2 id="pie-charts">Pie Charts</h2>
<p>Simply call <code>peity("pie")</code> on a jQuery selection. You can also
pass <code>colours</code>, <code>diameter</code> and <code>delimeter</code>
options.</p>
<p>
<span class="pie">1/5</span>
<span class="pie">226/360</span>
<span class="pie">0.52/1.561</span>
</p>
<div class="example">
<h4>HTML</h4>
<pre><code class="html">&lt;span class="pie"&gt;1/5&lt;/span&gt;
&lt;span class="pie"&gt;226/360&lt;/span&gt;
&lt;span class="pie"&gt;0.52/1.561&lt;/span&gt;</code></pre>
<h4>JavaScript</h4>
<pre><code class="javascript">$("span.pie").peity("pie")</code></pre>
</div>
<h2 id="line-charts">Line Charts</h2>
<p>Line charts work on a comma-separated list of digits. Line charts can
take the following options: <code>colour</code>, <code>strokeColour</code>,
<code>strokeWidth</code>, <code>delimeter</code>, <code>max</code>,
<code>min</code>, <code>width</code> and <code>height</code>.</p>
<p>
<span class="line">5,3,9,6,5,9,7,3,5,2</span>
<span class="line">5,3,2,-1,-3,-2,2,3,5,2</span>
<span class="line">0,-3,-6,-4,-5,-4,-7,-3,-5,-2</span>
</p>
<div class="example">
<h4>HTML</h4>
<pre><code class="html">&lt;span class="line"&gt;5,3,9,6,5,9,7,3,5,2&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;5,3,2,-1,-3,-2,2,3,5,2&lt;/span&gt;
&lt;span class=&quot;line&quot;&gt;0,-3,-6,-4,-5,-4,-7,-3,-5,-2&lt;/span&gt;</code></pre>
<h4>JavaScript</h4>
<pre><code class="javascript">$(".line").peity("line")</code></pre>
</div>
<h2 id="bar-charts">Bar Charts</h2>
<p>Bar charts work in the same way as line charts and take the following
options: <code>colour</code>, <code>delimeter</code>, <code>max</code>,
<code>min</code>, <code>width</code> and <code>height</code>.</p>
<p>
<span class="bar">5,3,9,6,5,9,7,3,5,2</span>
<span class="bar">5,3,2,-1,-3,-2,2,3,5,2</span>
<span class="bar">0,-3,-6,-4,-5,-4,-7,-3,-5,-2</span>
</p>
<div class="example bar-chart">
<h4>HTML</h4>
<pre><code class="html">&lt;span class="bar"&gt;5,3,9,6,5,9,7,3,5,2&lt;/span&gt;
&lt;span class=&quot;bar&quot;&gt;5,3,2,-1,-3,-2,2,3,5,2&lt;/span&gt;
&lt;span class=&quot;bar&quot;&gt;0,-3,-6,-4,-5,-4,-7,-3,-5,-2&lt;/span&gt;</code></pre>
<h4>JavaScript</h4>
<pre><code class="javascript">$(".bar").peity("bar")</code></pre>
</div>
<h2 id="custom-charts">Custom Charts</h2>
<p>You can easily add your own custom chart by registering it with
Peity with name, defaults and the draw function which receives an options
object.</p>
<pre><code class="javascript">$.fn.peity.add("custom", {
colour: "#FFCC00"
}, function(opts) {
...
}
)</code></pre>
<h2 id="events">Events</h2>
<p>Peity adds a "change" event trigger to your graph elements, so if you
update their data your can regenerate one or more charts by triggering
<code>change()</code> on them.</p>
<ul>
<li>
<span class="graph"></span>
<select>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4" selected>4</option>
<option value="5">5</option>
</select>
</li>
<li>
<span class="graph"></span>
<select>
<option value="0">0</option>
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</li>
<li>
<span class="graph"></span>
<select>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected>3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</li>
</ul>
<p id="notice">Nothing's happened yet.</p>
<div class="example pie-events">
<h4>HTML</h4>
<pre><code class="html">&lt;ul&gt;
&lt;li&gt;
&lt;span class="graph"&gt;&lt;/span&gt;
&lt;select&gt;
&lt;option value="0"&gt;0&lt;/option&gt;
&lt;option value="1"&gt;1&lt;/option&gt;
&lt;option value="2"&gt;2&lt;/option&gt;
&lt;option value="3"&gt;3&lt;/option&gt;
&lt;option value="4" selected&gt;4&lt;/option&gt;
&lt;option value="5"&gt;5&lt;/option&gt;
&lt;/select&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;span class="graph"&gt;&lt;/span&gt;
&lt;select&gt;
&lt;option value="0"&gt;0&lt;/option&gt;
&lt;option value="1" selected&gt;1&lt;/option&gt;
&lt;option value="2"&gt;2&lt;/option&gt;
&lt;option value="3"&gt;3&lt;/option&gt;
&lt;option value="4"&gt;4&lt;/option&gt;
&lt;option value="5"&gt;5&lt;/option&gt;
&lt;/select&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;span class="graph"&gt;&lt;/span&gt;
&lt;select&gt;
&lt;option value="0"&gt;0&lt;/option&gt;
&lt;option value="1"&gt;1&lt;/option&gt;
&lt;option value="2"&gt;2&lt;/option&gt;
&lt;option value="3" selected&gt;3&lt;/option&gt;
&lt;option value="4"&gt;4&lt;/option&gt;
&lt;option value="5"&gt;5&lt;/option&gt;
&lt;/select&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p id="notice"&gt;Nothing's happened yet.&lt;/p&gt;</code></pre>
<h4>JavaScript</h4>
<pre><code class="javascript">$("select").change(function() {
$(this)
.siblings("span.graph")
.text($(this).val() + "/" + 5).change()
}).change()
var chartUpdate = function(event, value, max) {
$("#notice").text(
"Chart updated: " + value + "/" + max
)
}
$("span.graph")
.peity("pie")
.bind("chart:changed", chartUpdate)</code></pre>
</div>
<h2 id="tips">Tips</h2>
<h3>Per-element Colour and Diameter</h3>
<p>Options can be passed a function that returns the actual value allowing you to do something like this where colours and diameter are derived from the element that Peity is working on.</p>
<p class="diameter">
<span data-colour="red" data-diameter="40">1/7</span>
<span data-colour="orange" data-diameter="36">2/7</span>
<span data-colour="yellow" data-diameter="32">3/7</span>
<span data-colour="green" data-diameter="28">4/7</span>
<span data-colour="blue" data-diameter="24">5/7</span>
<span data-colour="indigo" data-diameter="20">6/7</span>
<span data-colour="violet" data-diameter="16">7/7</span>
</p>
<div class="example">
<h4>HTML</h4>
<pre><code class="html">&lt;span data-colour=&quot;red&quot; data-diameter=&quot;40&quot;&gt;1/7&lt;/span&gt;
&lt;span data-colour=&quot;orange&quot; data-diameter=&quot;36&quot;&gt;2/7&lt;/span&gt;
&lt;span data-colour=&quot;yellow&quot; data-diameter=&quot;32&quot;&gt;3/7&lt;/span&gt;
&lt;span data-colour=&quot;green&quot; data-diameter=&quot;28&quot;&gt;4/7&lt;/span&gt;
&lt;span data-colour=&quot;blue&quot; data-diameter=&quot;24&quot;&gt;5/7&lt;/span&gt;
&lt;span data-colour=&quot;indigo&quot; data-diameter=&quot;20&quot;&gt;6/7&lt;/span&gt;
&lt;span data-colour=&quot;violet&quot; data-diameter=&quot;16&quot;&gt;7/7&lt;/span&gt;</code></pre>
<h4>JavaScript</h4>
<pre><code class="javascript">$(&quot;.diameter span&quot;).peity(&quot;pie&quot;, {
colours: function() {
return [&quot;#dddddd&quot;, this.getAttribute(&quot;data-colour&quot;)]
},
diameter: function() {
return this.getAttribute(&quot;data-diameter&quot;)
}
})</code></pre>
</div>
<h2 id="defaults">Defaults</h2>
<p>Defaults can be overridden globally like so:</p>
<pre><code class="javascript">$.fn.peity.defaults.pie = {
colours: ["<span style="background:#fff4dd">#fff4dd</span>", "<span style="background:#ff9900">#ff9900</span>"],
delimeter: "/",
diameter: 16
}
$.fn.peity.defaults.line = {
colour: : "<span style="background:#c6d9fd">#c6d9fd</span>",
strokeColour: "<span style="background:#4d89f9">#4d89f9</span>",
strokeWidth: 1,
delimeter: ",",
height: 16,
max: null,
min: 0,
width: 32
}
$.fn.peity.defaults.bar = {
colour: "<span style="background:#4d89f9">#4d89f9</span>",
delimeter: ",",
height: 16,
max: null,
min: 0,
width: 32
}</code></pre>
<footer>
<p>
&copy; 2012 <a href="http://benpickles.com/">Ben Pickles</a>.
<a href="https://github.com/benpickles/peity/blob/master/MIT-LICENCE">MIT LICENCE</a>.
</p>
</footer>
</div>
</body>
</html>