Small code for PieChart...but !
Tuesday Jun 30, 2009
As already discussed, JavaFX 1.2 provide API set for Charts and Graphs. Though I decided to put my hand dirty in writing one 3D piechart from my own. With mine, you will get additional feature of explode in and out feature :). Well, action can be written with the existing chart API and I guess explode feature will also come soon.
Making 3D Pie chart is nothing but layering of 2D Pie Chart and here goes a small code :
Slice.fx
package piechart3d;
import java.lang.Math;
import javafx.animation.Interpolator;
import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.scene.CustomNode;
import javafx.scene.Group;
import javafx.scene.input.MouseEvent;
import javafx.scene.Node;
import javafx.scene.paint.Color;
import javafx.scene.paint.LinearGradient;
import javafx.scene.paint.Stop;
import javafx.scene.shape.Arc;
import javafx.scene.shape.ArcType;
/**
* @author Vaibhav Choudhary
*/
public class Slice extends CustomNode {
public var color: Color;
public var sAngle: Number = 0.0;
public var len: Number = 0.0;
public var xt = 0.0;
public var yt = 0.0;
function explodout():Boolean {
var t = Timeline {
repeatCount: 1
keyFrames: [
KeyFrame {
time: 0.25s
canSkip: true
values: [
xt =>
30 * Math.cos(2 * Math.PI * (sAngle + len / 2) / 360) tween Interpolator.EASEBOTH,
yt =>
-30 * Math.sin(2 * Math.PI * (sAngle + len / 2) / 360) tween Interpolator.EASEBOTH
]
}
]
}
t.play();
return true
}
function explodein():Boolean {
var t1 = Timeline {
repeatCount: 1
keyFrames: [
KeyFrame {
time: 0.25s
canSkip: true
values: [
xt => 0,
yt => 0
]
}
]
}
t1.play();
return true
}
public override function create(): Node {
return Group {
blocksMouse: true
translateX: bind xt
translateY: bind yt
onMouseClicked: function( e: MouseEvent ):Void {
if(xt == 0 and yt == 0) {
explodout();
}
else
explodein();
}
content: for(num in [0..25]) {[
Arc {
stroke: color
cache: true
fill: color
translateX: 0
translateY: (num + 1) * 1
centerX: 250
centerY: 250
radiusX: 150
radiusY: 60
startAngle: bind sAngle
length: bind len
type: ArcType.ROUND
}
Arc {
cache: true
fill: LinearGradient {
startX: 0.3
startY: 0.3
endX: 1.0
endY: 1.0
stops: [
Stop {
color: color
offset: 0.0
},
Stop {
color: Color.WHITE
offset: 1.0
},
]
}
centerX: 250
centerY: 250
radiusX: 150
radiusY: 60
startAngle: bind sAngle
length: bind len
type: ArcType.ROUND
},
]
}
};
}
}
Main.fx:
package piechart3d;
import javafx.scene.paint.Color;
import javafx.scene.Scene;
import javafx.stage.Stage;
/**
* @author Vaibhav Choudhary
*/
var slice1: Slice = Slice{color: Color.YELLOWGREEN, sAngle:0, len: 45};
var slice2: Slice = Slice{color: Color.BLUEVIOLET, sAngle:45, len: 80 };
var slice3: Slice = Slice{color: Color.PALETURQUOISE, sAngle:125, len: 80 };
var slice4: Slice = Slice{color: Color.DARKORANGE, sAngle:205, len: 100 };
var slice5: Slice = Slice{color: Color.FIREBRICK, sAngle:305, len: 55};
Stage {
title: "Pie Chart - 3D"
width: 550
height: 580
scene: Scene {
fill: Color.WHITE
content:[
slice2, slice1,slice5,slice3,slice4
]
}
}
Anything here can be made generic to any extend. There is a for loop of 0..25 in Slice.fx which speaks about the thickness of chart :) and some mathematics in timeline speaks about explode feature.
Now if you compare this with PieChart that comes in API, you will see this has some jerky corners + Color combination is not as soluble. How that has been made is secret :).
JNLP Run :
Good one.. I liked it.
bind chart's data?