Skip to content

Instantly share code, notes, and snippets.

@sapito169

sapito169/index.html

Created January 20, 2019 05:06
Show Gist options
  • Save sapito169/3ae526fe9e753ec61211dcb52f1a98f5 to your computer and use it in GitHub Desktop.
Save sapito169/3ae526fe9e753ec61211dcb52f1a98f5 to your computer and use it in GitHub Desktop.
Download ZIP
// source https://jsbin.com
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
svg {
outline: 1px solid gray;
}
</style>
</head>
<body>
<svg id="grafiquito" height="250px" width="370px">
</svg>
<script id="jsbin-javascript">
function generateChart(labels,size){
var total=0;
var colors=[];
for(var a=0;a<labels.length;a++){
colors.push(pastelColors());
}
for(var c=0;c<labels.length;c++){
total+=size[c];
}
var result="";
var acumulado=0
var anterior;
for(var i=0;i<labels.length;i++){
var actual=(size[i]/total*360);
anterior=acumulado;
acumulado=acumulado+actual;
result+="<path stroke='black' stroke-width='0.5' fill='"+colors[i]+"' d='"+describeArc(110, 120, 100, anterior, acumulado)+"'/>\n"
}
for(var j=0;j<labels.length;j++){
result+="<rect x='230' y='"+(j+1)*20+"' width='10' height='10' fill='"+colors[j]+"'/>\n"
}
for(var k=0;k<labels.length;k++){
result+="<text x='248' y='"+(29+(k*20))+"'>"+labels[k]+"("+(size[k]/total*100)+"%)</text>\n"
}
return result;
}
function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;
return {
x: centerX + (radius * Math.cos(angleInRadians)),
y: centerY + (radius * Math.sin(angleInRadians))
};
}
function describeArc(x, y, radius, startAngle, endAngle){
var start = polarToCartesian(x, y, radius, endAngle);
var end = polarToCartesian(x, y, radius, startAngle);
var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
var d = [
"M", x, y,
"L", start.x, start.y ,
"A", radius, radius, 0, largeArcFlag, 0, end.x, end.y,
"Z"
].join(" ");
return d;
}
function pastelColors( ){
var r = ( 255 - Math.round(Math.random()*127) ).toString(16);
var g = ( 255 - Math.round(Math.random()*127) ).toString(16);
var b = ( 255 - Math.round(Math.random()*127) ).toString(16);
return '#' + r + g + b;
}
window.onload = function() {
var graf=document.getElementById("grafiquito")
graf.innerHTML= generateChart(["java","net","python", "c#","javascript"],[ 40 ,10,10,10,10 ])
};
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<svg id="grafiquito" height="250px" width="370px">
</svg>
</body>
</html>
</script>
<script id="jsbin-source-css" type="text/css">
svg {
outline: 1px solid gray;
} </script>
<script id="jsbin-source-javascript" type="text/javascript">
function generateChart(labels,size){
var total=0;
var colors=[];
for(var a=0;a<labels.length;a++){
colors.push(pastelColors());
}
for(var c=0;c<labels.length;c++){
total+=size[c];
}
var result="";
var acumulado=0
var anterior;
for(var i=0;i<labels.length;i++){
var actual=(size[i]/total*360);
anterior=acumulado;
acumulado=acumulado+actual;
result+="<path stroke='black' stroke-width='0.5' fill='"+colors[i]+"' d='"+describeArc(110, 120, 100, anterior, acumulado)+"'/>\n"
}
for(var j=0;j<labels.length;j++){
result+="<rect x='230' y='"+(j+1)*20+"' width='10' height='10' fill='"+colors[j]+"'/>\n"
}
for(var k=0;k<labels.length;k++){
result+="<text x='248' y='"+(29+(k*20))+"'>"+labels[k]+"("+(size[k]/total*100)+"%)</text>\n"
}
return result;
}
function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;
return {
x: centerX + (radius * Math.cos(angleInRadians)),
y: centerY + (radius * Math.sin(angleInRadians))
};
}
function describeArc(x, y, radius, startAngle, endAngle){
var start = polarToCartesian(x, y, radius, endAngle);
var end = polarToCartesian(x, y, radius, startAngle);
var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
var d = [
"M", x, y,
"L", start.x, start.y ,
"A", radius, radius, 0, largeArcFlag, 0, end.x, end.y,
"Z"
].join(" ");
return d;
}
function pastelColors( ){
var r = ( 255 - Math.round(Math.random()*127) ).toString(16);
var g = ( 255 - Math.round(Math.random()*127) ).toString(16);
var b = ( 255 - Math.round(Math.random()*127) ).toString(16);
return '#' + r + g + b;
}
window.onload = function() {
var graf=document.getElementById("grafiquito")
graf.innerHTML= generateChart(["java","net","python", "c#","javascript"],[ 40 ,10,10,10,10 ])
};</script></body>
</html>
Raw
jsbin.untitled.css
svg {
outline: 1px solid gray;
}
Raw
jsbin.untitled.js
function generateChart(labels,size){
var total=0;
var colors=[];
for(var a=0;a<labels.length;a++){
colors.push(pastelColors());
}
for(var c=0;c<labels.length;c++){
total+=size[c];
}
var result="";
var acumulado=0
var anterior;
for(var i=0;i<labels.length;i++){
var actual=(size[i]/total*360);
anterior=acumulado;
acumulado=acumulado+actual;
result+="<path stroke='black' stroke-width='0.5' fill='"+colors[i]+"' d='"+describeArc(110, 120, 100, anterior, acumulado)+"'/>\n"
}
for(var j=0;j<labels.length;j++){
result+="<rect x='230' y='"+(j+1)*20+"' width='10' height='10' fill='"+colors[j]+"'/>\n"
}
for(var k=0;k<labels.length;k++){
result+="<text x='248' y='"+(29+(k*20))+"'>"+labels[k]+"("+(size[k]/total*100)+"%)</text>\n"
}
return result;
}
function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;
return {
x: centerX + (radius * Math.cos(angleInRadians)),
y: centerY + (radius * Math.sin(angleInRadians))
};
}
function describeArc(x, y, radius, startAngle, endAngle){
var start = polarToCartesian(x, y, radius, endAngle);
var end = polarToCartesian(x, y, radius, startAngle);
var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
var d = [
"M", x, y,
"L", start.x, start.y ,
"A", radius, radius, 0, largeArcFlag, 0, end.x, end.y,
"Z"
].join(" ");
return d;
}
function pastelColors( ){
var r = ( 255 - Math.round(Math.random()*127) ).toString(16);
var g = ( 255 - Math.round(Math.random()*127) ).toString(16);
var b = ( 255 - Math.round(Math.random()*127) ).toString(16);
return '#' + r + g + b;
}
window.onload = function() {
var graf=document.getElementById("grafiquito")
graf.innerHTML= generateChart(["java","net","python", "c#","javascript"],[ 40 ,10,10,10,10 ])
};
@sapito169
Copy link
Author

example of a pie chart without library

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