I've just fallen in love in peity...
This commit is contained in:
Justyna Att Ilczuk
parent
e71350bd5d
commit
c5c2e01adf
2 changed files with 225 additions and 0 deletions
184
js/jquery.peity.js
Normal file
184
js/jquery.peity.js
Normal file
|
|
@ -0,0 +1,184 @@
|
|||
// Peity jQuery plugin version 0.6.0
|
||||
// (c) 2011 Ben Pickles
|
||||
//
|
||||
// http://benpickles.github.com/peity/
|
||||
//
|
||||
// Released under MIT license.
|
||||
(function($, document) {
|
||||
var peity = $.fn.peity = function(type, options) {
|
||||
if (document.createElement("canvas").getContext) {
|
||||
this.each(function() {
|
||||
$(this).change(function() {
|
||||
var opts = $.extend({}, options)
|
||||
var self = this
|
||||
|
||||
$.each(opts, function(name, value) {
|
||||
if ($.isFunction(value)) opts[name] = value.call(self)
|
||||
})
|
||||
|
||||
var value = $(this).html();
|
||||
peity.graphers[type].call(this, $.extend({}, peity.defaults[type], opts));
|
||||
$(this).trigger("chart:changed", value);
|
||||
}).trigger("change");
|
||||
});
|
||||
}
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
peity.graphers = {};
|
||||
peity.defaults = {};
|
||||
|
||||
peity.add = function(type, defaults, grapher){
|
||||
peity.graphers[type] = grapher;
|
||||
peity.defaults[type] = defaults;
|
||||
};
|
||||
|
||||
var devicePixelRatio = window.devicePixelRatio || 1
|
||||
|
||||
function createCanvas(width, height) {
|
||||
var canvas = document.createElement("canvas")
|
||||
canvas.setAttribute("width", width * devicePixelRatio)
|
||||
canvas.setAttribute("height", height * devicePixelRatio)
|
||||
|
||||
if (devicePixelRatio != 1) {
|
||||
var style = "width:" + width + "px;height:" + height + "px"
|
||||
canvas.setAttribute("style", style)
|
||||
}
|
||||
|
||||
return canvas
|
||||
}
|
||||
|
||||
peity.add(
|
||||
'pie',
|
||||
{
|
||||
colours: ['#FFF4DD', '#FF9900'],
|
||||
delimeter: '/',
|
||||
diameter: 16
|
||||
},
|
||||
function(opts) {
|
||||
var $this = $(this)
|
||||
var values = $this.text().split(opts.delimeter)
|
||||
var v1 = parseFloat(values[0]);
|
||||
var v2 = parseFloat(values[1]);
|
||||
var adjust = -Math.PI / 2;
|
||||
var slice = (v1 / v2) * Math.PI * 2;
|
||||
|
||||
var canvas = createCanvas(opts.diameter, opts.diameter)
|
||||
var context = canvas.getContext("2d");
|
||||
var centre = canvas.width / 2;
|
||||
|
||||
// Plate.
|
||||
context.beginPath();
|
||||
context.moveTo(centre, centre);
|
||||
context.arc(centre, centre, centre, slice + adjust, (slice == 0) ? Math.PI * 2 : adjust, false);
|
||||
context.fillStyle = opts.colours[0];
|
||||
context.fill();
|
||||
|
||||
// Slice of pie.
|
||||
context.beginPath();
|
||||
context.moveTo(centre, centre);
|
||||
context.arc(centre, centre, centre, adjust, slice + adjust, false);
|
||||
context.fillStyle = opts.colours[1];
|
||||
context.fill();
|
||||
|
||||
$this.wrapInner($("<span>").hide()).append(canvas)
|
||||
});
|
||||
|
||||
peity.add(
|
||||
"line",
|
||||
{
|
||||
colour: "#c6d9fd",
|
||||
strokeColour: "#4d89f9",
|
||||
strokeWidth: 1,
|
||||
delimeter: ",",
|
||||
height: 16,
|
||||
max: null,
|
||||
min: 0,
|
||||
width: 32
|
||||
},
|
||||
function(opts) {
|
||||
var $this = $(this)
|
||||
var canvas = createCanvas(opts.width, opts.height)
|
||||
var values = $this.text().split(opts.delimeter)
|
||||
if (values.length == 1) values.push(values[0])
|
||||
var max = Math.max.apply(Math, values.concat([opts.max]));
|
||||
var min = Math.min.apply(Math, values.concat([opts.min]))
|
||||
|
||||
var context = canvas.getContext("2d");
|
||||
var width = canvas.width
|
||||
var height = canvas.height
|
||||
var xQuotient = width / (values.length - 1)
|
||||
var yQuotient = height / (max - min)
|
||||
|
||||
var coords = [];
|
||||
var i;
|
||||
|
||||
context.beginPath();
|
||||
context.moveTo(0, height + (min * yQuotient))
|
||||
|
||||
for (i = 0; i < values.length; i++) {
|
||||
var x = i * xQuotient
|
||||
var y = height - (yQuotient * (values[i] - min))
|
||||
|
||||
coords.push({ x: x, y: y });
|
||||
context.lineTo(x, y);
|
||||
}
|
||||
|
||||
context.lineTo(width, height + (min * yQuotient))
|
||||
context.fillStyle = opts.colour;
|
||||
context.fill();
|
||||
|
||||
if (opts.strokeWidth) {
|
||||
context.beginPath();
|
||||
context.moveTo(0, coords[0].y);
|
||||
for (i = 0; i < coords.length; i++) {
|
||||
context.lineTo(coords[i].x, coords[i].y);
|
||||
}
|
||||
context.lineWidth = opts.strokeWidth * devicePixelRatio;
|
||||
context.strokeStyle = opts.strokeColour;
|
||||
context.stroke();
|
||||
}
|
||||
|
||||
$this.wrapInner($("<span>").hide()).append(canvas)
|
||||
}
|
||||
);
|
||||
|
||||
peity.add(
|
||||
'bar',
|
||||
{
|
||||
colour: "#4D89F9",
|
||||
delimeter: ",",
|
||||
height: 16,
|
||||
max: null,
|
||||
min: 0,
|
||||
width: 32
|
||||
},
|
||||
function(opts) {
|
||||
var $this = $(this)
|
||||
var values = $this.text().split(opts.delimeter)
|
||||
var max = Math.max.apply(Math, values.concat([opts.max]));
|
||||
var min = Math.min.apply(Math, values.concat([opts.min]))
|
||||
|
||||
var canvas = createCanvas(opts.width, opts.height)
|
||||
var context = canvas.getContext("2d");
|
||||
|
||||
var width = canvas.width
|
||||
var height = canvas.height
|
||||
var yQuotient = height / (max - min)
|
||||
var space = devicePixelRatio / 2
|
||||
var xQuotient = (width + space) / values.length
|
||||
|
||||
context.fillStyle = opts.colour;
|
||||
|
||||
for (var i = 0; i < values.length; i++) {
|
||||
var x = i * xQuotient
|
||||
var y = height - (yQuotient * (values[i] - min))
|
||||
|
||||
context.fillRect(x, y, xQuotient - space, yQuotient * values[i])
|
||||
}
|
||||
|
||||
$this.wrapInner($("<span>").hide()).append(canvas)
|
||||
}
|
||||
);
|
||||
})(jQuery, document);
|
||||
41
peity.html
Normal file
41
peity.html
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<html>
|
||||
<head>
|
||||
<title></title>
|
||||
<meta content="">
|
||||
<link href="css/bootstrap.css" rel="stylesheet">
|
||||
<script src="js/jquery-1.8.0.min.js"></script>
|
||||
<script src="js/jquery.peity.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container well-large">
|
||||
<div class="span6 offset3 well">
|
||||
<h1>Hello, Peity!</h1>
|
||||
<p>That's pretty amazing. It's so simple and looks so nice... and it is easy to use, can be used
|
||||
just anywhere. I like the design and charts... how could I not fall in love in
|
||||
<a href="http://benpickles.github.com/peity/#pie-charts">peity?</a></p>
|
||||
<h2>Pie charts!</h2>
|
||||
<span class="pie">1/5</span>
|
||||
<span class="pie">226/360</span>
|
||||
<span class="pie">0.52/1.561</span>
|
||||
<h2>Line charts!</h2>
|
||||
<span class="line">1,1,1,6,2,2,7,3,5,15</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>
|
||||
<h2>Bar charts!</h2>
|
||||
<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>
|
||||
<h2>What next?</h2>
|
||||
<p>Actually, I don't know. Probably I'll just use it anywhere possible.
|
||||
So simple and lovely <3</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script type="text/javascript" >
|
||||
$("span.pie").peity("pie");
|
||||
$("span.line").peity("line");
|
||||
$(".bar").peity("bar");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue