Create a rollover that shows values of the pie chart

LucindaP

Hi everyone!

Sorry to bother you all, but I am just trying to write some code for a pie chart (I've changed it since my last one) and want to create labels that show up when you hover the mouse over a sector.

I saw a piece of code someone wrote that said...

void draw() {
if(get(mouseX,mouseY) == color (255,0,0) {
 displayInfo();
}   
}

Can someone please help me with coding labels onto my pie chart. This is my code so far....

size(1500, 1500);
background(255);
smooth();
noStroke();

//the data
float[] data = {
6, 9, 6, 25, 0, 12, 1, 2, 35, 7, 0
};
colorMode(HSB,data.length);
float t = 0;

for (int i=0;i<data.length;i++) {
t+=data[i];
}

// how much of each degree of the pie chart should each unit of data get
// in other words distributes our total data over 360 deg in preportion
t=360/t;

//two angles for each segment
float a1=0, a2=data[0];

//for each number in our data array
for (int i=0;i<data.length;i++) {

// choose a random fill
fill(i, 255, 255);
//put the last leading angle into a2
a2 = a1;
//update the current leading angle
a1 += data[i]*t;
//print the angles for debuging purposes
println(a1+"  :  "+a2);
//draw teh arc
arc(width/2, height/2, 1000, 1000, radians(a2), radians(a1));
}

for (int i=0;i<data.length;i++) {
t+=data[i];
}
t=width/t;
int x=0, y=0;
for (int i=0;i<data.length;i++) {
fill(i, 255, 255);
rect(x, y, data[i]*t, 10);
x+=(data[i]*t);
}

Here is some code I found off a tutorial, however I'm not sure how I can incorporate it into my pie chart...

if((mouseX > (x[i] - w/2)) && (mouseX < (x[i] + w/2)) &&
   (mouseY > (y[i] - t[i]/2)) && (mouseY < (y[i] + w/2))) {
   fill(#FFBA00);
   // Could also have bars fill in with flag of country.
   textFont(labelFont);
   textAlign(CENTER);
   // Info on rollover...
   text(tugNames[i] + ": " + tugMedals[i], x[i], y[i] - t[i]/2 - 10);
   // ... or info on click
//       if(mousePressed) {
//         text(tugNames[i] + ": " + tugMedals[i], x[i], y[i] - t[i]/2 - 10);
//       }
} else {
fill(#CCCCCC);
}
rect(x[i], y[i], w, t[i]);

textAlign(CENTER);
textFont(labelFont);
fill(#CCCCCC);
text(tugCountries[i], x[i], height - bb/2);
}

I also really want to have a title that comes up when you run the page (not a title in the top section of the window, but one that is on the same screen as the pie chart....

koogs

Please don't post duplicates.

Especially duplicates with less detail in them.

LucindaP

It's not a duplicate. I have changed my code, and the questions are different. I've tried to copy in the answers given to other people with 'rolling' issues, however they don't relate to a pie chart, and I don't know how to make them relate to my pie chart. Or could you please direct me to the question with an answer that will help me? Thanks :)

LucindaP

This is my code so far, and I was just wondering how to incorporate mouse hovering over the pie graph so that labels with the sector name is shown

String Title = "Food Group Consumption in Australia";

size(1500, 1500);
background(255);
smooth();
fill(#000000);
textSize(70);
text(Title, 100, 100);
noStroke();


//the data
float[] data = {
6, 9, 6, 25, 0, 12, 1, 2, 35, 7,
};
colorMode(HSB,data.length);
float t = 0;

for (int i=0;i<data.length;i++) {
t+=data[i];
}

// how much of each degree of the pie chart should each unit of data get
// in other words distributes our total data over 360 deg in preportion
t=360/t;

//two angles for each segment
float a1=0, a2=data[0];

//for each number in our data array
for (int i=0;i<data.length;i++) {

// choose a random fill
fill(i, 255, 255);
//put the last leading angle into a2
a2 = a1;
//update the current leading angle
a1 += data[i]*t;
//print the angles for debuging purposes
println(a1+"  :  "+a2);
//draw teh arc
arc(width/2, height/2, 1000, 1000, radians(a2), radians(a1));
}

for (int i=0;i<data.length;i++) {
t+=data[i];
}
t=width/t;
int x=0, y=0;
for (int i=0;i<data.length;i++) {
fill(i, 255, 255);
rect(x, y, data[i]*t, 10);
x+=(data[i]*t);
}

koogs

It's not a duplicate.

the last one was about pie charts of food production and this one is about showing food production as a pie chart...

if you've changed your mind / code then EDIT the old post and carry on from there. now we have an old question, with roughly the same title, that people will see and try to answer but which will just be a waste of their time.

koogs

i have deleted the original

Chrisir

your sketch is called a static sketch.

Its runs only once.

You want to have an interactive sketch instead, because you want to see text coming and going with the mouse.

Read this:

(....) A program written as a list of statements (like the previous examples) is called a static sketch. In a static sketch, a series of functions are used to perform tasks or create a single image without any animation or interaction.

Interactive programs are drawn as a series of frames, which you can create by adding functions titled setup() and draw() as shown in the code below. These are built-in functions that are called automatically.

     void setup() {
       size(400, 400);
       stroke(255);
       background(192, 64, 0);
     } 

     void draw() {
       line(150, 25, mouseX, mouseY);
     }

The setup() block runs once, and the draw() block runs repeatedly. As such, setup() can be used for any initialization; in this case, setting the screen size, making the background orange, and setting the stroke color to white. The draw() block is used to handle animation. The size() function must always be the first line inside setup().

It's from:

https://www.processing.org/tutorials/overview/

Please modify your sketch insofar that you have an interactive sketch.