Skip to content

Commit

Permalink
Merge branch 'donuts'
Browse files Browse the repository at this point in the history
  • Loading branch information
@benpickles
benpickles committed Oct 15, 2014
2 parents 10b0a11 + 5578389 commit fda8829
Show file tree
Hide file tree
Showing 13 changed files with 198 additions and 46 deletions.
12 changes: 7 additions & 5 deletions README.markdown
View file
Expand Up @@ -2,24 +2,26 @@

[![Build Status](https://travis-ci.org/benpickles/peity.svg?branch=master)](https://travis-ci.org/benpickles/peity)

Peity (sounds like deity) is a simple jQuery plugin that converts an element's content into a simple mini `<svg>` pie, line or bar chart.
Peity (sounds like deity) is a simple jQuery plugin that converts an element's content into a simple mini `<svg>` pie, donut, line or bar chart.

## Basic Usage

### HTML

```html
<span class="pie">3/5</span>
<span class="donut">5,2,3</span>
<span class="line">3,5,1,6,2</span>
<span class="bar">2,5,3,6,2,1</span>
```

### Javascript (jQuery)
### JavaScript (jQuery)

```js
$("span.pie").peity("pie");
$("span.line").peity("line");
$("span.bar").peity("bar");
$(".pie").peity("pie");
$(".donut").peity("donut");
$(".line").peity("line");
$(".bar").peity("bar");
```

## Docs
Expand Down
93 changes: 68 additions & 25 deletions index.html
View file
Expand Up @@ -2,14 +2,15 @@
<html>
<head>
<meta name="viewport" content="width=device-width">
<title>Peity &bull; progressive &lt;svg&gt; pie charts</title>
<title>Peity &bull; progressive &lt;svg&gt; pie, donut, bar and line charts</title>
<link href="docs/style.css" rel="stylesheet">
<script src="test/jquery-1.6.2.min.js"></script>
<script src="jquery.peity.js"></script>
<script>
$(function() {
// Just the defaults.
$("span.pie").peity("pie")
$('.donut').peity('donut')
$(".line").peity("line")
$(".bar").peity("bar")

Expand Down Expand Up @@ -98,6 +99,7 @@ <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;svg&gt;</code>
mini pie <span class="pie">2/5</span>
donut <span class="donut">5,2,3</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;svg&gt;</code>:
Expand All @@ -106,6 +108,7 @@ <h1>Peity</h1>
<nav>
<p>
Read about <a href="#pie-charts">pie charts</a>,
<a href="#donut-charts">donut charts</a>,
<a href="#line-charts">line charts</a>,
<a href="#bar-charts">bar charts</a>,
<a href="#dynamic-colours">setting colours dynamically</a>,
Expand Down Expand Up @@ -138,10 +141,10 @@ <h2 id="pie-charts">Pie Charts</h2>
otherwise all of the values are included in the chart and the total is the
sum of all values.</p>

<p>You can also pass <code>delimiter</code>, <code>diameter</code>,
<code>fill</code>, <code>height</code> and <code>width</code> options.
Setting a diameter is a shortcut for setting the width and height to the
same value.</p>
<p>You can also pass <code>delimiter</code>, <code>fill</code>,
<code>height</code>, <code>radius</code> and <code>width</code>
options. Passing a radius will set the correct width and height, the pie
will always be a circle that fits the available space.</p>

<p>
<span class="pie">1/5</span>
Expand Down Expand Up @@ -169,6 +172,37 @@ <h4>JavaScript</h4>
<pre><code class="javascript">$("span.pie").peity("pie")</code></pre>
</div>

<h2 id="donut-charts">Donut Charts</h2>

<p>Donut charts are the same as <a href="#pie-charts">pie charts</a> and takes the same options with
an added <code>innerRadius</code> option which defaults to half the radius.

<p>
<span class="donut">1/5</span>
<span class="donut">226/360</span>
<span class="donut">0.52/1.561</span>
<span class="donut">1,4</span>
<span class="donut">226,134</span>
<span class="donut">0.52,1.041</span>
<span class="donut">1,2,3,2,2</span>
</p>

<div class="example">
<h4>HTML</h4>

<pre><code class="html">&lt;span class=&quot;donut&quot;&gt;1/5&lt;/span&gt;
&lt;span class=&quot;donut&quot;&gt;226/360&lt;/span&gt;
&lt;span class=&quot;donut&quot;&gt;0.52/1.561&lt;/span&gt;
&lt;span class=&quot;donut&quot;&gt;1,4&lt;/span&gt;
&lt;span class=&quot;donut&quot;&gt;226,134&lt;/span&gt;
&lt;span class=&quot;donut&quot;&gt;0.52,1.041&lt;/span&gt;
&lt;span class=&quot;donut&quot;&gt;1,2,3,2,2&lt;/span&gt;</code></pre>

<h4>JavaScript</h4>

<pre><code class="javascript">$('.donut').peity('donut')</code></pre>
</div>

<h2 id="line-charts">Line Charts</h2>

<p>Line charts work on a comma-separated list of digits. Line charts can
Expand Down Expand Up @@ -217,11 +251,11 @@ <h4>JavaScript</h4>

<h2 id="dynamic-colours">Setting Colours Dynamically</h2>

<p>Bar and pie chart colours can be defined dynamically based on the values
of the chart. When passing an array its values are cycled, when passing a
function it is called once for each value allowing you to define each
bar's colour. The callback is invoked with the value, its index, and the
full array of values - the same arguments as the callback for
<p>Pie, donut and bar chart colours can be defined dynamically based on the
values of the chart. When passing an array its values are cycled, when
passing a function it is called once for each value allowing you to define
each bar or segment's colour. The callback is invoked with the value, its
index, and the full array of values - the same arguments as the callback for
<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach#Description">Array#forEach</a></code>.</p>

<p>
Expand Down Expand Up @@ -319,25 +353,25 @@ <h2 id="data-attributes">data-* attributes</h2>
<code>peity()</code> function take precedence over data-* attributes.</p>

<p class="pie">
<span data-diameter="40" data-fill='["red", "#eeeeee"]' >1/7</span>
<span data-diameter="36" data-fill='["orange", "#eeeeee"]'>2/7</span>
<span data-diameter="32" data-fill='["yellow", "#eeeeee"]'>3/7</span>
<span data-diameter="28" data-fill='["green", "#eeeeee"]' >4/7</span>
<span data-diameter="24" data-fill='["blue", "#eeeeee"]' >5/7</span>
<span data-diameter="20" data-fill='["indigo", "#eeeeee"]'>6/7</span>
<span data-diameter="16" data-fill='["violet", "#eeeeee"]'>7/7</span>
<span data-fill='["red", "#eeeeee"]' data-radius="40">1/7</span>
<span data-fill='["orange", "#eeeeee"]' data-radius="36">2/7</span>
<span data-fill='["yellow", "#eeeeee"]' data-radius="32">3/7</span>
<span data-fill='["green", "#eeeeee"]' data-radius="28">4/7</span>
<span data-fill='["blue", "#eeeeee"]' data-radius="24">5/7</span>
<span data-fill='["indigo", "#eeeeee"]' data-radius="20">6/7</span>
<span data-fill='["violet", "#eeeeee"]' data-radius="16">7/7</span>
</p>

<div class="example">
<h4>HTML</h4>

<pre><code class="html">&lt;span data-diameter=&quot;40&quot; data-fill=&#x27;[&quot;red&quot;, &quot;#eeeeee&quot;]&#x27; &gt;1/7&lt;/span&gt;
&lt;span data-diameter=&quot;36&quot; data-fill=&#x27;[&quot;orange&quot;, &quot;#eeeeee&quot;]&#x27;&gt;2/7&lt;/span&gt;
&lt;span data-diameter=&quot;32&quot; data-fill=&#x27;[&quot;yellow&quot;, &quot;#eeeeee&quot;]&#x27;&gt;3/7&lt;/span&gt;
&lt;span data-diameter=&quot;28&quot; data-fill=&#x27;[&quot;green&quot;, &quot;#eeeeee&quot;]&#x27; &gt;4/7&lt;/span&gt;
&lt;span data-diameter=&quot;24&quot; data-fill=&#x27;[&quot;blue&quot;, &quot;#eeeeee&quot;]&#x27; &gt;5/7&lt;/span&gt;
&lt;span data-diameter=&quot;20&quot; data-fill=&#x27;[&quot;indigo&quot;, &quot;#eeeeee&quot;]&#x27;&gt;6/7&lt;/span&gt;
&lt;span data-diameter=&quot;16&quot; data-fill=&#x27;[&quot;violet&quot;, &quot;#eeeeee&quot;]&#x27;&gt;7/7&lt;/span&gt;</code></pre>
<pre><code class="html">&lt;span data-fill=&#x27;[&quot;red&quot;, &quot;#eeeeee&quot;]&#x27; data-radius=&quot;40&quot;&gt;1/7&lt;/span&gt;
&lt;span data-fill=&#x27;[&quot;orange&quot;, &quot;#eeeeee&quot;]&#x27; data-radius=&quot;36&quot;&gt;2/7&lt;/span&gt;
&lt;span data-fill=&#x27;[&quot;yellow&quot;, &quot;#eeeeee&quot;]&#x27; data-radius=&quot;32&quot;&gt;3/7&lt;/span&gt;
&lt;span data-fill=&#x27;[&quot;green&quot;, &quot;#eeeeee&quot;]&#x27; data-radius=&quot;28&quot;&gt;4/7&lt;/span&gt;
&lt;span data-fill=&#x27;[&quot;blue&quot;, &quot;#eeeeee&quot;]&#x27; data-radius=&quot;24&quot;&gt;5/7&lt;/span&gt;
&lt;span data-fill=&#x27;[&quot;indigo&quot;, &quot;#eeeeee&quot;]&#x27; data-radius=&quot;20&quot;&gt;6/7&lt;/span&gt;
&lt;span data-fill=&#x27;[&quot;violet&quot;, &quot;#eeeeee&quot;]&#x27; data-radius=&quot;16&quot;&gt;7/7&lt;/span&gt;</code></pre>
<h4>JavaScript</h4>

<pre><code class="javascript">$(&quot;.pie span&quot;).peity(&quot;pie&quot;)</code></pre>
Expand Down Expand Up @@ -450,9 +484,18 @@ <h2 id="defaults">Default Settings</h2>

<pre><code class="javascript">$.fn.peity.defaults.pie = {
delimiter: null,
diameter: 16,
fill: ["<span style="background:#ff9900">#ff9900</span>", "<span style="background:#fff4dd">#fff4dd</span>", "<span style="background:#ffd592">#ffd592</span>"],
height: null,
radius: 8,
width: null
}

$.fn.peity.defaults.donut = {
delimiter: null,
fill: ["<span style="background:#ff9900">#ff9900</span>", "<span style="background:#fff4dd">#fff4dd</span>", "<span style="background:#ffd592">#ffd592</span>"],
height: null,
innerRadius: null,
radius: 8,
width: null
}

Expand Down
70 changes: 55 additions & 15 deletions jquery.peity.js
View file
Expand Up @@ -105,8 +105,8 @@
'pie',
{
delimiter: null,
diameter: 16,
fill: ["#ff9900", "#fff4dd", "#ffc66e"]
fill: ['#ff9900', '#fff4dd', '#ffc66e'],
radius: 8
},
function(opts) {
if (!opts.delimiter) {
Expand All @@ -130,9 +130,11 @@
sum += values[i]
}

var diameter = opts.radius * 2

var $svg = this.prepare(
opts.width || opts.diameter,
opts.height || opts.diameter
opts.width || diameter,
opts.height || diameter
)

var width = $svg.width()
Expand All @@ -141,6 +143,7 @@
, cy = height / 2

var radius = Math.min(cx, cy)
, innerRadius = opts.innerRadius
var pi = Math.PI
var fill = this.fill()

Expand All @@ -163,19 +166,47 @@
if (portion == 0) continue

if (portion == 1) {
node = svgElement("circle", {
cx: cx,
cy: cy,
r: radius
})
if (innerRadius) {
var x2 = cx - 0.01
, y1 = cy - radius
, y2 = cy - innerRadius

node = svgElement('path', {
d: [
'M', cx, y1,
'A', radius, radius, 0, 1, 1, x2, y1,
'L', x2, y2,
'A', innerRadius, innerRadius, 0, 1, 0, cx, y2
].join(' ')
})
} else {
node = svgElement("circle", {
cx: cx,
cy: cy,
r: radius
})
}
} else {
var d = ['M', cx, cy, 'L']
.concat(
scale(cumulative, radius),
'A', radius, radius, 0, portion > 0.5 ? 1 : 0, 1,
scale(cumulative += value, radius),
'Z'
var cumulativePlusValue = cumulative + value

var d = ['M'].concat(
scale(cumulative, radius),
'A', radius, radius, 0, portion > 0.5 ? 1 : 0, 1,
scale(cumulativePlusValue, radius),
'L'
)

if (innerRadius) {
d = d.concat(
scale(cumulativePlusValue, innerRadius),
'A', innerRadius, innerRadius, 0, portion > 0.5 ? 1 : 0, 0,
scale(cumulative, innerRadius)
)
} else {
d.push(cx, cy)
}

cumulative += value

node = svgElement("path", {
d: d.join(" ")
Expand All @@ -189,6 +220,15 @@
}
)

peity.register(
'donut',
$.extend(true, {}, peity.defaults.pie),
function(opts) {
if (!opts.innerRadius) opts.innerRadius = opts.radius * 0.5
peity.graphers.pie.call(this, opts)
}
)

peity.register(
"line",
{
Expand Down
69 changes: 68 additions & 1 deletion test/charts.json
View file
Expand Up @@ -87,6 +87,73 @@
"width": 32,
"height": 16
},
"donut1": {
"type": "donut",
"text": "1/5",
"width": 16,
"height": 16
},
"donut2": {
"type": "donut",
"text": "0.52/1.561",
"opts": {
"radius": 16
},
"width": 32,
"height": 32
},
"donut3": {
"type": "donut",
"text": "1,4",
"opts": {
"width": 32
},
"width": 32,
"height": 16
},
"donut4": {
"type": "donut",
"text": "4,7,6,5",
"opts": {
"fill": ["cyan", "magenta", "yellow", "black"],
"height": 32
},
"width": 16,
"height": 32
},
"donut5": {
"type": "donut",
"text": "3/3",
"width": 16,
"height": 16
},
"donut6": {
"type": "donut",
"text": "0/3",
"width": 16,
"height": 16
},
"donut7": {
"type": "donut",
"text": "3,0",
"width": 16,
"height": 16
},
"donut8": {
"type": "donut",
"text": "4/3",
"width": 16,
"height": 16
},
"donut9": {
"type": "donut",
"text": "1/5",
"opts": {
"innerRadius": 6
},
"width": 16,
"height": 16
},
"line1": {
"type": "line",
"text": "5,3,9,6,5,9,7,3,5,2",
Expand Down Expand Up @@ -172,7 +239,7 @@
"type": "pie",
"text": "0.52/1.561",
"opts": {
"diameter": 32
"radius": 16
},
"width": 32,
"height": 32
Expand Down
Binary file added test/fixtures/donut1.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added test/fixtures/donut2.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added test/fixtures/donut3.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added test/fixtures/donut4.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added test/fixtures/donut5.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added test/fixtures/donut6.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added test/fixtures/donut7.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added test/fixtures/donut8.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added test/fixtures/donut9.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit fda8829

Please sign in to comment.