Skip to content

Instantly share code, notes, and snippets.

@elchappo

elchappo/HTML 5

Created October 20, 2012 22:42
Show Gist options
  • Save elchappo/3925075 to your computer and use it in GitHub Desktop.
Save elchappo/3925075 to your computer and use it in GitHub Desktop.
Download ZIP
Custom Graphael
Raw
HTML 5
<html>
<figure id="hero-graph"><noscript>JavaScript is required to view this diagram. Your web browser either does not support JavaScript, or scripts are being blocked.To find out whether your browser supports JavaScript, or to allow scripts, see the browser's online help.</noscript> </figure>
</html>
Raw
JS Settings
<script>
var settingsHeroGraph = new Object();
// hero graph
settingsHeroGraph.container = "hero-graph";
settingsHeroGraph.pieLegendPos = "south east";
settingsHeroGraph.legendTop = 55;
settingsHeroGraph.legendLeft = 10;
settingsHeroGraph.pieRadius = 130;
settingsHeroGraph.pieXpos = 450;
settingsHeroGraph.pieYpos = 200;
settingsHeroGraph.pieData = [ 16.2,32.8,43.7,4,2.2 ];
settingsHeroGraph.pieLegend = [
"Internet Explorer",
"Firefox",
"Chrome",
"Safari",
"Opera"
];
settingsHeroGraph.legend = "http://en.wikipedia.org/wiki/Usage_share_of_web_browsers";
</script>
Raw
JS wraper
<script>
$(document).ready(function(){
if(settingsHeroGraph.hasOwnProperty('container')) {
setGraph(settingsHeroGraph);
}
});
function setGraph(settings){
/*
*https://github.com/kennyshen/g.raphael/blob/master/docs/pie.md
*http://jburrows.wordpress.com/2011/02/21/documentation-for-graphael-g-line-js/
*https://github.com/kennyshen/g.raphael/blob/master/docs/reference.js
*http://www.exratione.com/2011/10/a-few-tips-for-graphael-line-charts/
*/
var r = Raphael(settings.container),
pie = r.piechart(settings.pieXpos, settings.pieYpos, settings.pieRadius,
settings.pieData, {
legend: settings.pieLegend,
colors: [
"#475664",
"#8C5F66",
"#DB7369",
"#F29961",
"#F0B165"
],
stroke: 'none'
});
r.text(4, r.height - 10, settings.legend).attr({
font: "12px sans-serif",
fill: "#000",
'text-anchor': 'start'
});
for( var i = 0, l = pie.labels.length; i < l; i++ ) {
// change the axis and tick-marks
//pie.labels[i].attr("stroke", "#000000");
pie.labels[i].attr("font", "13px sans-serif");
pie.labels[i].attr("x", settings.legendLeft+20);
pie.labels[i].attr("cx", settings.legendLeft);
pie.labels[i].attr("y", settings.legendTop+i*20);
pie.labels[i].attr("cy", settings.legendTop+i*20);
pie.labels[i][1].attr( "fill", "#000000" );
}
pie.each(function(){
this.sector.scale(0, 0, this.cx, this.cy);
this.sector.animate({
transform: 's1 1 ' + this.cx + ' ' + this.cy
}, 1000, "bounce");
});
pie.hover(function () {
pie.each(function() {
if(this.sector.hasOwnProperty('t')) {
this.sector.t.remove();
}
});
var that = this.sector;
this.sector.stop();
this.sector.animate({
transform: 's1.1 1.1 ' + this.cx + ' ' + this.cy
}, 500, "bounce");
pie.each(function() {
if(this.sector.id === that.id) {
this.sector.animate({
"opacity":1
}, 1000);
this.sector.scale(1.1, 1.1, this.cx, this.cy);
this.sector.t = r.text(this.x, this.y, this.sector.value.value+'%').attr({
"font-size": 18,
"fill":"#FFF"
});
if (this.label) {
this.label[0].stop();
this.label[0].attr({
r: 7.5
});
this.label[1].attr({
"font-weight": 800
});
}
} else {
this.sector.animate({
"opacity":0.80
}, 1000);
//this.sector.t.remove();
}
});
}, function () {
pie.animate({
"opacity":1
}, 1000);
this.sector.animate({
transform: 's1 1 ' + this.cx + ' ' + this.cy
}, 1500, "bounce");
if (this.label) {
this.label[0].animate({
r: 5
}, 500, "bounce");
this.label[1].attr({
"font-weight": 400
});
}
});
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment