/*
* cssCharts v0.1.0
* https://github.com/sultantarimo
*
* (c)2015 Sultan Tarimo - sultantarimo@me.com
* Released under the MIT license
*/
var thychart = {
donut: function(node){
var $chart = $(node);
var val = $(node).attr("data-percent");
var title = $(node).attr("data-title");
$chart.parent().addClass("donut");
if(!title) title = "%";
if(val > 1 || val < 0) return("between 0 - 1 please");
var r = 180;
var c = 360;
var val = parseFloat(val).toFixed(2)*c;
var $temp = $('<div></div>').addClass("pie spinner");
var $title = $("<h2><p></p><span></span></h2>");
$title.find("p").text(val/360*100);
$title.find("span").text(title);
$chart.on('show-donut-chart', function(){
$title.find("p").text(0);
$({countNum: $title.find("p").text()}).animate({countNum: val/360*100}, {
duration: 500,
easing:'linear',
step: function() {
$title.find("p").text(Math.floor(this.countNum));
},
complete: function() {
$title.find("p").text(this.countNum);
}
});
$chart.on('hide-donut-chart', function(){
$title.find("p").text(0);
});
});
$chart.append($title);
var chart = {
nodes: {
spinner: function(){
return $temp.clone().attr(
"style",
'-webkit-transform: rotate('+ chart.values.spinner +'deg);' +
'-moz-transform: rotate('+ chart.values.spinner +'deg);' +
'transform: rotate('+ chart.values.spinner +'deg);'
);
},
mask: function(){
return $temp.clone().addClass(chart.values.selector).attr(
"style",
'-webkit-transform: rotate('+ chart.values.mask + 'deg);' +
'-moz-transform: rotate('+ chart.values.mask + 'deg);' +
'transform: rotate('+ chart.values.mask + 'deg);'
);
}
},
values: {spinner: val, mask: c, selector: "" }
};
var prependNodes = function(data){
$.each(data, function(i, _node) {$chart.prepend(_node());});
};
// IF LESS THAN 50%
if(val < r){
var val1 = val;
var chart$clone = jQuery.extend({}, chart);
chart$clone.values.spinner = val1;
chart$clone.values.selector = "mask";
prependNodes(chart$clone.nodes);
}
// IF GREATER THAN 50%
else{
var val2 = val - r;
var val1 = val - val2;
val2 = val2 + r;
var chart$clone = jQuery.extend({}, chart);
chart$clone.values.spinner = val1;
chart$clone.values.mask = val2;
prependNodes(chart$clone.nodes);
}
},
bar: function(node){
var $node = $(node);
$node.parent().addClass("bar");
var data = $node.attr("data-bars");
var unit = $node.attr("data-unit");
var height = $node.height();
var grid = $node.attr("data-grid");
var barWidth = $node.attr("data-width");
var max = $node.attr("data-max");
if(parseInt(grid) === 0) $node.css("background", "none");
if(!data) return("No data to work with");
if(!unit) unit = "%";
// get max data point
var maxData = function(){
var arr = JSON.parse("[" + data + "]");
return Math.max.apply(Math, arr.map(function(i) { return i[0]; }));
};
// If "data-max" is not specified or if the heighest data-point is greater than data-max
if(maxData() > max || !max){ max = maxData(); }
data = JSON.parse("[[" + data + "]]");
var barsNo = data[0].length;
$.each(data, function(i, v) {
// first dimension
var uls = $("<ul></ul>");
var lis = $("<li><span></span></li>").height(height);
for (i = 0; i < data[0].length; i++){
var ul = uls.clone();
$.each(v[i], function(index, val) {
// second dimension
var li = lis.clone();
var value = (data[0][i][index]);
var title = value + unit;
var percent = (value/max) * 100;
li.find("span").attr("title", title);
if(!barWidth){
li.find("span").attr(
"style",
"height:" + percent + "%"
);
}else{
li.find("span").attr(
"style",
"height:" + percent + "%;" +
"width:" + barWidth + "px"
);
}
ul.append(li);
});
$node.append(ul);
}
});
var grid = $("<div class='grid'></div>");
$node.parent().append(grid);
for(var i = 0; i <= 10; i++) {
var toPerc = (i*10).toFixed(0);
var converter = max/100;
var toUnit = (toPerc * converter).toFixed(0);
if(i % 2 == 0){
var line = $("<hr/>").css({bottom: toPerc+"%"}).attr("data-y", toUnit + unit);
$node.parent().find(".grid").append(line);
}
}
$node.parent().width($node.width());
},
line: function(node){
var setAngle = function(cord, area, node){
var hypotenuse = Math.round( Math.sqrt(Math.pow(area.width, 2) + Math.pow(area.height, 2)) );
var angSin = area.height / hypotenuse;
var ang = Math.round(Math.asin(angSin) * 180/Math.PI);
ang = -ang;
var $node = $(node).clone()
.attr("style",
'width:'+ hypotenuse +'px;'
)
.attr("data-height", area.height)
.attr("data-width", area.width)
.attr("data-hypotenuse", hypotenuse)
.attr("data-angle", ang)
.attr("data-x", cord.x)
.attr("data-y", cord.y);
$node.find("span")
.attr(
"style",
'width:'+ hypotenuse +'px;' +
'-webkit-transform: rotate('+ ang +'deg);' +
'-moz-transform: rotate('+ ang +'deg);' +
'transform: rotate('+ ang +'deg);'
)
.attr("data-height", area.height)
.attr("data-width", area.width)
.attr("data-hypotenuse", hypotenuse)
.attr("data-angle", ang);
$node.find("a")
.attr(
"style",
'height:'+ 40 +'px;'+
'width:'+ 40 +'px;'
)
.attr("data-x", cord.x)
.attr("data-y", cord.y);
return({
angle: ang,
hypo: hypotenuse,
width: area.width,
height: area.height,
node: $node
});
};
var setPosition = function(data){
var prevNode = $("ul").find(data).prev();
var totalWidth = parseInt($("ul").find(data).attr("data-width").replace("-", ""));
var totalHeight = parseInt($("ul").find(data).attr("data-height").replace("-", ""));
var totalY = parseInt($("ul").find(data).attr("data-y").replace("-", ""));
if(prevNode.length === 0){
$("ul").find(data).attr("data-total-width",totalWidth);
$("ul").find(data).css("left",0 + "px");
$("ul").find(data).attr("data-total-height", totalY - totalHeight );
$("ul").find(data).css("bottom",totalY + "px");
$("ul").find(data).attr("data-y",totalY);
$("ul").find(data).attr("data-x",0);
}else{
var currentWidth = parseInt(prevNode.attr("data-total-width").replace("-", ""));
totalWidth = parseInt(prevNode.attr("data-total-width").replace("-", "")) + parseInt(data.attr("data-width").replace("-", ""));
$("ul").find(data).attr("data-total-width",totalWidth);
$("ul").find(data).css("left",currentWidth + "px");
var currentHeight = parseInt(prevNode.attr("data-total-height").replace("-", ""));
totalHeight = parseInt(prevNode.attr("data-total-height")) + parseInt(data.attr("data-height"));
$("ul").find(data).attr("data-total-height",totalHeight);
$("ul").find(data).css("bottom",currentHeight + "px");
$("ul").find(data).attr("data-y",currentHeight);
$("ul").find(data).attr("data-x",currentWidth);
}
};
var setContWidth = function($chart,data){
var width = Math.floor($chart.find("li:last-child").attr("data-x")) + 20;
var height = data[1];
height = Math.max.apply(Math, height) + 20;
$chart.css({width: width, height: height});
$chart.parent().css({width: width, height: height});
$chart.parent().addClass("line");
};
var drawSVG = function(){
var svg = $(
'<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">'+
'<path d=""></path>' +
'</svg>'
);
$chart.parent().append(svg);
function convertToArrayOfObjects(data) {
var keys = data.shift(),
i = 0, k = 0,
obj = null,
output = [];
for (i = 0; i < data.length; i++) {
obj = {};
for (k = 0; k < keys.length; k++) {
obj[k] = {
x: keys[k],
y: $chart.parent().find(".grid hr:last-child").attr("data-y")-data[i][k]
}
}
output.push(obj);
}
return output[0];
}
var points = convertToArrayOfObjects(data);
var counter = 0;
function addPoint(x, y, isFirst){
if(isFirst == "last"){
var last = Object.keys(points).length-1;
var x1 = points[last].x;
var y1 = points[0].y;
var x2 = points[0].x;
var y2 = points[last].y;
console.log(x1,y1,x2,y2);
var new_point = "L" +
x1 +
"," +
x1 +
" L" +
0 +
"," +
x1 +
" Z";
}else{
var new_point = (isFirst? "M" : " L")+x+","+y;
}
$chart.parent().find("path").attr("d", $chart.parent().find("path").attr("d")+""+new_point);
counter++;
if(counter < Object.keys(points).length){
setTimeout(addPoint(points[counter].x, points[counter].y, false),200); // Add a new point after 200 milliseconds
}
if(counter == Object.keys(points).length){
setTimeout(addPoint(null, null, "last"),200);
}
}
addPoint(points[0].x, points[0].y, true);
};
var $chart = $(node);
var fill = $chart.attr("data-fill");
var cord = $chart.attr("data-cord");
cord = JSON.parse("[" + cord + "]");
var data = cord;
var grid = $("<div class='grid'></div>");
$chart.parent().append(grid);
for (var i = 0; i < data[0].length; i++) {
cord = {
x: data[0][i],
y: data[1][i]
};
var area = {
width: data[0][i+1] - data[0][i],
height: data[1][i+1] - data[1][i]
};
var triangle = setAngle(cord, area, $("<li><span></span><a></a></li>"));
$chart.append(triangle.node);
setPosition(triangle.node);
setContWidth($chart, data);
if(i % 2 === 0){
var gridSpace = $chart.height() / 10;
var line = $("<hr/>").css({bottom: i*gridSpace}).attr("data-y", i*gridSpace);
$chart.parent().find(".grid").append(line);
}
}
if(fill){
drawSVG();
}
}
};