Animating the JavaFX PieChart a bit


I’m with a customer this week in Swiss doing a workshop on e4. Tomorrow is the last day and well most likely will at least take a short look how they can integrate JavaFX 2.x into their e4-SWT applications e.g. to show charts.

I just coded up a small example of a PieChart and thought it might be nice show case for JavaFX animations to let the pie slice move out a bit when hovering. I’m not really good at all the math stuff so I searched the internet a found this nice JavaFX 1.x tutorial and adopted it to JavaFX 2.0. I didn’t spend too much time on reading the API so maybe I’m doing things completely wrong but here’s the result in a short screencast.

The real magic is in the translation calcuation inside the MouseOverListener which looks like this:

static class MouseHoverAnimation implements EventHandler<MouseEvent> {
  static final Duration ANIMATION_DURATION = new Duration(500);
  static final double ANIMATION_DISTANCE = 0.15;
  private double cos;
  private double sin;
  private PieChart chart;

  public MouseHoverAnimation(PieChart.Data d, PieChart chart) {
    this.chart = chart;
    double start = 0;
    double angle = calcAngle(d);
    for( PieChart.Data tmp : chart.getData() ) {
      if( tmp == d ) {
         break;
      }
      start += calcAngle(tmp);
    }

    cos = Math.cos(Math.toRadians(0 - start - angle / 2));
    sin = Math.sin(Math.toRadians(0 - start - angle / 2));
  }

  @Override
  public void handle(MouseEvent arg0) {
    Node n = (Node) arg0.getSource();

    double minX = Double.MAX_VALUE;
    double maxX = Double.MAX_VALUE * -1;
			
    for( PieChart.Data d : chart.getData() ) {
      minX = Math.min(minX, d.getNode().getBoundsInParent().getMinX());
      maxX = Math.max(maxX, d.getNode().getBoundsInParent().getMaxX());
    }

    double radius = maxX - minX;
    TranslateTransitionBuilder.create().toX((radius *  ANIMATION_DISTANCE) * cos).toY((radius *  ANIMATION_DISTANCE) * sin).duration(ANIMATION_DURATION).node(n).build().play();
  }
		
  private static double calcAngle(PieChart.Data d) {
    double total = 0;
    for( PieChart.Data tmp : d.getChart().getData() ) {
      total += tmp.getPieValue();
    }
			
    return 360 * (d.getPieValue() / total); 
  }
}

The sample sources are published as part of the e(fx)clipse repo in a sample project.

About these ads

5 Responses to “Animating the JavaFX PieChart a bit”

  1. can you please publish the code on Github , thank u in advance.

  2. oops I did’nt see k the link at the end :)

  3. How can we display the values on individual slices, without any mouse event.
    I have been trying to search a method, but didn’t find one. Can anyone please suggest something.

Trackbacks/Pingbacks

  1. Java desktop links of the week, November 26 | Jonathan Giles - November 25, 2012

    [...] Tom Schindl has a code snippet to animate the slices of the JavaFX pie chart. [...]

  2. JavaFX – jamais parti, déjà has been ? « Le Blog d'Ippon Technologies - February 27, 2014

    […] d’adopter JavaFX. Je ne sais même pas si les graphiques peuvent être rendus suffisamment interactifs, d’ailleurs.  Mais sinon ? Je ne vois pas comment justifier la courbe d’apprentissage […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 677 other followers

%d bloggers like this: