Jump to content

Pie Chart

fiveworlds
in Computer Science

Featured Replies

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 by fiveworlds

Lol!

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

  • Author
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.

Archived

This topic is now archived and is closed to further replies.

Go to topic listing

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.

Configure browser push notifications
Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.