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 ) {
      start += calcAngle(tmp);

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

  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.

This entry was posted in Uncategorized. Bookmark the permalink.

5 Responses to Animating the JavaFX PieChart a bit

  1. Pingback: Java desktop links of the week, November 26 | Jonathan Giles

  2. @Alji_ says:

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

  3. @Alji_ says:

    oops I did’nt see k the link at the end 🙂

  4. Pingback: JavaFX – jamais parti, déjà has been ? « Le Blog d'Ippon Technologies

  5. SJ says:

    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.

Leave a Reply

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

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

Facebook photo

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

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.