diff options
author | Justyna Att Ilczuk <justyna.ilczuk@gmail.com> | 2012-08-26 22:18:14 +0200 |
---|---|---|
committer | Justyna Att Ilczuk <justyna.ilczuk@gmail.com> | 2012-08-26 22:18:14 +0200 |
commit | c5c2e01adf03a69277d0a067ca2c0bbe35ad70c7 (patch) | |
tree | d0582d8f4aef6ef1f66d248a4b786c1291058d76 | |
parent | e71350bd5dff862304de60c67ea88bbe0c34ec4a (diff) | |
download | dattero-c5c2e01adf03a69277d0a067ca2c0bbe35ad70c7.tar.gz dattero-c5c2e01adf03a69277d0a067ca2c0bbe35ad70c7.tar.bz2 dattero-c5c2e01adf03a69277d0a067ca2c0bbe35ad70c7.tar.xz dattero-c5c2e01adf03a69277d0a067ca2c0bbe35ad70c7.zip |
I've just fallen in love in peity...
-rw-r--r-- | js/jquery.peity.js | 184 | ||||
-rw-r--r-- | peity.html | 41 |
2 files changed, 225 insertions, 0 deletions
diff --git a/js/jquery.peity.js b/js/jquery.peity.js new file mode 100644 index 0000000..323ba6f --- /dev/null +++ b/js/jquery.peity.js @@ -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); diff --git a/peity.html b/peity.html new file mode 100644 index 0000000..72d8c45 --- /dev/null +++ b/peity.html @@ -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>
\ No newline at end of file |