214 lines
8.6 KiB
JavaScript
214 lines
8.6 KiB
JavaScript
// Prevu Dashboard Control
|
|
// Author: Claire Lipskey
|
|
// Version: .1
|
|
// Requires: jQuery, PieChart.js
|
|
|
|
(function ($) {
|
|
var percentHTML; // global variable
|
|
// value: percentage
|
|
// name: unique name for ID of chart
|
|
// percent: boolean - show percent (true) or not (false)
|
|
// color: HEX value for color of chart.
|
|
$.fn.pie = function (value, name, percent, color) {
|
|
var html = createContainer('pie', name, value, '', percent, '');
|
|
if (html) {
|
|
this.append(html);
|
|
}
|
|
value = (value / 100) * 360; // get degrees from percentage
|
|
dataValues = [];
|
|
dataValues.push(value);
|
|
var pieChart = new PieChart(name, {
|
|
data: dataValues, colors: [
|
|
[color]]
|
|
});
|
|
pieChart.draw();
|
|
return this;
|
|
};
|
|
|
|
|
|
// value: percentage
|
|
// name: unique name for ID of chart
|
|
// percent: boolean - show percent (true) or not (false)
|
|
// color: HEX value for color of chart.
|
|
$.fn.bar = function (value, name, percent, color) {
|
|
var html = createContainer('bar', name, value, color, percent,'');
|
|
if (html) {
|
|
this.append(html);
|
|
}
|
|
return this;
|
|
};
|
|
$.fn.smallerbar = function (value, name, percent, color, valueLbl) {
|
|
var html = createContainer('smallbar', name, value, color, percent, valueLbl);
|
|
if (html) {
|
|
this.append(html);
|
|
}
|
|
return this;
|
|
};
|
|
i = 0;
|
|
function createContainer(type, name, value, color, percent, valueLbl) {
|
|
switch (type) {
|
|
case 'pie':
|
|
if (percent) { // adds "data-value" attribute to .magnifyContainer if percent is true.
|
|
return '<div class="magnifyContainer" data-value="' + value + '%"><div class="' + type + '"><canvas id="' + name + '" class="magnify-canvas" width="100" height="100"></canvas></div></div>';
|
|
} else {
|
|
return '<div class="magnifyContainer"><div class="' + type + '"><canvas id="' + name + '" class="magnify-canvas" width="100" height="100"></canvas></div></div>';
|
|
}
|
|
case 'bar':
|
|
var valuePX = (value / 100) * 70; // get percentage height from established height (70 px)
|
|
valuePX = valuePX >= 0 ? valuePX : 0; // zero height for negative value
|
|
if (percent) { // adds "data-value" attribute to .magnifyContainer if percent is true.
|
|
return '<div class="magnifyContainer" data-value="' + value + '%"><div class="' + type + '" style="height:' + valuePX + 'px;" id="' + name + '"><div style="background:' + color + '!important; -webkit-print-color-adjust: exact; "></div></div><div class="magnifyContainer-img"><img src="/Content/images/magnify.png" width="100px" heigh="100px" /></div></div>';
|
|
} else {
|
|
return '<div class="magnifyContainer"><div class="' + type + '" style="height:' + valuePX + 'px;" id="' + name + '"><div style="background:' + color + '!important; -webkit-print-color-adjust: exact; "></div></div></div>';
|
|
}
|
|
case 'smallbar':
|
|
var valuePX = (value / 100) * 31; // get percentage height from established height (70 px)
|
|
if (percent) { // adds "data-value" attribute to .magnifyContainer if percent is true.
|
|
//return '<div class="magnifyContainer50" data-value="Score:' + value + '%"><div class="' + type + '" style="height:' + valuePX + 'px;" id="' + name + '"><div style="background:' + color + ';"></div></div></div>';
|
|
return '<div class="magnifyContainer50" data-value="' + valueLbl + '%"><div class="' + type + '" style="height:' + valuePX + 'px;" id="' + name + '"><div style="background:' + color + '!important; -webkit-print-color-adjust: exact; "></div></div><div class="magnifyContainer-img"><img src="/Content/images/magnify.png" width="51px" heigh="51px" /></div></div>';
|
|
} else {
|
|
return '<div class="magnifyContainer50"><div class="' + type + '" style="height:' + valuePX + 'px;" id="' + name + '"><div style="background:' + color + '!important; -webkit-print-color-adjust: exact; "></div></div></div>';
|
|
}
|
|
}
|
|
}
|
|
|
|
}(jQuery));
|
|
|
|
//
|
|
// PieChart
|
|
//
|
|
// CreativeCommons Attribution-ShareAlike
|
|
// http://creativecommons.org/licenses/by-sa/2.5/
|
|
//
|
|
// 2011 Elisabeth Robson
|
|
//
|
|
// expects an object with one or more of these:
|
|
// includeLabels - boolean, determines whether to include the specified labels
|
|
// when drawing the chart. If false, the labels are stored in the pie chart
|
|
// but not drawn by default. You can draw a label for a segment with
|
|
// the drawLabel method.
|
|
// data - array of data items. Should be positive integer adding up to 360.
|
|
// labels - array of (string) labels. Should have at least as many items as data.
|
|
// colors - two D array of (string) colors. First is used to draw, second to draw
|
|
// a selected segment.
|
|
//
|
|
function PieChart(id, o) {
|
|
this.includeLabels = false;
|
|
if (o.includeLabels == undefined) {
|
|
this.includeLabels = false;
|
|
}
|
|
else {
|
|
this.includeLabels = o.includeLabels;
|
|
}
|
|
this.data = o.data ? o.data : [30, 70, 45, 65, 20, 130]; // in degrees
|
|
this.labels = o.labels ? o.labels : ["First", "Second", "Third", "Fourth", "Fifth", "Sixth"];
|
|
this.colors = o.colors ? o.colors : [
|
|
["#bbddb3", "#1d8e04"], // green
|
|
["#e2f5b4", "#9edd08"], // yellow green
|
|
["#fdfbb4", "#faf406"], // yellow
|
|
["#fbd4b7", "#f2700f"], // orange
|
|
["#f8bdb4", "#ea2507"], // red
|
|
["#e2bcbd", "#9e2126"] // purple
|
|
];
|
|
|
|
this.canvas = document.getElementById(id);
|
|
}
|
|
|
|
PieChart.prototype = {
|
|
|
|
select: function (segment) {
|
|
var self = this;
|
|
var context = this.canvas.getContext("2d");
|
|
this.drawSegment(this.canvas, context, segment, this.data[segment], true, this.includeLabels);
|
|
},
|
|
|
|
draw: function () {
|
|
var self = this;
|
|
var context = this.canvas.getContext("2d");
|
|
for (var i = 0; i < this.data.length; i++) {
|
|
this.drawSegment(this.canvas, context, i, this.data[i], false, this.includeLabels);
|
|
}
|
|
},
|
|
|
|
drawSegment: function (canvas, context, i, size, isSelected, includeLabels) {
|
|
var self = this;
|
|
context.save();
|
|
var centerX = Math.floor(canvas.width / 2);
|
|
var centerY = Math.floor(canvas.height / 2);
|
|
radius = Math.floor(canvas.width / 2);
|
|
|
|
var startingAngle = self.degreesToRadians(self.sumTo(self.data, i));
|
|
var arcSize = self.degreesToRadians(size);
|
|
var endingAngle = startingAngle + arcSize;
|
|
|
|
context.beginPath();
|
|
context.moveTo(centerX, centerY);
|
|
context.arc(centerX, centerY, radius, startingAngle, endingAngle, false);
|
|
context.closePath();
|
|
|
|
isSelected ?
|
|
context.fillStyle = self.colors[i][1] :
|
|
context.fillStyle = self.colors[i][0];
|
|
|
|
context.fill();
|
|
context.restore();
|
|
|
|
if (includeLabels && (self.labels.length > i)) {
|
|
self.drawSegmentLabel(canvas, context, i, isSelected);
|
|
}
|
|
},
|
|
|
|
drawSegmentLabel: function (canvas, context, i, isSelected) {
|
|
var self = this;
|
|
context.save();
|
|
var x = Math.floor(canvas.width / 2);
|
|
var y = Math.floor(canvas.height / 2);
|
|
var angle;
|
|
var angleD = self.sumTo(self.data, i);
|
|
var flip = (angleD < 90 || angleD > 270) ? false : true;
|
|
|
|
context.translate(x, y);
|
|
if (flip) {
|
|
angleD = angleD - 180;
|
|
context.textAlign = "left";
|
|
angle = self.degreesToRadians(angleD);
|
|
context.rotate(angle);
|
|
context.translate(-(x + (canvas.width * 0.5)) + 15, -(canvas.height * 0.05) - 10);
|
|
}
|
|
else {
|
|
context.textAlign = "right";
|
|
angle = self.degreesToRadians(angleD);
|
|
context.rotate(angle);
|
|
}
|
|
//context.textAlign = "right";
|
|
var fontSize = Math.floor(canvas.height / 25);
|
|
context.font = fontSize + "pt Helvetica";
|
|
|
|
var dx = Math.floor(canvas.width * 0.5) - 10;
|
|
var dy = Math.floor(canvas.height * 0.05);
|
|
context.fillText(self.labels[i], dx, dy);
|
|
|
|
context.restore();
|
|
},
|
|
|
|
drawLabel: function (i) {
|
|
var self = this;
|
|
var context = this.canvas.getContext("2d");
|
|
var size = self.data[i];
|
|
|
|
self.drawSegmentLabel(this.canvas, context, i, size, false);
|
|
},
|
|
|
|
// helper functions
|
|
degreesToRadians: function (degrees) {
|
|
return (degrees * Math.PI) / 180;
|
|
},
|
|
|
|
sumTo: function (a, i) {
|
|
var sum = -90;
|
|
for (var j = 0; j < i; j++) {
|
|
sum += a[j];
|
|
}
|
|
return sum;
|
|
}
|
|
} |