mirror of
https://github.com/dawidolko/Website-Templates.git
synced 2026-02-04 09:30:05 +00:00
Website templates
This commit is contained in:
Dawid Olko
@@ -0,0 +1,382 @@
|
||||
/*
|
||||
* 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();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
@@ -0,0 +1,513 @@
|
||||
/*
|
||||
* cssCharts v0.3.0
|
||||
* jquery plugin to create donut and bar charts with css
|
||||
* https://github.com/sultantarimo
|
||||
*
|
||||
* (c)2015 Sultan Tarimo - sultantarimo@me.com
|
||||
* Released under the MIT license
|
||||
*/
|
||||
.chart *, .chart{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;}
|
||||
.chart{
|
||||
width:auto;
|
||||
display:block;
|
||||
position:relative;
|
||||
font-family:sans-serif;
|
||||
font-size:14px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* bar chart */
|
||||
|
||||
.chart.bar{height:200px;}
|
||||
.bar-chart{
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: auto;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
z-index:20;
|
||||
position:absolute;
|
||||
left:0px;
|
||||
}
|
||||
|
||||
.bar-chart ul{
|
||||
margin-left: 34px;
|
||||
float: left;
|
||||
display: block;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
.bar-chart li{
|
||||
position: relative;
|
||||
display: table-cell;
|
||||
vertical-align: bottom;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.bar-chart span{
|
||||
margin: 0 6px;
|
||||
display: block;
|
||||
background: rgb(241,127,73);
|
||||
width: 34px;
|
||||
position:relative;
|
||||
|
||||
-webkit-animation: drawBar 0.3s ease-in-out;
|
||||
-moz-animation: drawBar 0.3s ease-in-out;
|
||||
animation: drawBar 0.3s ease-in-out;
|
||||
|
||||
-webkit-transition: all 100ms ease-in-out;
|
||||
-moz-transition: all 100ms ease-in-out;
|
||||
transition: all 100ms ease-in-out;
|
||||
}
|
||||
|
||||
.bar-chart li:hover span{
|
||||
box-shadow:0 0 0 4px rgb(241,127,73);
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.bar-chart li:nth-child(2n+1):hover span{
|
||||
box-shadow:0 0 0 4px #bd380f;
|
||||
}
|
||||
|
||||
.bar-chart li:nth-child(2n+1) span{background-color:#bd380f;}
|
||||
.bar-chart ul:last-of-type li:last-child span{margin-right:0px;}
|
||||
.bar-chart ul:first-of-type li:first-child span{margin-left:0px;}
|
||||
.bar-chart ul:last-of-type {margin-right: 0px;}
|
||||
.bar-chart ul:first-of-type {margin-left: 0px;}
|
||||
.bar-chart.left-bar ul:last-of-type {margin-right: 0px;}
|
||||
.bar-chart.left-bar ul{margin-right: 34px;float:left;margin-left:0px;}
|
||||
|
||||
.bar-chart span:before {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
margin-bottom: 10px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
content: attr(title);
|
||||
word-wrap: break-word;
|
||||
font-size: 12px;
|
||||
width: auto;
|
||||
|
||||
left: 50%;
|
||||
|
||||
-webkit-transform: translateX(-50%);
|
||||
-moz-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.bar-chart li span:before {
|
||||
-webkit-transition: all 100ms ease-in-out;
|
||||
-moz-transition: all 100ms ease-in-out;
|
||||
transition: all 100ms ease-in-out;
|
||||
}
|
||||
|
||||
@-webkit-keyframes drawBar {0% {height: 0;}}
|
||||
@-moz-keyframes drawBar {0% {height: 0;}}
|
||||
@keyframes drawBar {0% {height: 0;}}
|
||||
|
||||
/* donut chart */
|
||||
|
||||
.chart.donut{
|
||||
width:200px;
|
||||
height:200px;
|
||||
}
|
||||
|
||||
.donut-chart{
|
||||
width:100%;height:100%;
|
||||
position:relative;
|
||||
|
||||
-webkit-border-radius:50%;
|
||||
-moz-border-radius:50%;
|
||||
border-radius:50%;
|
||||
}
|
||||
|
||||
.donut-chart.fill{
|
||||
background:rgb(241,127,73);
|
||||
}
|
||||
|
||||
.donut-chart:after{
|
||||
content:"";
|
||||
position: absolute;
|
||||
width: 86%;
|
||||
height: 86%;
|
||||
background: #FFF;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
z-index: 400;
|
||||
margin: 0 auto;
|
||||
pointer-events: none;
|
||||
|
||||
-webkit-border-radius: 100%;
|
||||
-moz-border-radius: 100%;
|
||||
border-radius: 100%;
|
||||
|
||||
-webkit-transform: translateX(-50%) translateY(-50%);
|
||||
-moz-transform: translateX(-50%) translateY(-50%);
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
|
||||
.donut-chart h2{
|
||||
text-align:center;
|
||||
position: absolute;
|
||||
line-height: 140%;
|
||||
width: 100%;
|
||||
margin-top:-30px;
|
||||
top:50%;
|
||||
z-index:500;
|
||||
pointer-events: none;
|
||||
|
||||
font-size:26px;
|
||||
font-weight:400;
|
||||
color:rgb(0,0,0);
|
||||
}
|
||||
|
||||
.donut-chart h2 span{
|
||||
display:block;
|
||||
width:100%;
|
||||
font-size:14px;
|
||||
color:rgb(142,143,143);
|
||||
margin-top:-10px;
|
||||
}
|
||||
|
||||
.donut-chart .spinner{
|
||||
z-index: 200;
|
||||
border-right: none;
|
||||
|
||||
-webkit-border-radius: 100% 0 0 100% / 50% 0 0 50%;
|
||||
-moz-border-radius: 100% 0 0 100% / 50% 0 0 50%;
|
||||
border-radius: 100% 0 0 100% / 50% 0 0 50%;
|
||||
|
||||
-webkit-transform: rotate(0deg);
|
||||
-moz-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
|
||||
-webkit-animation: rotateDonut 0.3s ease-in-out;
|
||||
-moz-animation: rotateDonut 0.3s ease-in-out;
|
||||
animation: rotateDonut 0.3s ease-in-out;
|
||||
|
||||
-webkit-transition: all 160ms ease-in-out;
|
||||
-moz-transition: all 160ms ease-in-out;
|
||||
transition: all 160ms ease-in-out;
|
||||
}
|
||||
|
||||
.spinner ~ .pie{
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.donut-chart.fill .pie,
|
||||
.pie-chart .pie{
|
||||
-webkit-box-shadow: 0 0 0 4px #bd380f;
|
||||
-moz-box-shadow: 0 0 0 4px #bd380f;
|
||||
box-shadow: 0 0 0 4px #bd380f;
|
||||
}
|
||||
|
||||
@-webkit-keyframes rotateDonut {0% {transform: rotate(0deg);}}
|
||||
@-moz-keyframes rotateDonut {0% {transform: rotate(0deg);}}
|
||||
@keyframes rotateDonut {0% {transform: rotate(0deg);}}
|
||||
|
||||
.donut-chart .spinner.temp{display:none;}
|
||||
|
||||
.donut-chart .pie{
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
background: #bd380f;
|
||||
|
||||
-webkit-transform-origin: 100% 50%;
|
||||
-moz-transform-origin: 100% 50%;
|
||||
transform-origin: 100% 50%;
|
||||
}
|
||||
|
||||
.donut-chart .mask{
|
||||
background:rgb(248,248,248);
|
||||
z-index: 400;
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
.pie-chart:after{
|
||||
display:none;
|
||||
}
|
||||
.chart.donut .pie-chart h2,
|
||||
.chart.donut .pie-chart h2 span{color:#FFF;}
|
||||
|
||||
/* pie chart */
|
||||
.chart.pie svg{width:100%;height:100%;}
|
||||
|
||||
.chart.pie {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.chart.pie svg text{
|
||||
text-anchor: middle;
|
||||
fill:white;
|
||||
stroke-width:0;
|
||||
transform:translate(120,-80);
|
||||
}
|
||||
.chart.pie svg path:hover{
|
||||
stroke-width:10px;
|
||||
}
|
||||
|
||||
.charts-tip{
|
||||
display:block;
|
||||
position: absolute;
|
||||
font-size: 16px;
|
||||
color: #FFF;
|
||||
background: rgba(0,0,0,0.8);
|
||||
pointer-events: none;
|
||||
font-family:sans-serif;
|
||||
padding:6px 12px;
|
||||
z-index:100;
|
||||
width:auto;
|
||||
|
||||
-webkit-border-radius:4px;
|
||||
-moz-border-radius:4px;
|
||||
border-radius:4px;
|
||||
}
|
||||
|
||||
.chart.pie .pie-legend{
|
||||
position:absolute;
|
||||
top:50%;
|
||||
right:0;
|
||||
margin-right:-30px;
|
||||
transform:translateX(100%) translateY(-50%);
|
||||
}
|
||||
|
||||
.chart.pie .pie-legend li{
|
||||
display:block;
|
||||
margin-bottom:14px;
|
||||
clear:both;
|
||||
}
|
||||
|
||||
.chart.pie .pie-legend li i{
|
||||
top:1px;
|
||||
position:relative;
|
||||
display:block;
|
||||
float:left;
|
||||
width:14px;
|
||||
height:14px;
|
||||
background:#DDD;
|
||||
margin-right:10px;
|
||||
|
||||
box-shadow:inset 0 0 0 1px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.chart.pie .pie-legend li p{clear:both;display:inline;}
|
||||
|
||||
/* pie chart */
|
||||
|
||||
/* line chart */
|
||||
|
||||
.chart.line{width:auto;height:auto;margin:0 auto;position:relative;}
|
||||
.chart .line-chart{
|
||||
min-width:100px;
|
||||
min-height:100px;
|
||||
width:100%;
|
||||
height:100%;
|
||||
margin:0px auto;
|
||||
display:block;
|
||||
position:relative;
|
||||
z-index:20;
|
||||
}
|
||||
|
||||
/* line chart borders and grids */
|
||||
.line-chart:after{
|
||||
content:"";
|
||||
display:block;
|
||||
position:absolute;
|
||||
left:0px;bottom:0px;
|
||||
height:1px;width:100%;
|
||||
background:rgb(238,238,238);
|
||||
padding-right:10px;
|
||||
}
|
||||
|
||||
.chart .grid{
|
||||
width:100%;
|
||||
height:100%;
|
||||
position:absolute;
|
||||
left:0px;
|
||||
bottom:0px;
|
||||
}
|
||||
.chart hr{
|
||||
position:absolute;
|
||||
left:0px;
|
||||
bottom:0px;
|
||||
width:100%;
|
||||
height:1px;
|
||||
outline:none;
|
||||
border:none;
|
||||
background:rgb(238,238,238);
|
||||
}
|
||||
|
||||
.chart hr:before{
|
||||
position:absolute;
|
||||
right:100%;
|
||||
top:0px;
|
||||
margin-right:20px;
|
||||
color:rgba(0,0,0,0.4);
|
||||
font-size:12px;
|
||||
content:attr(data-y);
|
||||
text-align:right;
|
||||
|
||||
-webkit-transform:translateX(-50%) translateY(-50%);
|
||||
-moz-transform:translateX(-50%) translateY(-50%);
|
||||
transform:translateX(-50%) translateY(-50%);
|
||||
}
|
||||
/* line chart borders and grids */
|
||||
|
||||
/* line chart line */
|
||||
.line-chart li{
|
||||
display:block;height:1px;
|
||||
float:left;position:relative;
|
||||
position:absolute;
|
||||
}
|
||||
|
||||
/* line chart points tooltip */
|
||||
.line-chart li a:hover:before,
|
||||
.line-chart li a:hover:after{display:block;z-index:10;}
|
||||
.line-chart li a:before{
|
||||
content:attr(data-y);
|
||||
cursor:pointer;
|
||||
display:none;
|
||||
position:absolute;
|
||||
font-size:14px;
|
||||
color:#FFF;
|
||||
bottom:100%;
|
||||
left:50%;
|
||||
margin-bottom:-4px;
|
||||
text-align:center;
|
||||
width:40px;
|
||||
background:rgba(0,0,0,0.8);
|
||||
padding:8px;
|
||||
z-index:40;
|
||||
|
||||
-webkit-transform:translateX(-50%);
|
||||
-moz-transform:translateX(-50%);
|
||||
transform:translateX(-50%);
|
||||
|
||||
-webkit-border-radius:3px;
|
||||
-moz-border-radius:3px;
|
||||
border-radius:3px;
|
||||
}
|
||||
|
||||
.line-chart li a:after{
|
||||
z-index:50;
|
||||
content:"";
|
||||
width: 0;
|
||||
height: 0;
|
||||
display:none;
|
||||
position:absolute;
|
||||
bottom:100%;
|
||||
left:50%;
|
||||
margin-bottom:-16px;
|
||||
|
||||
border:6px solid rgba(0,0,0,0);
|
||||
border-top: 6px solid rgba(0,0,0,0.8);
|
||||
|
||||
-webkit-transform:translateX(-50%);
|
||||
-moz-transform:translateX(-50%);
|
||||
transform:translateX(-50%);
|
||||
}
|
||||
|
||||
.line-chart li a{
|
||||
display:block;
|
||||
position:absolute;
|
||||
cursor:pointer;
|
||||
width:40px;
|
||||
height:40px;
|
||||
|
||||
left:0px;
|
||||
top:0px;
|
||||
z-index:30;
|
||||
|
||||
-webkit-transform:translateX(-50%) translateY(-50%);
|
||||
-moz-transform:translateX(-50%) translateY(-50%);
|
||||
transform:translateX(-50%) translateY(-50%);
|
||||
}
|
||||
/* line chart points tooltip */
|
||||
|
||||
/* line chart points */
|
||||
|
||||
.line-chart li span{
|
||||
display:block;height:1px;
|
||||
background:rgb(241,127,73);
|
||||
float:left;
|
||||
position:absolute;
|
||||
}
|
||||
|
||||
.line-chart.no-points li span{
|
||||
display:none;
|
||||
}
|
||||
|
||||
.line-chart li span:before{
|
||||
content:"";
|
||||
position:absolute;
|
||||
left:-4px;bottom:-4px;
|
||||
width:6px;height:6px;
|
||||
display:block;
|
||||
|
||||
-webkt-border-radius:50%;
|
||||
-moz-border-radius:50%;
|
||||
border-radius:50%;
|
||||
}
|
||||
|
||||
.line-chart li:hover span:before{
|
||||
-webkit-transform:scale(1.3);
|
||||
-moz-transform:scale(1.3);
|
||||
transform:scale(1.3);
|
||||
|
||||
-webkit-transition: all 200ms ease-in-out;
|
||||
-moz-transition: all 200ms ease-in-out;
|
||||
transition: all 200ms ease-in-out;
|
||||
}
|
||||
|
||||
.line-chart li span:before,
|
||||
.line-chart li span:after{
|
||||
background:rgb(241,127,73);
|
||||
border:2px solid #bd380f;
|
||||
|
||||
-webkit-box-shadow:0 0 0 4px #FFF;
|
||||
-moz-box-shadow:0 0 0 4px #FFF;
|
||||
box-shadow:0 0 0 4px #FFF;
|
||||
}
|
||||
/* line chart points */
|
||||
|
||||
/* line chart line */
|
||||
.chart.line svg,
|
||||
.chart.line > div{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position:absolute;
|
||||
bottom:0px;
|
||||
left:0px;
|
||||
opacity:1;
|
||||
|
||||
-webkit-animation: drawLine .3s ease-in-out;
|
||||
-moz-animation: drawLine .3s ease-in-out;
|
||||
animation: drawLine .3s ease-in-out;
|
||||
}
|
||||
.chart.line svg path{
|
||||
fill: rgba(241,127,73,0.0);
|
||||
stroke: rgb(241,127,73);
|
||||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
.chart.line.dotted svg path{
|
||||
/*if you want it dashed instead of filled*/
|
||||
stroke-dasharray: 3;
|
||||
}
|
||||
|
||||
.chart.line .fill svg path{
|
||||
fill: rgba(241,127,73,0.1);
|
||||
stroke:none;
|
||||
stroke-width:0px;
|
||||
}
|
||||
|
||||
/* line chart animation */
|
||||
@-webkit-keyframes drawLine {0% {opacity: 0;}}
|
||||
@-moz-keyframes drawLine {0% {opacity: 0;}}
|
||||
@keyframes drawLine {0% {opacity: 0;}}
|
||||
|
||||
@-webkit-keyframes drawChart {0% {width: 0;}}
|
||||
@-moz-keyframes drawChart {0% {width: 0;}}
|
||||
@keyframes drawChart {0% {width: 0;}}
|
||||
@@ -0,0 +1,120 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="description" content="A jquery plugin to create simple donut, bar or line charts with dom nodes, style with css.">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>cssCharts.js - jquery css charts</title>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="cssCharts.css">
|
||||
<script src="jquery.chart.js"></script>
|
||||
|
||||
<style>
|
||||
/* page specific styles*/
|
||||
h1{text-align:center;font-family:sans-serif;font-size:28px;color:#333;padding:40px 0 0 0;}
|
||||
h2{text-align:center;font-family:sans-serif;font-size:18px;color:#333;padding:40px 0 0 0;}
|
||||
hr{width:60%;height:1px;background:none;border:none;border-bottom:1px dashed rgba(0,0,0,0.1);outline:none;margin:40px auto 60px auto;}
|
||||
|
||||
.desc p{text-align:center;font-size:16px;color:rgba(0,0,0,0.6);padding:20px 0 0 0;font-family:sans-serif;}
|
||||
.desc a{color:blue;}
|
||||
.wrap{margin:0 auto;width:640px;padding-bottom:100px;}
|
||||
#line{width:400px;}
|
||||
/* page specific styles*/
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrap">
|
||||
|
||||
<div class="desc">
|
||||
<h1>cssCharts.js plugin</h1><p>by
|
||||
<a href="http://twitter.com/thysultan">@thysultan</a> on
|
||||
<a href="https://github.com/sultantarimo/cssCharts.js">github</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h2>bar chart</h2>
|
||||
<hr>
|
||||
|
||||
<div class="chart">
|
||||
<ul class="bar-chart" data-bars="[4,2],[4,5],[8,3],[4,2],[4,2]" data-max="10" data-unit="k" data-width="24"></ul>
|
||||
</div>
|
||||
<!-- data max is the 100% point of the graph -->
|
||||
<!-- set data-grid to 0 for no grid -->
|
||||
<!-- data-width is the individual bars width -->
|
||||
|
||||
<h2>donut chart v1</h2>
|
||||
<hr>
|
||||
|
||||
<div class="chart">
|
||||
<div class="donut-chart" data-percent="0.61" data-title="uptime %"></div>
|
||||
</div>
|
||||
|
||||
<h2>donut chart v2</h2>
|
||||
<hr>
|
||||
|
||||
<div class="chart">
|
||||
<div class="donut-chart fill" data-percent="0.61" data-title="uptime %"></div>
|
||||
</div>
|
||||
|
||||
<h2>donut chart v2</h2>
|
||||
<hr>
|
||||
|
||||
<div class="chart">
|
||||
<div class="donut-chart pie-chart fill" data-percent="0.61" data-title="uptime %"></div>
|
||||
</div>
|
||||
<!-- pie-chart class for pie chart -->
|
||||
<!-- fill class for default donut fill enabled-->
|
||||
|
||||
<h2>line chart v1</h2>
|
||||
<hr>
|
||||
|
||||
<div class="chart">
|
||||
<ul data-cord="[[0,70,120,160,200,262,280,340,380,420,460],[140,150,40,90,40,60,120,20,60,90,10]],[[0,70,120,160,200,262,280,340,380,420,460],[200,190,80,130,80,100,160,60,100,130,50]]" class="line-chart"></ul>
|
||||
</div>
|
||||
<!-- multiple graphs [[x cords],[y cords]] [[x cords],[y cords]] -->
|
||||
|
||||
<h2>line chart v2</h2>
|
||||
<hr>
|
||||
|
||||
<div class="chart" id="line">
|
||||
<ul data-cord="[0,90,120,160,200,262,280,340,380,420,460],[40,150,40,90,40,60,120,20,60,90,10]" class="line-chart"></ul>
|
||||
</div>
|
||||
|
||||
<h2>line chart v3</h2>
|
||||
<hr>
|
||||
|
||||
<div class="chart dotted">
|
||||
<ul data-cord="[0,90,120,160,200,262,280,340,380,420,460],[40,150,40,90,40,60,120,20,60,90,10]" class="line-chart"></ul>
|
||||
</div>
|
||||
|
||||
<h2>line chart v4</h2>
|
||||
<hr>
|
||||
|
||||
<div class="chart dotted">
|
||||
<ul data-cord="[0,90,120,160,200,262,280,340,380,420,460],[40,150,40,90,40,60,120,20,60,90,10]" data-fill="1" class="line-chart no-points"></ul>
|
||||
</div>
|
||||
<!-- single graph [x cords],[y cords] -->
|
||||
|
||||
|
||||
<br><br><br>
|
||||
<h2>pie chart v1</h2>
|
||||
<hr>
|
||||
|
||||
<div class="chart">
|
||||
<div class="pie-thychart" data-set='[["people", 20], ["countries",30], ["developers",60]]' data-colors="#FBE4DB,#F17F49,#BD380F"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(function() {
|
||||
$('.bar-chart').cssCharts({type:"bar"});
|
||||
$('.donut-chart').cssCharts({type:"donut"}).trigger('show-donut-chart');
|
||||
$('.line-chart').cssCharts({type:"line"});
|
||||
|
||||
$('.pie-thychart').cssCharts({type:"pie"});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,120 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="description" content="A jquery plugin to create simple donut, bar or line charts with dom nodes, style with css.">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>cssCharts.js - jquery css charts</title>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="cssCharts.css">
|
||||
<script src="jquery.chart.js"></script>
|
||||
|
||||
<style>
|
||||
/* page specific styles*/
|
||||
h1{text-align:center;font-family:sans-serif;font-size:28px;color:#333;padding:40px 0 0 0;}
|
||||
h2{text-align:center;font-family:sans-serif;font-size:18px;color:#333;padding:40px 0 0 0;}
|
||||
hr{width:60%;height:1px;background:none;border:none;border-bottom:1px dashed rgba(0,0,0,0.1);outline:none;margin:40px auto 60px auto;}
|
||||
|
||||
.desc p{text-align:center;font-size:16px;color:rgba(0,0,0,0.6);padding:20px 0 0 0;font-family:sans-serif;}
|
||||
.desc a{color:blue;}
|
||||
.wrap{margin:0 auto;width:640px;padding-bottom:100px;}
|
||||
#line{width:400px;}
|
||||
/* page specific styles*/
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrap">
|
||||
|
||||
<div class="desc">
|
||||
<h1>cssCharts.js plugin</h1><p>by
|
||||
<a href="http://twitter.com/thysultan">@thysultan</a> on
|
||||
<a href="https://github.com/sultantarimo/cssCharts.js">github</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h2>bar chart</h2>
|
||||
<hr>
|
||||
|
||||
<div class="chart">
|
||||
<ul class="bar-chart" data-bars="[4,2],[4,5],[8,3],[4,2],[4,2]" data-max="10" data-unit="k" data-width="24"></ul>
|
||||
</div>
|
||||
<!-- data max is the 100% point of the graph -->
|
||||
<!-- set data-grid to 0 for no grid -->
|
||||
<!-- data-width is the individual bars width -->
|
||||
|
||||
<h2>donut chart v1</h2>
|
||||
<hr>
|
||||
|
||||
<div class="chart">
|
||||
<div class="donut-chart" data-percent="0.61" data-title="uptime %"></div>
|
||||
</div>
|
||||
|
||||
<h2>donut chart v2</h2>
|
||||
<hr>
|
||||
|
||||
<div class="chart">
|
||||
<div class="donut-chart fill" data-percent="0.61" data-title="uptime %"></div>
|
||||
</div>
|
||||
|
||||
<h2>donut chart v2</h2>
|
||||
<hr>
|
||||
|
||||
<div class="chart">
|
||||
<div class="donut-chart pie-chart fill" data-percent="0.61" data-title="uptime %"></div>
|
||||
</div>
|
||||
<!-- pie-chart class for pie chart -->
|
||||
<!-- fill class for default donut fill enabled-->
|
||||
|
||||
<h2>line chart v1</h2>
|
||||
<hr>
|
||||
|
||||
<div class="chart">
|
||||
<ul data-cord="[[0,70,120,160,200,262,280,340,380,420,460],[140,150,40,90,40,60,120,20,60,90,10]],[[0,70,120,160,200,262,280,340,380,420,460],[200,190,80,130,80,100,160,60,100,130,50]]" class="line-chart"></ul>
|
||||
</div>
|
||||
<!-- multiple graphs [[x cords],[y cords]] [[x cords],[y cords]] -->
|
||||
|
||||
<h2>line chart v2</h2>
|
||||
<hr>
|
||||
|
||||
<div class="chart" id="line">
|
||||
<ul data-cord="[0,90,120,160,200,262,280,340,380,420,460],[40,150,40,90,40,60,120,20,60,90,10]" class="line-chart"></ul>
|
||||
</div>
|
||||
|
||||
<h2>line chart v3</h2>
|
||||
<hr>
|
||||
|
||||
<div class="chart dotted">
|
||||
<ul data-cord="[0,90,120,160,200,262,280,340,380,420,460],[40,150,40,90,40,60,120,20,60,90,10]" class="line-chart"></ul>
|
||||
</div>
|
||||
|
||||
<h2>line chart v4</h2>
|
||||
<hr>
|
||||
|
||||
<div class="chart dotted">
|
||||
<ul data-cord="[0,90,120,160,200,262,280,340,380,420,460],[40,150,40,90,40,60,120,20,60,90,10]" data-fill="1" class="line-chart no-points"></ul>
|
||||
</div>
|
||||
<!-- single graph [x cords],[y cords] -->
|
||||
|
||||
|
||||
<br><br><br>
|
||||
<h2>pie chart v1</h2>
|
||||
<hr>
|
||||
|
||||
<div class="chart">
|
||||
<div class="pie-thychart" data-set='[["people", 20], ["countries",30], ["developers",60]]' data-colors="#FBE4DB,#F17F49,#BD380F"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(function() {
|
||||
$('.bar-chart').cssCharts({type:"bar"});
|
||||
$('.donut-chart').cssCharts({type:"donut"}).trigger('show-donut-chart');
|
||||
$('.line-chart').cssCharts({type:"line"});
|
||||
|
||||
$('.pie-thychart').cssCharts({type:"pie"});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,505 @@
|
||||
/*
|
||||
* cssCharts v0.3.0
|
||||
* jquery plugin to create donut and bar charts with css
|
||||
* https://github.com/sultantarimo
|
||||
*
|
||||
* (c)2015 Sultan Tarimo - sultantarimo@me.com
|
||||
* Released under the MIT license
|
||||
*/
|
||||
(function($){
|
||||
$.fn.extend({
|
||||
cssCharts: function(opts) {
|
||||
var defs = {};
|
||||
opts = $.extend(defs, opts);
|
||||
return this.each(function() {
|
||||
var _this = this;
|
||||
if(opts.type == "bar"){thychart.bar(this);}
|
||||
else if(opts.type == "line"){thychart.line(this);}
|
||||
else if(opts.type == "donut"){thychart.donut(this);}
|
||||
else if(opts.type == "pie"){thychart.pie(this);}
|
||||
else{$(this).parent().hide();}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
var thychart = {
|
||||
pie: function(node){
|
||||
var makeSVG = function(tag, attrs, val, title, i, fill) {
|
||||
var $el = $(document.createElementNS('http://www.w3.org/2000/svg', tag));
|
||||
var $g = $(document.createElementNS('http://www.w3.org/2000/svg', "g"));
|
||||
|
||||
var $rep = $('<li><i></i><p></p></li>');
|
||||
$rep.find("p").html(title+": " + val);
|
||||
$rep.find("i").css({background: fill});
|
||||
|
||||
$chart.find("."+$leg.attr("class")).append($rep);
|
||||
|
||||
for (var k in attrs){
|
||||
$el.attr(k,attrs[k]).attr("data-val", val).attr("data-title",title).attr("id","path"+i).attr("class","path");
|
||||
$g.append($el).attr("id","pathCont"+i).attr("class","pathCont");
|
||||
}
|
||||
return $g[0];
|
||||
};
|
||||
|
||||
var drawArcs = function($svg, pieData){
|
||||
var titles = [];
|
||||
var values = [];
|
||||
|
||||
$.each(pieData, function(index, value) {
|
||||
values.push(value[1]);
|
||||
titles.push(value[0]);
|
||||
});
|
||||
|
||||
pieData = values;
|
||||
|
||||
var total = pieData.reduce(function (accu, that) { return that + accu; }, 0);
|
||||
var sectorAngleArr = pieData.map(function (v) { return 360 * v / total; });
|
||||
|
||||
var startAngle = -90; // from the top instead of side
|
||||
var endAngle = -90;
|
||||
for (var i=0; i<sectorAngleArr.length; i++){
|
||||
startAngle = endAngle;
|
||||
endAngle = startAngle + sectorAngleArr[i];
|
||||
|
||||
var x1,x2,y1,y2 ;
|
||||
|
||||
x1 = parseInt(Math.round(200 + 195*Math.cos(Math.PI*startAngle/180)));
|
||||
y1 = parseInt(Math.round(200 + 195*Math.sin(Math.PI*startAngle/180)));
|
||||
|
||||
x2 = parseInt(Math.round(200 + 195*Math.cos(Math.PI*endAngle/180)));
|
||||
y2 = parseInt(Math.round(200 + 195*Math.sin(Math.PI*endAngle/180)));
|
||||
|
||||
var d = "M200,200 L" + x1 + "," + y1 + " A195,195 0 " +
|
||||
((endAngle-startAngle > 180) ? 1 : 0) + ",1 " + x2 + "," + y2 + " z";
|
||||
|
||||
var rand = function(min, max) {
|
||||
return parseInt(Math.random() * (max-min+1), 10) + min;
|
||||
};
|
||||
|
||||
var getColor = function () {
|
||||
var color;
|
||||
|
||||
if(colorSet) {
|
||||
color = (colorSet[i]);
|
||||
}
|
||||
else{
|
||||
var h = rand(10, 60); // color hue between 0° and 360°
|
||||
var s = rand(20, 100); // saturation 0-100%
|
||||
var l = rand(30, 60); // lightness 0-100%
|
||||
color = 'hsl(' + h + ',' + s + '%,' + l + '%)';
|
||||
}
|
||||
|
||||
return color;
|
||||
};
|
||||
|
||||
var c = parseInt(i / sectorAngleArr.length * 360);
|
||||
var fill = getColor();
|
||||
var arc = makeSVG("path", {d: d, fill: fill}, pieData[i], titles[i], i, fill);
|
||||
$svg.prepend(arc);
|
||||
$chart.prepend($svg);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
var $chart = $(node);
|
||||
var dataSet = $(node).attr("data-set");
|
||||
var colorSet = $(node).attr("data-colors");
|
||||
if(colorSet){ colorSet = colorSet.split(","); }
|
||||
|
||||
var val = JSON.parse(dataSet);
|
||||
|
||||
var $svg = $('<svg viewBox="0 0 400 400" class="svg"></svg>');
|
||||
var $leg = $('<ul class="pie-legend"></ul>');
|
||||
$chart.append($leg);
|
||||
|
||||
$chart.parent().addClass("pie");
|
||||
drawArcs($svg, val);
|
||||
|
||||
var mPos = {x: -1,y: -1};
|
||||
|
||||
var getMousePos = function(){
|
||||
var $tooltip = $('<div class="charts-tip"></div>');
|
||||
|
||||
$chart.mousemove(function(e) {
|
||||
mPos.x = e.pageX;
|
||||
mPos.y = e.pageY;
|
||||
var $target = $(e.target).clone();
|
||||
var $parent = $(e.target).parent().clone();
|
||||
|
||||
var $last = $chart.find(".pathCont:last-child .path:last-child");
|
||||
var val = $target.attr("data-val");
|
||||
var title = $target.attr("data-title");
|
||||
var _id = $target.attr("id");
|
||||
var color = $target.attr("fill");
|
||||
|
||||
if(val){
|
||||
$tooltip.css({
|
||||
left: mPos.x,
|
||||
top: mPos.y
|
||||
});
|
||||
|
||||
var setTooltip = function(){
|
||||
$("body").find("."+$tooltip.attr("class")).remove();
|
||||
$tooltip.html(title+": " + val);
|
||||
$("body").append($tooltip);
|
||||
}();
|
||||
|
||||
if(color){ $(e.target).attr("stroke", color); }
|
||||
|
||||
var setOrder = function(){
|
||||
var $lastId = $last.attr("id");
|
||||
var $targetId = $target.attr("id");
|
||||
|
||||
if($lastId !== $targetId){
|
||||
$chart.find("#"+$target.attr("id")).parent().remove();
|
||||
$chart.find(".svg").append($parent);
|
||||
}
|
||||
}();
|
||||
}
|
||||
});
|
||||
|
||||
$chart.mouseleave(function(e) {
|
||||
// remove tooltip
|
||||
$("body").find("."+$tooltip.attr("class")).remove();
|
||||
});
|
||||
|
||||
}();
|
||||
|
||||
|
||||
},
|
||||
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;
|
||||
|
||||
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%
|
||||
var chart$clone,val1,val2;
|
||||
|
||||
if(val < r){
|
||||
val1 = val;
|
||||
|
||||
chart$clone = jQuery.extend({}, chart);
|
||||
chart$clone.values.spinner = val1;
|
||||
chart$clone.values.selector = "mask";
|
||||
|
||||
prependNodes(chart$clone.nodes);
|
||||
}
|
||||
// IF GREATER THAN 50%
|
||||
else{
|
||||
val2 = val - r;
|
||||
val1 = val - val2;
|
||||
val2 = val2 + r;
|
||||
|
||||
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,10) === 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 setPoint = function(cord, node){
|
||||
var $node = $(node).clone();
|
||||
$node.find("a").attr("data-x", cord.x).attr("data-y", cord.y);
|
||||
return $node;
|
||||
};
|
||||
|
||||
var setPosition = function(data, cord){
|
||||
x = (( cord.x / dim.maxX ) * 100) + "%";
|
||||
y = (( cord.y / height ) * 100) + "%";
|
||||
|
||||
cord.x = cord.x + "px";
|
||||
cord.y = cord.y + "px";
|
||||
|
||||
$("ul").find(data).css("left",x);
|
||||
$("ul").find(data).css("bottom",y);
|
||||
};
|
||||
|
||||
var setContainerDimensions = function($chart,val){
|
||||
var height = [];
|
||||
var width = [];
|
||||
|
||||
$.each(val, function(index, value) {
|
||||
$.each(val[index][1], function(index, value) {height.push(value);});
|
||||
$.each(val[index][0], function(index, value) {width.push(value);});
|
||||
});
|
||||
|
||||
maxY = Math.max.apply(Math, height) + 20;
|
||||
maxX = Math.max.apply(Math, width) + 20;
|
||||
|
||||
height = maxY;
|
||||
width = $chart.parent().width();
|
||||
|
||||
$chart.parent().css({width: width, height: height});
|
||||
$chart.parent().addClass("line");
|
||||
|
||||
return {width:width,height:height, maxX: maxX,maxY: maxY};
|
||||
};
|
||||
|
||||
var convertToArrayOfObjects = function(val, height) {
|
||||
var dataClone = val.slice(0),
|
||||
keys = dataClone.shift(),
|
||||
i = 0,
|
||||
k = 0,
|
||||
obj = null,
|
||||
output = [];
|
||||
|
||||
for (i = 0; i < dataClone.length; i++) {
|
||||
obj = {};
|
||||
|
||||
for (k = 0; k < keys.length; k++) {
|
||||
var x = keys[k];
|
||||
var y = dim.height-dataClone[i][k];
|
||||
|
||||
x = (x/dim.maxX) * dim.width;
|
||||
y = (y/dim.maxY) * dim.height;
|
||||
|
||||
obj[k] = {
|
||||
x: x,
|
||||
y: y
|
||||
};
|
||||
}
|
||||
output.push(obj);
|
||||
}
|
||||
return output[0];
|
||||
};
|
||||
|
||||
var drawSVG = function(type, val, height, index){
|
||||
var $svg = ".svgCont";
|
||||
|
||||
if(type){
|
||||
$svg = $('<div class="svgCont"><svg class="svg" viewBox="0 0 ' + width + ' ' + height + '"><path class="path" d=""></path></svg></div>');
|
||||
|
||||
$svg.addClass(".p"+index);
|
||||
if(type==2){$svg.addClass("fill");}
|
||||
$chart.parent().append($svg);
|
||||
}
|
||||
|
||||
var points = convertToArrayOfObjects(val, height);
|
||||
var counter = 0;
|
||||
|
||||
var addPoint = function(points, counter, isFirst){
|
||||
var new_point;
|
||||
|
||||
if(isFirst == "last"){
|
||||
var last = Object.keys(points).length-1;
|
||||
new_point = " L" + points[last].x + "," + points[last].x + " L" + 0 + "," + points[last].x +" Z";
|
||||
}else{
|
||||
var x = Math.floor(points[counter].x);
|
||||
var y = Math.floor(points[counter].y);
|
||||
|
||||
new_point = (isFirst? "M" : " ")+x+","+y;
|
||||
}
|
||||
|
||||
$chart.parent().find($svg).find("path").attr("d", $chart.parent().find($svg).find("path").attr("d")+""+new_point);
|
||||
counter++;
|
||||
|
||||
if(counter < Object.keys(points).length){
|
||||
addPoint(points, counter, false);
|
||||
}
|
||||
|
||||
if(counter == Object.keys(points).length && type == 2){
|
||||
addPoint(points, counter, "last");
|
||||
}
|
||||
};
|
||||
addPoint(points, counter, true);
|
||||
};
|
||||
|
||||
var $chart = $(node);
|
||||
$chart.parent().find(".svgCont, .grid").remove();
|
||||
$chart.parent().find(".line-chart").empty();
|
||||
|
||||
var fill = $chart.attr("data-fill");
|
||||
var grid = $("<div class='grid'></div>");
|
||||
$chart.parent().append(grid);
|
||||
var $pointsCont = $('<g class="points"></g>');
|
||||
var container;
|
||||
|
||||
var oneDim = "[" + $chart.attr("data-cord") + "]";
|
||||
var cord = $chart.attr("data-cord");
|
||||
cord = JSON.parse("[" + cord + "]");
|
||||
|
||||
if(cord[0].length !== 2){
|
||||
cord = JSON.parse("[" + oneDim + "]");
|
||||
}
|
||||
|
||||
var dim = setContainerDimensions($chart, cord);
|
||||
var height = dim.height;
|
||||
var width = dim.width;
|
||||
|
||||
var loopCord = function(index, val, height){
|
||||
for (var i = 0; i < val[index].length; i++) {
|
||||
cord = {
|
||||
x: val[0][i],
|
||||
y: val[1][i]
|
||||
};
|
||||
|
||||
var point = setPoint(cord, $("<li><span></span><a></a></li>"));
|
||||
|
||||
$chart.append(point);
|
||||
setPosition(point, cord);
|
||||
|
||||
if(i % 2 === 0){
|
||||
var gridSpace = height / 10;
|
||||
var line = $("<hr/>").css({bottom: i*gridSpace}).attr("data-y", i*gridSpace);
|
||||
$chart.parent().find(".grid").append(line);
|
||||
}
|
||||
}
|
||||
|
||||
drawSVG(1, val, height, index);
|
||||
if(fill){
|
||||
drawSVG(2, val, height, index);
|
||||
}
|
||||
};
|
||||
|
||||
$.each(cord, function(i, val) {
|
||||
loopCord(i, val, height);
|
||||
});
|
||||
|
||||
}
|
||||
};
|
||||
})(jQuery);
|
||||
1
hybrid-bootstrap-admin-template/assets/js/Lightweight-Chart/jquery.chart.min.js
vendored
Normal file
1
hybrid-bootstrap-admin-template/assets/js/Lightweight-Chart/jquery.chart.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@@ -0,0 +1,59 @@
|
||||
# cssCharts.js
|
||||
jquery plugin to create simple donut, bar or line charts with dom nodes. style with css.
|
||||
|
||||
[http://thysultan.com/projects/cssCharts/](http://thysultan.com/projects/cssCharts/)
|
||||
|
||||
### Include:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="chart.css">
|
||||
<script src="jquery.chart.js"></script>
|
||||
```
|
||||
|
||||
### run:
|
||||
|
||||
```javascript
|
||||
|
||||
$('.bar-chart').cssCharts({type:"bar"});
|
||||
$('.donut-chart').cssCharts({type:"donut"});
|
||||
$('.line-chart').cssCharts({type:"line"});
|
||||
|
||||
```
|
||||
### example donut/pie chart
|
||||
|
||||
optional: to trigger countUp counter for the donut chart as seen on the preview page.
|
||||
|
||||
```javascript
|
||||
$('.donut-chart').cssCharts({type:"donut"}).trigger('show-donut-chart');
|
||||
```
|
||||
|
||||
add "pie-chart" class to .donut-chart if you want to convert it to a pie chart, i.e
|
||||
|
||||
```html
|
||||
<div class="donut-chart pie-chart" data-percent="0.61" data-title="uptime %"></div>
|
||||
```
|
||||
|
||||
- - -
|
||||
|
||||
### example line chart
|
||||
|
||||
```html
|
||||
<ul data-cord="[x1,x2,x3,x4],[y1,y2,y3,y4]" class="line-chart"></ul>
|
||||
$('.line-chart').cssCharts({type:"line"});
|
||||
```
|
||||
|
||||
* insure x cordinates are 0 - ascending.
|
||||
* insure y cordinates are 0 or greater.
|
||||
|
||||
- - -
|
||||
|
||||
### example bar chart
|
||||
|
||||
```html
|
||||
<ul class="bar-chart" data-bars="[x1,x2],[y1,y2]" data-max="10" data-unit="k" data-grid="1" data-width="24">
|
||||
$('.bar-chart').cssCharts({type:"bar"});
|
||||
```
|
||||
|
||||
- - -
|
||||
|
||||
style to your hearts content, see index.html for an example implementation.
|
||||
Reference in New Issue
Block a user