Pie Chart

fiveworlds · February 16, 2016

My latest way to waste time. Figuring how to make pie charts with javascript and svg. I know google charts gives it to you but they use massive code. Here's my attempt.

<head>
<style>

path{stroke: black; stroke-width: 2;cursor:pointer;stroke-linejoin="round"}
path:hover{stroke: black; stroke-width: 2;opacity:0.5;}
.red{fill: red;}
.green{fill: green;}
.blue{fill: blue;}
.purple{fill: purple;}
.yellow{fill:yellow;}

</style>
  
<script>
function add(a, b) {return a + b;}

var numbers = [30,40,20,50,77];
var colors = ["red","green","blue","purple","yellow"];
var labels = ["red","green","blue","purple","yellow"];
var piechart;
var title = "pie chart";
var total = numbers.reduce(add,0);
var radius = 135;
var startx = 150;
var starty = 240;
var lastx = radius;
var lasty = 0;
var seg = 0;
var rectx = 420;
var recty = 140;
var textx = 470;
var texty = 156;
var collate = "<svg width='800' height='500'>";
var collate1 = "";
var title = "<text x='240' y='50' style='font-size: 36;font-weight: bold;fill: #0099ff;stroke: black;stroke-width: 2'>"+title+"</text></svg>";
  
for (i = 0; i < numbers.length; i++) {

	arc = "0";
	seg = (numbers[i]/total) * 360+seg;		
	if ((numbers[i]/total) > 180){arc = "1";}
	radseg = seg * (Math.PI/180);
	nextx = Math.cos(radseg) * radius;
	nexty = Math.sin(radseg) * radius;
	minuslasty = - lasty;
	nextxminuslasty = - (nextx - lasty);
	nextxminuslastx = nextx - lastx;
	nextyminuslasty = - (nexty - lasty);
	percentage= (numbers[i]/total) * 100;
	collate = collate + "<path class='"+colors[i]+"' d='M " + startx + "," + starty + " l " + lastx + "," + minuslasty + " a" + radius + "," + radius + " 0 " + arc + ",0 " + nextxminuslastx + ","+ nextyminuslasty + " z' />";
	collate1 = collate1 + "<rect x='"+rectx+"' y='"+recty+"' width='30' height='20' class='"+colors[i]+"' /><text x='"+textx+"' y='"+texty+"' >"+labels[i]+" "+percentage+"%</text>";
	lastx=nextx;
	lasty=nexty;
	texty=texty+40;
	recty=recty+40;
}
piechart=collate+" <circle cx='150' cy='240' r='80' stroke='black' stroke-width='3' fill='white' />"+collate1+title;
document.write(piechart);
  </script>
</head>

Edited February 16, 2016 by fiveworlds

Sensei · February 16, 2016

It's working quite well.

You don't have to make add() function at all,

you can inline it,

like it is showed here:

https://developer.mozilla.org/pl/docs/Web/JavaScript/Referencje/Obiekty/Array/Reduce

Edited February 16, 2016 by Sensei

PeterOtt · February 22, 2016

Lol!

But really its worth learning. You can try it with different languages as well.

fiveworlds · February 26, 2016

It's working quite well.

I thought it was too until I tried numbers taking more than 50% of the pie chart.

You don't have to make add() function at all,

Didn't know that learned something new. I fixed the error I had with the pie chart. I also added a random color picker,

var width = 200;
var height = width;
var numbers = [200, 10, 20, 60, 12, 10];
var total = numbers.reduce(function(a, b) {return a + b;});
var piechart = "";
var startx = width / 2;
var starty = startx;
var radius = width / 2 - 10;
var deg = total / 360;
var half = total / 2;
var dx = radius;
var dy = 0;
var lastangle = 0;
var angle = 0;
var radseg = 0;
var arc = 0;
var i = 0;
var ax = 0;
var ay = 0;
var adx = 0;
var ady = 0;
var nextx = 0;
var nexty = 0;
var beginning = "<svg width='" + width + "' height='" + height + "'>";
var end = "</svg>";
var color = "";
for (i = 0; i < numbers.length; i += 1) {
    angle = lastangle + numbers[i] / deg;
    radseg = angle * (Math.PI / 180);
    nextx = Math.cos(radseg) * radius;
    nexty = Math.sin(radseg) * radius;
    color = '#' + (0x1000000 + (Math.random()) * 0xffffff).toString(16).substr(1,6);
    if (numbers[i] > half) {
        arc = 1;
    } else {
        arc = 0;
    }
    ax = startx + nextx;
    ay = starty + nexty;
    adx = startx + dx;
    ady = starty + dy;
    piechart += "\n";
    piechart +=  "<path d=\"M" + startx + "," + starty;
    piechart += " L" + adx + " , " + ady;
    piechart +=  " A" + radius + " , " + radius + " 0 " + arc + " , " + " 1 " + ax + " , " + ay;
    piechart +=  " z\" ";
    piechart +=  " fill=\"" + color + "\" stroke=\"black\" stroke-width=\"2\" ";
    piechart +=  " fill-opacity=\"1\" stroke-linejoin=\"round\" />";
    dx = nextx;
    dy = nexty;
    lastangle = angle;
}
document.write(beginning + piechart + end);

I am going to try for a piechart tag under svg eventually.

Sign In

Pie Chart

Recommended Posts

fiveworlds

Sensei

PeterOtt

fiveworlds

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity

Important Information