An interactive pie chart programmed with processing.js, this works with both a traditional mouse and keyboard as well as a touch screen such as iPad, Android or other tablet.
[processing]
// Global variables
float radius = 50.0;
boolean dragging=false;
//Canvas Variables
int height=400;
int width=550;
int margin=50;
int nX, nY;
//Pie Chart Variables
float lastAng = 0;
int diameter = height-2*margin;
int linethickness = 1;
//Data variables
int[] data=new int[length]; //the data array
string[] label=new string[length]; //the labels for the data array
//Define the data and labels to be graphed
data = {50,75,200,150,35,60,120,45,200,35};
label = {"2008","2009","2010","2011","2012","2013","2014","2015","2016","2017"};
length=data.length; //the length of the data array to be used in the for loops
// Setup the Processing Canvas
void setup(){
int maxd = max(data); //get the max data value to use for scaling
size( width, height ); //define the canvas size
frameRate( 15 ); //define the frame rate
float sumdata = 0;
for (int i=0; i 0 & (nX-width/2) > 0) {
angClick = atan(abs((nY-height/2)/(nX-width/2)))+0;
} else if( (nY-height/2) < 0 & (nX-width/2) > 0) {
angClick = 2*PI-atan(abs((nY-height/2)/(nX-width/2)));
} else if( (nY-height/2) > 0 & (nX-width/2) < 0) {
angClick = PI-atan(abs((nY-height/2)/(nX-width/2)));
} else if( (nY-height/2) < 0 & (nX-width/2) < 0) {
angClick = atan(abs((nY-height/2)/(nX-width/2)))+PI;
}
if ( lastAng
// Global variables
float radius = 50.0;
boolean dragging=false;
//Canvas Variables
int height=400;
int width=550;
int margin=50;
int nX, nY;
//Pie Chart Variables
float lastAng = 0;
int diameter = height-2*margin;
int linethickness = 1;
//Data variables
int[] data=new int[length]; //the data array
string[] label=new string[length]; //the labels for the data array
//Define the data and labels to be graphed
data = {50,75,200,150,35,60,120,45,200,35};
label = {"2008","2009","2010","2011","2012","2013","2014","2015","2016","2017"};
length=data.length; //the length of the data array to be used in the for loops
// Setup the Processing Canvas
void setup(){
int maxd = max(data); //get the max data value to use for scaling
size( width, height ); //define the canvas size
frameRate( 15 ); //define the frame rate
float sumdata = 0;
for (int i=0; i<data.length; i++){
sumdata +=data[i];
}
sumdata = 360/sumdata;
for (int i=0; i<data.length; i++){
data[i] = sumdata*data[i];
}
} //end setup()
// Main draw loop
void draw(){
lastAng = 0;
// Fill canvas grey
background( 100 );
fill( 0, 121, 184 );
stroke(255);
piecha(); //draw the bars
} //end main draw()
void piecha() {
float angClick = 0;
strokeWeight( linethickness ); //bar border thickness
for (int i=0; i<data.length; i++){
if( (nY-height/2) > 0 & (nX-width/2) > 0) {
angClick = atan(abs((nY-height/2)/(nX-width/2)))+0;
} else if( (nY-height/2) < 0 & (nX-width/2) > 0) {
angClick = 2*PI-atan(abs((nY-height/2)/(nX-width/2)));
} else if( (nY-height/2) > 0 & (nX-width/2) < 0) {
angClick = PI-atan(abs((nY-height/2)/(nX-width/2)));
} else if( (nY-height/2) < 0 & (nX-width/2) < 0) {
angClick = atan(abs((nY-height/2)/(nX-width/2)))+PI;
}
if ( lastAng<angClick & angClick<lastAng+radians(data[i]) & (sq(nX-width/2)+sq(nY-height/2)) < sq(diameter/2) ) {
fill(0);
} else {
fill(data[i] * 3.0); }
arc(width/2, height/2, diameter, diameter, lastAng, lastAng+radians(data[i]));
lastAng += radians(data[i]);
}
}
void mouseClicked() {
nX = mouseX;
nY = mouseY;
}