Skip to content

Instantly share code, notes, and snippets.

@abernier

abernier/.gitignore

Last active June 1, 2023 15:45
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save abernier/4961058 to your computer and use it in GitHub Desktop.
Save abernier/4961058 to your computer and use it in GitHub Desktop.
Download ZIP
pie with CSS
Raw
.gitignore
node_modules/
Raw
README.md

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')
Raw
index.css
/* 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;
}
Raw
index.html
<!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>
Raw
index.js
(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);
Raw
minimal.html
<!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>
Display the source blob
Display the rendered blob
Raw
pac-font-webfont.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
package.json
{
"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
Copy link
Author

http://bl.ocks.org/abernier/4961058

@abernier
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment