JavaFX 1.2 incluye APIs para gráficos (charts)

Este es el código para agregar un gráfico de Pie en JavaFX

package piechartsample;

import javafx.scene.chart.*;
import javafx.scene.Scene;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.stage.Stage;

var name = ["Java", "JavaFX", "MySQL", "Netbeans", "Others"];
var val = [20, 12, 25, 22, 30];


var r :  PieChart.Data[] = [];
for(i in [0..4]) {
insert  PieChart.Data {
 action: function() {
     print("Name   ::  {name[i]}");
 }
 label  : name[i] value : val[i] } into r; }


var chart = PieChart3D {
            data : r
            pieLabelFont: Font.font("dialog", FontWeight.REGULAR, 8);
            pieLabelVisible: true
            pieValueVisible: true
            pieToLabelLineOneLength: 3
            pieToLabelLineTwoLength : 6

         }

         var st = Stage {
            height: 420
             width: 480
             title:"Pie Chart 3D"
             scene: Scene {
                 content: [
                     chart
                  ]
             }
         }

Este es el código para un gráfico de "burbujas":

package bubblechart;

import javafx.scene.chart.*;
import javafx.scene.chart.part.*;
import javafx.scene.paint.Color;
import javafx.scene.Scene;
import javafx.stage.Stage;
var x: Number[] = [30, 60, 10, 100,50];
var y: Number[] = [40,20,90,40,23];
var radius: Number[] = [10,13,7,10,5];

var x1: Number[] = [13, 20, 100, 30,50];
var y1: Number[] = [100,80,60,40,20];
var radius1: Number[] = [7,13,10,6,12];

var r :  BubbleChart.Data[] = [];
var r1:  BubbleChart.Data[] = [];
for(i in [0..4]) {
insert  BubbleChart.Data {fill: Color.YELLOWGREEN xValue : x[i] yValue : y[i] radius: radius[i] }into r;
insert  BubbleChart.Data {fill: Color.RED xValue : x1[i] yValue : y1[i] radius: radius1[i] }into r1;

}
var s1 : BubbleChart.Series =  BubbleChart.Series{data: [r,r1]};
var BubbleChartData : BubbleChart.Series[] = [s1];
var chart = BubbleChart {
              title : "BubbleChart"
              xAxis : NumberAxis{
                  lowerBound: 0
                  upperBound : 150
                  label: "SomeX"
                  visible: true
                  axisStrokeWidth: 1
                  tickUnit : 20
                  tickLabelsVisible: true

              }
              yAxis : NumberAxis{
                  lowerBound: 0
                  upperBound : 150
                  tickUnit: 20
                  label: "SomeY"
                  visible: true
                  tickLabelsVisible: true
             }
              data : BubbleChartData
          }

          var st = Stage {
             height: 520
              width: 640
              title:"Bubble Chart"
              scene: Scene {
                  content: [
                      chart
                   ]
              }
          }

MemeFX ... mi biblioteca para JavaFX

El nombre puede parecer "curioso", pero tiene una razón "intelectualoide" de ser...

Meme (se pronuncia MIM), responde a toda una teoría sobre la capacidad de las ideas para replicarse y evolucionar por si mismas, como seres vivos. La idea es que el diseño puede surgir del caos (suena a código abierto, ¿no?).

Se supone que a través de un proceso evolutivo y se selección natural, se consigue un resultado superior al original... ahora, como este proyecto es código abierto, y por lo mismo, fácilmente replicable y modificable (puede mutar y evolucionar libremente)... entonces, podría convertirse en un meme.

Veamos si el EFECTO MEME (MemeFX) ocurre con él... ;)

En este momento la biblioteca contiene sólo tres componentes, pero, no por eso no son útiles ;D ... la idea es que con el tiempo vaya creciendo. Tengo algunas ideas como incorporar controles para un menu flotante gráfico (si han mirado el blog, por ahí ya hice un intento), un componente de acordeón, componentes que permitan fácilmente asignar drag and drop a los elementos y definir areas para ser arrojados, un componente para simplificar que los applets sean arrastrables desde el navegador al escritorio (básicamente que genere el área de arrastre solo, porque de por sí es simple habilitar esa funcionalidad), etc. Las ideas son bienvenidas.

Por ahora, aquí está el código fuente de la biblioteca, demos Java Web Start con sus respectivos códigos fuentes y la documentación sobre como utilizarlos y personalizarlos.

Ojalá les sean de utilidad y puedan unirse al proyecto quienes se sientan motivados.

http://code.google.com/p/memefx/

Aquí hay más info sobre los Memes, si alguien tiene curiosidad.

Pronto liberaré este nuevo componente

No crean que abandoné mi pasión por el JavaFX ;D ... sólo he estado dedicado a desarrollar este componente que voy a liberar como código abierto.

JAVA WEB START DEMO

Sería genial si alguien con algo de tiempo me ayuda a integrar estos componentes (la perilla, el stagecontroller y este nuevo componente) en el proyecto JFXtras (CLICK). Mi problema es de falta de tiempo.

¿Algún voluntario?

package democombo;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.Group;
import javafx.scene.paint.*;
import javafx.scene.text.*;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Rectangle;
import org.combofx.gauge.*;
import org.combofx.stage.*;
import org.combofx.knob.*;


/** Stage controller */
var cs = controlStage{
width: 1024, height: 600
initialPosition: controlStage.CENTER
checkMinHeight: true, minHeight: 600
checkMinWidth: true, minWidth: 1024
stickyBorders: true, limitBorders: true
};

// gauge component #1
var gauge1 = Gauge {
ui: BasicGauge{ }
primaryLabel: "Km/H"
secondaryLabel: "Speed"
secondaryLabelFont: Font { size: 15 };
min: 0.0, max: 100.0
scaleX: 0.72, scaleY: 0.72
translateX: -35, translateY: -42
speed: Gauge.SLOW
initialValue: 0
value: bind knob1.value
};

/** knob input #1 */
var knob1 = Knob {
ui: BasicKnob{ }
dialLinesNumber: 31
dialLinesLongEvery: 3
minAngle: 0, maxAngle: 720
translateX: 160, translateY: 160
min: 0, max: 100
scaleX: 0.5, scaleY: 0.5
value: 50
};


// gauge component #2
var control2 = CornerLLGauge{};
var gauge2 = Gauge {
ui: control2
primaryLabel: "Km/H"
secondaryLabel: "Current\nSpeed"
min: 0.0, max: 100.0
dialNumsVisibleEvery: 2
translateX: 300
speed: Gauge.SLOWEST
initialValue: 0
value: bind knob2.value
dialLongLinesColor: Color.YELLOW
// custom background color
    background: control2.customBackground(Color.DARKBLUE)
};

/** knob input #2 */
var knob2 = Knob {
ui: BasicKnob{ }
dialLinesNumber: 31
minAngle: 0, maxAngle: 720
dialLinesLongEvery: 3
translateX: 470, translateY: 160
min: 0, max: 100
scaleX: 0.5, scaleY: 0.5
value: 50
};

// gauge component #3
var control3 = RectGauge{ };
var gauge3 = Gauge {
ui: control3
primaryLabel: "Km/H"
primaryLabelColor: Color.ORANGE
secondaryLabel: "Speed"
min: -100.0, max: 100.0
dialNumsLargeEvery: 2
largeNumberFont: Font { size: 16, oblique: true }
smallNumberFont: Font { size: 10, oblique: true }
translateX: 600, translateY: -7
scaleX: 0.94, scaleY: 0.94
speed: Gauge.INMEDIATE
initialValue: 0.1
value: bind knob3.value
dialLongLinesWidth: 4
internalLongRadDial: 118
dialShortLinesColor: Color.YELLOW
dialShortLinesWidth: 0.5
// custom background radial gradient
    background: control3.customBackground(
        RadialGradient {
        centerX: 56, centerY: 56
        focusX: 0.1, focusY: 0.1
        radius: 103
        proportional: false
        stops: [
            Stop {
                color: Color.WHITE
                offset: 0.0
            },
            Stop {
                color: Color.DARKRED
                offset: 1.0
            }
        ]
    })
};

/** knob input #3 */
var knob3 = Knob {
ui: BasicKnob{ }
dialLinesNumber: 31
minAngle: 0, maxAngle: 720
dialLinesLongEvery: 3
translateX: 830, translateY: 160
min: -100, max: 100
scaleX: 0.5, scaleY: 0.5
value: 0
};

// gauge component #4
var control4 = SquareGauge{};
var gauge4 = Gauge {
ui: control4
decorationVisible: false
primaryLabel: "Km/H"
secondaryLabel: "Speed"
secondaryLabelFont: Font { size: 15 }
valueColor: Color.CYAN
valueFont: Font {
    size: 19,
    oblique: true
    name: "Verdana"
}
min: 0.0, max: 100.0
scaleX: 0.72, scaleY: 0.72
translateX: -35, translateY: 250
speed: Gauge.FAST
initialValue: 0
value: bind knob4.value
// custom gauge background color
   background: control4.customBackground(Color.DARKGREEN)
 // highlighted ranges
    highlightRange: [
        Gauge.range { 
            start: 0, end: 70 
            color: Color.GREEN 
            opacity: 0.8 
        },
        Gauge.range {
            start: 70, end: 90
            color: Color.YELLOW
            dialLongLinesColor: Color.YELLOW
            dialShortLinesColor: Color.YELLOW
            opacity: 0.5
        }
            Gauge.range {
            start: 90, end: 100
            color: Color.RED
            dialLongLinesColor: Color.RED
            dialShortLinesColor: Color.RED
            opacity: 0.5
        }
    ]
};

/** knob input #4 */
var knob4 = Knob {
ui: OrangeKnob{}
dialLinesNumber: 31
minAngle: 0, maxAngle: 720
dialLinesLongEvery: 3
translateX: 160, translateY: 450
min: 0, max: 100
scaleX: 0.5, scaleY: 0.5
value: 50
};

// gauge component #5
var control5 = SmallGauge{};
var gauge5 = Gauge {
ui: control5
primaryLabel: "Km/H"
secondaryLabel: "Speed"
min: 0.0, max: 100.0
dialNumsVisibleEvery: 2
translateX: 295, translateY: 290
speed: Gauge.FASTEST
initialValue: 0
value: bind knob5.value
valueColor: Color.RED
dialLongLinesColor: Color.RED
shadowColor: Color.RED
shadowX: 2, shadowY: 2
// custom background radial gradient
    background: control5.customBackground(
        RadialGradient {
        centerX: 56, centerY: 56
        focusX: 0.1, focusY: 0.1
        radius: 103
        proportional: false
        stops: [
            Stop {
                color: Color.WHITE
                offset: 0.0
            },
            Stop {
                color: Color.BLACK
                offset: 1.0
            }
        ]
    })
 // highlighted gauge range
    highlightRange: [
        Gauge.range {
            start: 80, end: 100,
            color: Color.RED
            dialLongLinesColor: Color.RED,
            dialShortLinesColor: Color.RED
            internalRad: 120, externalRad: 123
        }
    ]
};

/** knob input #5 */
var knob5 = Knob {
ui: OrangeKnob{}
dialLinesNumber: 31
minAngle: 0, maxAngle: 720
dialLinesLongEvery: 3
translateX: 470, translateY: 450
min: 0, max: 100
scaleX: 0.5, scaleY: 0.5
value: 50
};

/** knob input noise #6 */
var knob6noise = Knob {
ui: OrangeKnob{ }
dialLinesNumber: 11
dialLinesLongEvery: 2
translateX: 730, translateY: 450
min: 0, max: 1
scaleX: 0.5, scaleY: 0.5
value: 0
};

// gauge component #6
var control6 = FlatRectInvGauge{};
var gauge6 = Gauge {
ui: control6
primaryLabel: ""
secondaryLabel: "Km/H"
secondaryLabelColor: Color.ORANGE
secondaryLabelFont: Font { size: 19 }
min: 0, max: 1
dialNumsVisibleEvery: 2
translateX: 600, translateY: 280
scaleX: 0.94, scaleY: 0.94
speed: Gauge.FAST
initialValue: 0.1
value: bind knob6.value
dialLongLinesWidth: 4
internalLongRadDial: 118
dialShortLinesColor: Color.ORANGE
dialShortLinesWidth: 0.5
noise: true, noiseLevel: bind knob6noise.value
reverseScale: true
dialNumsIntegerOnly: false
dialNumsDecimals: 1
useDots: true
displayVisible: false
decorationVisible: false
shadowX: 0, shadowY: 0
// highlighted gauge ranges
    highlightRange: [
            Gauge.range {
            start: 0, end: 0.5
            dialNumsColor: Color.ORANGE
        },
            Gauge.range {
            start: 0.6, end: 0.8
            color: Color.DARKRED
            opacity: 0.3
            internalRad: 0
        },
            Gauge.range {
            start: 0.8, end: 1.0
            color: Color.DARKRED
            opacity: 0.6
            internalRad: 0
        }
    ]
 // custom gauge background
    background: Group { content: [
            Rectangle {
                x: 10, y: 10
                arcHeight: 20, arcWidth: 20
                width: 260, height: 180
                fill: Color.RED
            }
            Circle {
                centerX: 140, centerY: 52
                radius: 125
                fill: Color.DARKRED
                opacity: 0.5
                clip: Rectangle { 
                    x: 15, y: 35, 
                    width: 250, height: 180 
                    arcHeight: 20, arcWidth: 20 
                }
        }]
    }
};

/** knob input #6 */
var knob6 = Knob {
ui: OrangeKnob { }
dialLinesNumber: 31
minAngle: 0, maxAngle: 720
dialLinesLongEvery: 3
translateX: 830, translateY: 450
min: 0, max: 1
scaleX: 0.5, scaleY: 0.5
value: 0.5
};


Stage {
// bind Stage (window) to the controller
width: bind cs.width with inverse
height: bind cs.height with inverse
x: bind cs.x with inverse
y: bind cs.y with inverse

scene: Scene {
    content: [gauge1, knob1, gauge2, knob2, gauge3, knob3,
    gauge4, knob4, gauge5, knob5, gauge6, knob6, knob6noise]
}
}