summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorJustyna Att Ilczuk <justyna.ilczuk@gmail.com>2012-08-26 22:18:14 +0200
committerJustyna Att Ilczuk <justyna.ilczuk@gmail.com>2012-08-26 22:18:14 +0200
commitc5c2e01adf03a69277d0a067ca2c0bbe35ad70c7 (patch)
treed0582d8f4aef6ef1f66d248a4b786c1291058d76
parente71350bd5dff862304de60c67ea88bbe0c34ec4a (diff)
downloaddattero-c5c2e01adf03a69277d0a067ca2c0bbe35ad70c7.tar.gz
dattero-c5c2e01adf03a69277d0a067ca2c0bbe35ad70c7.tar.bz2
dattero-c5c2e01adf03a69277d0a067ca2c0bbe35ad70c7.zip
I've just fallen in love in peity...
-rw-r--r--js/jquery.peity.js184
-rw-r--r--peity.html41
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