Skip to content

Instantly share code, notes, and snippets.

@abernier abernier/.gitignore
Last active Dec 13, 2015

Embed
What would you like to do?
pie with CSS
node_modules/

DEMO is here: http://bl.ocks.org/abernier/raw/4961058/

Explanation here: http://stackoverflow.com/questions/2280127/css-pie-charts#answer-15015424

INSTALL

client-side

<link rel="stylesheet" href="https://gist.githubusercontent.com/abernier/4961058/raw/index.css">

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://gist.githubusercontent.com/abernier/4961058/raw/index.js"></script>
<script>
var mypie = new Pacss('#mypie');
</script>

server-side

npm install https://gist.github.com/abernier/4961058/download

then simply:

var pacss = require('pacss');
new Pacss('#mypie')
/* 1em */
.pacss {
display:inline-block;vertical-align:middle; position:relative;
width:.5em;height:1em;
overflow:hidden;
-moz-transform-origin:left center;-webkit-transform-origin:left center;-ms-transform-origin:left center;transform-origin:left center;
margin-left:.5em;
}
.pacss.big:after,
.pacss:before {
content: " ";
position:absolute;
width:.5em;
height:1em;
background:#000000;
}
.pacss:before {
left:-100%;
border-radius:.5em 0 0 .5em;
-moz-transform-origin:right center;-webkit-transform-origin:right center;-ms-transform-origin:right center;transform-origin:right center;
}
.pacss.big {
width:1em;
-moz-transform-origin:center center;-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center;
margin-left:0;
}
.pacss.big:before {left:0;}
.pacss.big:after {
left:50%;
border-radius:0 .5em .5em 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1">
<title></title>
<link rel="stylesheet" href="index.css">
<style>
@font-face {
font-family: 'pacfontregular';
src: url('pac-font-webfont.eot');
src: url('pac-font-webfont.eot?#iefix') format('embedded-opentype'),
url('pac-font-webfont.woff') format('woff'),
url('pac-font-webfont.ttf') format('truetype'),
url('pac-font-webfont.svg#pacfontregular') format('svg');
font-weight: normal;
font-style: normal;
}
body {width:320px; margin:0 auto;background:#1919A9; text-align:center; color:white; text-shadow:1px 1px 1px black; font-size:200%;}
.pacss.big:after,
.pacss:before {background:#FFFF00;}
.dots:before,
.dots:after {content:"∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ";}
h1 {font-family:"pacfontregular", sans-serif; margin-bottom:0;}
.tagline {font-size:50%; font-family:"Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;}
.tagline {overflow:hidden; margin-top:.5em;}
.tagline em {position:relative;}
.tagline em:before,
.tagline em:after {content:"";display:block;width:100%;border-top:1px solid; position:absolute; top:50%;left:100%;}
.tagline em:after {left:auto;right:100%;}
</style>
</head>
<body>
<h1>PAC0SS</h1>
<p class="tagline"><em>Pie charts with CSS</em></p>
<p class="dots">
<span id="pie1" class="pie"></span>
</p>
<input type="range" name="val" value="270" min="0" max="360">
<p>see the <a href="minimal.html">minimal example</a> and the <a href="https://gist.github.com/abernier/4961058#file-README-md">README</a></p>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="index.js"></script>
<script>
var $input = $('input[name="val"]');
function midrotate(el, val) {
$(el).css({transform: 'rotate(' + (-val/2 - 90) + 'deg)'});
}
var mypie1 = new Pacss('#pie1', {val: $input.val()});
midrotate(mypie1.el, $input.val());
$input.change(function (e) {
var val = $input.val();
mypie1.val = val;
mypie1.paint();
midrotate(mypie1.el, val);
});
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-13126287-1', 'abernier.name');
ga('send', 'pageview');
</script>
</body>
</html>
(function () {
var $ = this.jQuery || require('jquery');
function Pacss(el, options) {
options || (options = {
val: 0
});
this.$el = $(el);
this.el = this.$el[0];
// .pie
this.$el.addClass('pacss');
this.uid = 'pie' + ($.guid++);
// data-pie-uid="pie-1234"
this.$el.attr('data-pie-uid', this.uid);
// Inject special stylesheet
this.$stylesheet = $('<style id="' + this.uid + '"/>').appendTo("head");
// init value
this.val = options.val;
this.paint();
}
Pacss.prototype.paint = function () {
this.$el.toggleClass('big', (this.val%360 > 180));
this.$stylesheet.text('[data-pie-uid="' + this.uid + '"]:before {-moz-transform:rotate(' + this.val + 'deg);-webkit-transform:rotate(' + this.val + 'deg);-ms-transform:rotate(' + this.val + 'deg);transform:rotate(' + this.val + 'deg);}');
}
// Exports
this.Pacss = Pacss;
if (typeof module !== "undefined" && module !== null) {
module.exports = this.Pacss;
}
}).call(this);
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1">
<title></title>
<link rel="stylesheet" href="index.css">
<style>
.pacss {font-size:500%;}
script:not([src]) {display:block; white-space:pre; font-family:monospace;}
</style>
</head>
<body>
<p>
<span id="pie1"></span>
<input type="range" name="val" value="270" min="0" max="360">
</p>
<p><span id="pie2"></span></p>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="index.js"></script>
<script>
//
// Ex 1: simple with range input
//
$input = $('input[name="val"]');
var mypie1 = new Pacss('#pie1', {val: $input.val()});
$input.change(function (e) {
var val = $input.val();
mypie1.val = val;
mypie1.paint();
});
//
// Ex 2: animated
//
var mypie2 = new Pacss('#pie2');
setInterval(function (){
mypie2.val++;
mypie2.paint();
}, 1000/60);
</script>
</body>
</html>
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
{
"name": "pacss",
"version": "0.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://gist.github.com/4961058.git"
},
"keywords": [
"css",
"pie",
"charts"
],
"author": "Antoine BERNIER",
"license": "ISC",
"bugs": {
"url": "https://gist.github.com/4961058"
},
"homepage": "http://bl.ocks.org/abernier/raw/4961058/",
"dependencies": {
"jquery": "^2.1.0"
}
}
@abernier

This comment has been minimized.

Copy link
Owner Author

abernier commented Feb 16, 2013

@abernier

This comment has been minimized.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.