Monday, April 30, 2012

JavaFX 2.1: javafx.scene.chart.StackedBarChart

JavaFX 2.1 introduce a new StackedBarChart class. StackedBarChart is a variation of BarChart that plots bars indicating data values for a category. The bars can be vertical or horizontal depending on which axis is a category axis. The bar for each series is stacked on top of the previous series.

JavaFX 2.1: javafx.scene.chart.StackedBarChart

package javafx21;

import java.util.Arrays;
import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.chart.CategoryAxis;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.StackedBarChart;
import javafx.scene.chart.XYChart;
import javafx.stage.Stage;

/**
 *
 * @web http://java-buddy.blogspot.com/
 */
public class Charts extends Application {
    
    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }
    
    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("java-buddy.blogspot.com");
        Group root = new Group();
          
        final CategoryAxis xAxis = new CategoryAxis();
        final NumberAxis yAxis = new NumberAxis();
          
        xAxis.setLabel("Month");
        xAxis.setCategories(FXCollections.<String> observableArrayList(Arrays.asList(
                "January", 
                "February",
                "March",
                "April",
                "May",
                "June",
                "July",
                "August",
                "September",
                "October",
                "November",
                "December")));
        yAxis.setLabel("Value");
          
        final StackedBarChart<String,Number> stackedBarChart = new StackedBarChart<>(xAxis,yAxis);
  
        stackedBarChart.setTitle("StackedBarChart");
         
        //Series 1
        XYChart.Series<String,Number> series1 = new XYChart.Series();
        series1.setName("XYChart.Series 1");
          
        series1.getData().add(new XYChart.Data("January", 100));
        series1.getData().add(new XYChart.Data("February", 200));
        series1.getData().add(new XYChart.Data("March", 50));
        series1.getData().add(new XYChart.Data("April", 75));
        series1.getData().add(new XYChart.Data("May", 110));
        series1.getData().add(new XYChart.Data("June", 300));
        series1.getData().add(new XYChart.Data("July", 111));
        series1.getData().add(new XYChart.Data("August", 30));
        series1.getData().add(new XYChart.Data("September", 75));
        series1.getData().add(new XYChart.Data("October", 55));
        series1.getData().add(new XYChart.Data("November", 225));
        series1.getData().add(new XYChart.Data("December", 99));
          
        //Series 2
        XYChart.Series<String,Number> series2 = new XYChart.Series();
        series2.setName("XYChart.Series 2");
          
        series2.getData().add(new XYChart.Data("January", 150));
        series2.getData().add(new XYChart.Data("February", 100));
        series2.getData().add(new XYChart.Data("March", 60));
        series2.getData().add(new XYChart.Data("April", 40));
        series2.getData().add(new XYChart.Data("May", 30));
        series2.getData().add(new XYChart.Data("June", 100));
        series2.getData().add(new XYChart.Data("July", 100));
        series2.getData().add(new XYChart.Data("August", 10));
        series2.getData().add(new XYChart.Data("September", 175));
        series2.getData().add(new XYChart.Data("October", 155));
        series2.getData().add(new XYChart.Data("November", 125));
        series2.getData().add(new XYChart.Data("December", 150));
 
        //
         
        stackedBarChart.getData().addAll(series1, series2);
              
        root.getChildren().addAll(stackedBarChart);
  
        primaryStage.setScene(new Scene(root, 500, 400));
        primaryStage.show();
    }
}


Next:
- Create dynamic StackedBarChart of JavaFX 2

Related:
- JavaFX 2: BarChart
- JavaFX 2.1: javafx.scene.chart.StackedAreaChart


JavaFX 2: BarChart

JavaFX 2: BarChart

package javafx21;

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.chart.BarChart;
import javafx.scene.chart.CategoryAxis;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.stage.Stage;

/**
 *
 * @web http://java-buddy.blogspot.com/
 */
public class Charts extends Application {
    


    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }
    
    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("java-buddy.blogspot.com");
        Group root = new Group();
          
        final CategoryAxis xAxis = new CategoryAxis();
        final NumberAxis yAxis = new NumberAxis();
          
        xAxis.setLabel("Month");
        yAxis.setLabel("Value");
          
         
        final BarChart<String,Number> barChart = new BarChart<>(xAxis,yAxis);
  
        barChart.setTitle("BarChart");
         
        //Series 1
        XYChart.Series series1 = new XYChart.Series();
        series1.setName("XYChart.Series 1");
          
        series1.getData().add(new XYChart.Data("January", 100));
        series1.getData().add(new XYChart.Data("February", 200));
        series1.getData().add(new XYChart.Data("March", 50));
        series1.getData().add(new XYChart.Data("April", 75));
        series1.getData().add(new XYChart.Data("May", 110));
        series1.getData().add(new XYChart.Data("June", 300));
        series1.getData().add(new XYChart.Data("July", 111));
        series1.getData().add(new XYChart.Data("August", 30));
        series1.getData().add(new XYChart.Data("September", 75));
        series1.getData().add(new XYChart.Data("October", 55));
        series1.getData().add(new XYChart.Data("November", 225));
        series1.getData().add(new XYChart.Data("December", 99));
          
        //Series 2
        XYChart.Series series2 = new XYChart.Series();
        series2.setName("XYChart.Series 2");
          
        series2.getData().add(new XYChart.Data("January", 150));
        series2.getData().add(new XYChart.Data("February", 100));
        series2.getData().add(new XYChart.Data("March", 60));
        series2.getData().add(new XYChart.Data("April", 40));
        series2.getData().add(new XYChart.Data("May", 30));
        series2.getData().add(new XYChart.Data("June", 100));
        series2.getData().add(new XYChart.Data("July", 100));
        series2.getData().add(new XYChart.Data("August", 10));
        series2.getData().add(new XYChart.Data("September", 175));
        series2.getData().add(new XYChart.Data("October", 155));
        series2.getData().add(new XYChart.Data("November", 125));
        series2.getData().add(new XYChart.Data("December", 150));
 
        //
         
        barChart.getData().addAll(series1, series2);
              
        root.getChildren().addAll(barChart);
  
        primaryStage.setScene(new Scene(root, 500, 400));
        primaryStage.show();
    }
}


Compare with JavaFX Area Chart

Saturday, April 28, 2012

Define the range and space of NumberAxis in JavaFX charts

In the last post of StackedAreaChart, the month axis is displayed from 0~13. In order to specify the horizontal axis, we can use 3-parameters/4-parameters constructor of NumberAxis.

public NumberAxis(double lowerBound, double upperBound, double tickUnit)
Create a non-auto-ranging NumberAxis with the given upper bound, lower bound and tick unit.
Parameters:
  • lowerBound - The lower bound for this axis, ie min plottable value
  • upperBound - The upper bound for this axis, ie max plottable value
  • tickUnit - The tick unit, ie space between tickmarks

Example:

package javafx21;

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.StackedAreaChart;
import javafx.scene.chart.XYChart;
import javafx.stage.Stage;

/**
 *
 * @web http://java-buddy.blogspot.com/
 */
public class Charts extends Application {
    


    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }
    
    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("java-buddy.blogspot.com");
        Group root = new Group();
         
        //final NumberAxis xAxis = new NumberAxis();
        //Use 3 parameter constructor to define the min, max and space of the axis
        final NumberAxis xAxis = new NumberAxis(1, 12, 1);
        
        final NumberAxis yAxis = new NumberAxis();
        final StackedAreaChart<Number,Number> stackedAreaChart = new StackedAreaChart<>(xAxis,yAxis);
        final XYChart.Series<Number,Number> series1 = new XYChart.Series<>();
         
        xAxis.setLabel("Month");
        yAxis.setLabel("Value");

        stackedAreaChart.setTitle("StackedAreaChart");
        
        //Series 1

        series1.setName("XYChart.Series 1");
         
        series1.getData().add(new XYChart.Data(1, 100));
        series1.getData().add(new XYChart.Data(2, 200));
        series1.getData().add(new XYChart.Data(3, 50));
        series1.getData().add(new XYChart.Data(4, 75));
        series1.getData().add(new XYChart.Data(5, 110));
        series1.getData().add(new XYChart.Data(6, 300));
        series1.getData().add(new XYChart.Data(7, 111));
        series1.getData().add(new XYChart.Data(8, 30));
        series1.getData().add(new XYChart.Data(9, 75));
        series1.getData().add(new XYChart.Data(10, 55));
        series1.getData().add(new XYChart.Data(11, 225));
        series1.getData().add(new XYChart.Data(12, 99));

        //Series 2
        XYChart.Series<Number,Number> series2 = new XYChart.Series();
        series2.setName("XYChart.Series 2");
         
        series2.getData().add(new XYChart.Data(1, 50));
        series2.getData().add(new XYChart.Data(2, 200));
        series2.getData().add(new XYChart.Data(3, 260));
        series2.getData().add(new XYChart.Data(4, 100));
        //series2.getData().add(new XYChart.Data(5, 100));
        series2.getData().add(new XYChart.Data(6, 100));
        series2.getData().add(new XYChart.Data(7, 0));
        //series2.getData().add(new XYChart.Data(8, 0));
        series2.getData().add(new XYChart.Data(9, 0));
        series2.getData().add(new XYChart.Data(10, 100));
        //series2.getData().add(new XYChart.Data(11, 150));
        series2.getData().add(new XYChart.Data(12, 200));
        
        //
        
        stackedAreaChart.getData().addAll(series1, series2);
             
        root.getChildren().addAll(stackedAreaChart);
 
        primaryStage.setScene(new Scene(root, 500, 400));
        primaryStage.show();
    }
}


JavaFX 2.1: javafx.scene.chart.StackedAreaChart

JavaFX 2.1 introduce a new StackedAreaChart class. StackedAreaChart is a variation of AreaChart that displays trends of the contribution of each value. (over time e.g.) The areas are stacked so that each series adjoins but does not overlap the preceding series. This contrasts with the Area chart where each series overlays the preceding series. The cumulative nature of the StackedAreaChart gives an idea of the total Y data value at any given point along the X axis. Since data points across multiple series may not be common, StackedAreaChart interpolates values along the line joining the data points whenever necessary.


In the example, some column in series 2 are missed. From the graph, it can be noticed how JavaFX display the StackedAreaChart with missed column.

package javafx21;

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.StackedAreaChart;
import javafx.scene.chart.XYChart;
import javafx.stage.Stage;

/**
 *
 * @web http://java-buddy.blogspot.com/
 */
public class Charts extends Application {
    


    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }
    
    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("java-buddy.blogspot.com");
        Group root = new Group();
         
        final NumberAxis xAxis = new NumberAxis();
        final NumberAxis yAxis = new NumberAxis();
        final StackedAreaChart<Number,Number> stackedAreaChart = new StackedAreaChart<>(xAxis,yAxis);
        final XYChart.Series<Number,Number> series1 = new XYChart.Series<>();
         
        xAxis.setLabel("Month");
        yAxis.setLabel("Value");

        stackedAreaChart.setTitle("StackedAreaChart");
        
        //Series 1

        series1.setName("XYChart.Series 1");
         
        series1.getData().add(new XYChart.Data(1, 100));
        series1.getData().add(new XYChart.Data(2, 200));
        series1.getData().add(new XYChart.Data(3, 50));
        series1.getData().add(new XYChart.Data(4, 75));
        series1.getData().add(new XYChart.Data(5, 110));
        series1.getData().add(new XYChart.Data(6, 300));
        series1.getData().add(new XYChart.Data(7, 111));
        series1.getData().add(new XYChart.Data(8, 30));
        series1.getData().add(new XYChart.Data(9, 75));
        series1.getData().add(new XYChart.Data(10, 55));
        series1.getData().add(new XYChart.Data(11, 225));
        series1.getData().add(new XYChart.Data(12, 99));

        //Series 2
        XYChart.Series<Number,Number> series2 = new XYChart.Series();
        series2.setName("XYChart.Series 2");
         
        series2.getData().add(new XYChart.Data(1, 50));
        series2.getData().add(new XYChart.Data(2, 200));
        series2.getData().add(new XYChart.Data(3, 260));
        series2.getData().add(new XYChart.Data(4, 100));
        //series2.getData().add(new XYChart.Data(5, 100));
        series2.getData().add(new XYChart.Data(6, 100));
        series2.getData().add(new XYChart.Data(7, 0));
        //series2.getData().add(new XYChart.Data(8, 0));
        series2.getData().add(new XYChart.Data(9, 0));
        series2.getData().add(new XYChart.Data(10, 100));
        //series2.getData().add(new XYChart.Data(11, 150));
        series2.getData().add(new XYChart.Data(12, 200));
        
        //
        
        stackedAreaChart.getData().addAll(series1, series2);
             
        root.getChildren().addAll(stackedAreaChart);
 
        primaryStage.setScene(new Scene(root, 500, 400));
        primaryStage.show();
    }
}


Related:
- Define the range and space of NumberAxis in JavaFX charts
- JavaFX 2.1: javafx.scene.chart.StackedBarChart


Area Chart with two series of data

In Area Chart of JavaFX 2, we can add more series of data to a single Area Chart.
Area Chart with two series of data


package javafx21;

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.chart.AreaChart;
import javafx.scene.chart.CategoryAxis;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.stage.Stage;

/**
 *
 * @web http://java-buddy.blogspot.com/
 */
public class Charts extends Application {

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }
    
    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("java-buddy.blogspot.com");
        Group root = new Group();
         
        final CategoryAxis xAxis = new CategoryAxis();
        final NumberAxis yAxis = new NumberAxis();
         
        xAxis.setLabel("Month");
        yAxis.setLabel("Value");
         
        
        final AreaChart<String,Number> areaChart = new AreaChart<>(xAxis,yAxis);
 
        areaChart.setTitle("AreaChart");
        
        //Series 1
        XYChart.Series series1 = new XYChart.Series();
        series1.setName("XYChart.Series 1");
         
        series1.getData().add(new XYChart.Data("January", 100));
        series1.getData().add(new XYChart.Data("February", 200));
        series1.getData().add(new XYChart.Data("March", 50));
        series1.getData().add(new XYChart.Data("April", 75));
        series1.getData().add(new XYChart.Data("May", 110));
        series1.getData().add(new XYChart.Data("June", 300));
        series1.getData().add(new XYChart.Data("July", 111));
        series1.getData().add(new XYChart.Data("August", 30));
        series1.getData().add(new XYChart.Data("September", 75));
        series1.getData().add(new XYChart.Data("October", 55));
        series1.getData().add(new XYChart.Data("November", 225));
        series1.getData().add(new XYChart.Data("December", 99));
         
        //Series 2
        XYChart.Series series2 = new XYChart.Series();
        series2.setName("XYChart.Series 2");
         
        series2.getData().add(new XYChart.Data("January", 150));
        series2.getData().add(new XYChart.Data("February", 100));
        series2.getData().add(new XYChart.Data("March", 60));
        series2.getData().add(new XYChart.Data("April", 40));
        series2.getData().add(new XYChart.Data("May", 30));
        series2.getData().add(new XYChart.Data("June", 100));
        series2.getData().add(new XYChart.Data("July", 100));
        series2.getData().add(new XYChart.Data("August", 10));
        series2.getData().add(new XYChart.Data("September", 175));
        series2.getData().add(new XYChart.Data("October", 155));
        series2.getData().add(new XYChart.Data("November", 125));
        series2.getData().add(new XYChart.Data("December", 150));

        //
        
        areaChart.getData().addAll(series1, series2);
             
        root.getChildren().addAll(areaChart);
 
        primaryStage.setScene(new Scene(root, 500, 400));
        primaryStage.show();
    }
}


Compare with JavaFX 2: BarChart

Related: Apply custom style on AreaChart

Friday, April 27, 2012

JavaFX 2.1 now available


The JavaFX 2.1 release includes the JavaFX Software Development Kit (SDK) for the Windows and Mac OS X platforms. The JavaFX SDK provides the tools and technologies for developing JavaFX applications. This release also includes the JavaFX Runtime for the Windows platform.
In addition to a number of bug fixes, this release includes:
  • Media H.264 and AAC support
  • Mac OS X support
    Applications must be packaged for the desktop, Web and Web Start applications are not yet supported.
  • LCD text
  • UI enhancements, including controls for Combo Box, Stacked Chart, and application-wide menu bar
  • Webview to support JavaScript to Java method calls

- Read the JavaFX 2.1 Release Notes.

- JavaFX 2.1 General Availability Download


Set Legend position of charts

To place Legend on a specified position, call the setLegendSide() method.

Example:
Set Legend position

package javafx_charts;

import javafx.application.Application;
import javafx.geometry.Side;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.chart.AreaChart;
import javafx.scene.chart.CategoryAxis;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.scene.effect.BlurType;
import javafx.scene.effect.DropShadow;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

/**
 *
 * @web http://java-buddy.blogspot.com/
 */
public class JavaFX_Charts extends Application {

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }
    
    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("java-buddy.blogspot.com");
        Group root = new Group();
        
        final CategoryAxis xAxis = new CategoryAxis();
        final NumberAxis yAxis = new NumberAxis();
        
        xAxis.setLabel("Month");
        yAxis.setLabel("Value");
        
        final AreaChart<String,Number> areaChart = new AreaChart<>(xAxis,yAxis);

        areaChart.setTitle("AreaChart");
        XYChart.Series series = new XYChart.Series();
        series.setName("XYChart.Series");
        
        series.getData().add(new XYChart.Data("January", 100));
        series.getData().add(new XYChart.Data("February", 200));
        series.getData().add(new XYChart.Data("March", 50));
        series.getData().add(new XYChart.Data("April", 75));
        series.getData().add(new XYChart.Data("May", 110));
        series.getData().add(new XYChart.Data("June", 300));
        series.getData().add(new XYChart.Data("July", 111));
        series.getData().add(new XYChart.Data("August", 30));
        series.getData().add(new XYChart.Data("September", 75));
        series.getData().add(new XYChart.Data("October", 55));
        series.getData().add(new XYChart.Data("November", 225));
        series.getData().add(new XYChart.Data("December", 99));
        
        areaChart.getData().add(series);
        
        areaChart.setLegendSide(Side.TOP);
            
        root.getChildren().add(areaChart);

        primaryStage.setScene(new Scene(root, 500, 400));
        primaryStage.show();
    }
    
}


Apply shadow on charts

To add shadow on charts, we can create a Shadow object, and apply on charts using setEffect() method.

Example:

Apply shadow on charts


package javafx_charts;

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.chart.AreaChart;
import javafx.scene.chart.CategoryAxis;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.scene.effect.BlurType;
import javafx.scene.effect.DropShadow;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

/**
 *
 * @web http://java-buddy.blogspot.com/
 */
public class JavaFX_Charts extends Application {

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }
    
    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("java-buddy.blogspot.com");
        Group root = new Group();
        
        final CategoryAxis xAxis = new CategoryAxis();
        final NumberAxis yAxis = new NumberAxis();
        
        xAxis.setLabel("Month");
        yAxis.setLabel("Value");
        
        final AreaChart<String,Number> areaChart = new AreaChart<>(xAxis,yAxis);

        areaChart.setTitle("AreaChart");
        XYChart.Series series = new XYChart.Series();
        series.setName("XYChart.Series");
        
        series.getData().add(new XYChart.Data("January", 100));
        series.getData().add(new XYChart.Data("February", 200));
        series.getData().add(new XYChart.Data("March", 50));
        series.getData().add(new XYChart.Data("April", 75));
        series.getData().add(new XYChart.Data("May", 110));
        series.getData().add(new XYChart.Data("June", 300));
        series.getData().add(new XYChart.Data("July", 111));
        series.getData().add(new XYChart.Data("August", 30));
        series.getData().add(new XYChart.Data("September", 75));
        series.getData().add(new XYChart.Data("October", 55));
        series.getData().add(new XYChart.Data("November", 225));
        series.getData().add(new XYChart.Data("December", 99));
        
        areaChart.getData().add(series);
        
        DropShadow dropShadow = new DropShadow();
        dropShadow.setOffsetX(5);
        dropShadow.setOffsetY(10);
        dropShadow.setColor(Color.GRAY);
        dropShadow.setBlurType(BlurType.GAUSSIAN);
        areaChart.setEffect(dropShadow);
            
        root.getChildren().add(areaChart);

        primaryStage.setScene(new Scene(root, 500, 400));
        primaryStage.show();
    }
    
}


Tuesday, April 24, 2012

Create simple Area Chart using JavaFX 2

simple Area Chart




package javafx_charts;

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.chart.AreaChart;
import javafx.scene.chart.CategoryAxis;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.stage.Stage;

/**
 *
 * @web http://java-buddy.blogspot.com/
 */
public class JavaFX_Charts extends Application {

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }
    
    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("java-buddy.blogspot.com");
        Group root = new Group();
        
        final CategoryAxis xAxis = new CategoryAxis();
        final NumberAxis yAxis = new NumberAxis();
        
        xAxis.setLabel("Month");
        yAxis.setLabel("Value");
        
        final AreaChart<String,Number> areaChart = new AreaChart<>(xAxis,yAxis);

        areaChart.setTitle("AreaChart");
        XYChart.Series series = new XYChart.Series();
        series.setName("XYChart.Series");
        
        series.getData().add(new XYChart.Data("January", 100));
        series.getData().add(new XYChart.Data("February", 200));
        series.getData().add(new XYChart.Data("March", 50));
        series.getData().add(new XYChart.Data("April", 75));
        series.getData().add(new XYChart.Data("May", 110));
        series.getData().add(new XYChart.Data("June", 300));
        series.getData().add(new XYChart.Data("July", 111));
        series.getData().add(new XYChart.Data("August", 30));
        series.getData().add(new XYChart.Data("September", 75));
        series.getData().add(new XYChart.Data("October", 55));
        series.getData().add(new XYChart.Data("November", 225));
        series.getData().add(new XYChart.Data("December", 99));
        
        areaChart.getData().add(series);
            
        root.getChildren().add(areaChart);

        primaryStage.setScene(new Scene(root, 500, 400));
        primaryStage.show();
    }
    
}





Related:
- Create simple Line Chart using JavaFX 2
- JavaFX 2: BarChart


Friday, April 20, 2012

Create and update LineChart from TableView

Merge the previous articles "Create simple Line Chart" and "Editable TableView" for JavaFX 2.0, to build a interactive LineChart and TableView.



package javafx_table;

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.event.EventHandler;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.chart.*;
import javafx.scene.control.*;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.scene.input.KeyCode;
import javafx.scene.input.KeyEvent;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;
import javafx.util.Callback;

/**
*
* @web http://java-buddy.blogspot.com/
*/
public class JavaFX_TableView extends Application {
  
   private TableView<XYChart.Data> tableView = new TableView<>();
  
   private ObservableList<XYChart.Data> dataList =
           FXCollections.observableArrayList(
               new XYChart.Data("January", 100),
               new XYChart.Data("February", 200),
               new XYChart.Data("March", 50),
               new XYChart.Data("April", 75),
               new XYChart.Data("May", 110),
               new XYChart.Data("June", 300),
               new XYChart.Data("July", 111),
               new XYChart.Data("August", 30),
               new XYChart.Data("September", 75),
               new XYChart.Data("October", 55),
               new XYChart.Data("November", 225),
               new XYChart.Data("December", 99));
      
   /**
    * @param args the command line arguments
    */
   public static void main(String[] args) {
       launch(args);
   }
  
   @Override
   public void start(Stage primaryStage) {
       primaryStage.setTitle("java-buddy.blogspot.com");
      
       Group root = new Group();
      
       tableView.setEditable(true);
       Callback<TableColumn, TableCell> cellFactory =
               new Callback<TableColumn, TableCell>() {
           @Override
                   public TableCell call(TableColumn p) {
                       return new EditingCell();
                   }
               };

       TableColumn columnMonth = new TableColumn("Month");
       columnMonth.setCellValueFactory(
               new PropertyValueFactory<XYChart.Data,String>("XValue"));

       TableColumn columnValue = new TableColumn("Value");
       columnValue.setCellValueFactory(
               new PropertyValueFactory<XYChart.Data,Number>("YValue"));
      
       //--- Add for Editable Cell of Value field, in Number
       columnValue.setCellFactory(cellFactory);

       columnValue.setOnEditCommit(
               new EventHandler<TableColumn.CellEditEvent<XYChart.Data, Number>>() {
                   @Override public void handle(TableColumn.CellEditEvent<XYChart.Data, Number> t) {
                       ((XYChart.Data)t.getTableView().getItems().get(
                               t.getTablePosition().getRow())).setYValue(t.getNewValue());
                   }
               });

       //---
      
       //--- Prepare LineChart
       final CategoryAxis xAxis = new CategoryAxis();
       final NumberAxis yAxis = new NumberAxis();
      
       xAxis.setLabel("Month");
       yAxis.setLabel("Value");
      
       final LineChart<String, Number> lineChart = new LineChart<>(xAxis,yAxis);

       lineChart.setTitle("LineChart");
       XYChart.Series series = new XYChart.Series(dataList);
       series.setName("XYChart.Series");
       lineChart.getData().add(series);

      
       //--- Prepare TableView
      
       tableView.setItems(dataList);
       tableView.getColumns().addAll(columnMonth, columnValue);
      
       //---
      
       HBox hBox = new HBox();
       hBox.setSpacing(10);
       hBox.getChildren().addAll(tableView, lineChart);

       root.getChildren().add(hBox);
      
       primaryStage.setScene(new Scene(root, 670, 400));
       primaryStage.show();
   }
  
   class EditingCell extends TableCell<XYChart.Data, Number> {

       private TextField textField;
      
       public EditingCell() {}
      
       @Override
       public void startEdit() {
           super.startEdit();
          
           if (textField == null) {
               createTextField();
           }
          
           setGraphic(textField);
           setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
           textField.selectAll();
       }
      
       @Override
       public void cancelEdit() {
           super.cancelEdit();
          
           setText(String.valueOf(getItem()));
           setContentDisplay(ContentDisplay.TEXT_ONLY);
       }

       @Override
       public void updateItem(Number item, boolean empty) {
           super.updateItem(item, empty);
          
           if (empty) {
               setText(null);
               setGraphic(null);
           } else {
               if (isEditing()) {
                   if (textField != null) {
                       textField.setText(getString());
                   }
                   setGraphic(textField);
                   setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
               } else {
                   setText(getString());
                   setContentDisplay(ContentDisplay.TEXT_ONLY);
               }
           }
       }

       private void createTextField() {
           textField = new TextField(getString());
           textField.setMinWidth(this.getWidth() - this.getGraphicTextGap()*2);
           textField.setOnKeyPressed(new EventHandler<KeyEvent>() {
              
               @Override
               public void handle(KeyEvent t) {
                   if (t.getCode() == KeyCode.ENTER) {
                       commitEdit(Double.parseDouble(textField.getText()));
                   } else if (t.getCode() == KeyCode.ESCAPE) {
                       cancelEdit();
                   }
               }
           });
       }
      
       private String getString() {
           return getItem() == null ? "" : getItem().toString();
       }
   }
 
}



Related:
- JavaFX 2: Editable TableView
- Create simple Line Chart using JavaFX 2
- Create and update PieChart from TableView
- Create dynamic StackedBarChart of JavaFX 2

Thursday, April 19, 2012

Create simple Line Chart using JavaFX 2

JavaFX 2 LineChart

package javafx_charts;

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.chart.CategoryAxis;
import javafx.scene.chart.LineChart;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.stage.Stage;

/**
*
* @web http://java-buddy.blogspot.com/
*/
public class JavaFX_Charts extends Application {

/**
* @param args the command line arguments
*/
public static void main(String[] args) {
launch(args);
}

@Override
public void start(Stage primaryStage) {
primaryStage.setTitle("java-buddy.blogspot.com");
Group root = new Group();

final CategoryAxis xAxis = new CategoryAxis();
final NumberAxis yAxis = new NumberAxis();

xAxis.setLabel("Month");
yAxis.setLabel("Value");

final LineChart<String,Number> lineChart = new LineChart<>(xAxis,yAxis);

lineChart.setTitle("LineChart");
XYChart.Series series = new XYChart.Series();
series.setName("XYChart.Series");

series.getData().add(new XYChart.Data("January", 100));
series.getData().add(new XYChart.Data("February", 200));
series.getData().add(new XYChart.Data("March", 50));
series.getData().add(new XYChart.Data("April", 75));
series.getData().add(new XYChart.Data("May", 110));
series.getData().add(new XYChart.Data("June", 300));
series.getData().add(new XYChart.Data("July", 111));
series.getData().add(new XYChart.Data("August", 30));
series.getData().add(new XYChart.Data("September", 75));
series.getData().add(new XYChart.Data("October", 55));
series.getData().add(new XYChart.Data("November", 225));
series.getData().add(new XYChart.Data("December", 99));

lineChart.getData().add(series);

root.getChildren().add(lineChart);

primaryStage.setScene(new Scene(root, 500, 400));
primaryStage.show();
}

}


Related:
- Create simple Pie Chart using JavaFX 2
- Create and update LineChart from TableView
- Create simple Area Chart using JavaFX 2

Wednesday, April 18, 2012

Create and update PieChart from TableView

In previous article, I demonstrate how to create PieChart and Editable TableView. They will be merged in this article to make the PieChart update with Table.




First of all, compare my Record class in last article of Editable TableView and PieChart.Data of JavaFX 2.0. We can replace Record in the TableView with PieChart.Data.

Then we can easy to create PieChart using with dataList of ObservableList<PieChart.Data>. When the content of dataList changed, the PieChart will change accordingly.

package javafx_table;

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.event.EventHandler;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.chart.PieChart;
import javafx.scene.control.*;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.scene.input.KeyCode;
import javafx.scene.input.KeyEvent;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;
import javafx.util.Callback;

/**
*
* @web http://java-buddy.blogspot.com/
*/
public class JavaFX_TableView extends Application {
  
   private TableView<PieChart.Data> tableView = new TableView<>();
  
   private ObservableList<PieChart.Data> dataList =
           FXCollections.observableArrayList(           
               new PieChart.Data("January", 100),
               new PieChart.Data("February", 200),
               new PieChart.Data("March", 50),
               new PieChart.Data("April", 75),
               new PieChart.Data("May", 110),
               new PieChart.Data("June", 300),
               new PieChart.Data("July", 111),
               new PieChart.Data("August", 30),
               new PieChart.Data("September", 75),
               new PieChart.Data("October", 55),
               new PieChart.Data("November", 225),
               new PieChart.Data("December", 99));
  
   /**
    * @param args the command line arguments
    */
   public static void main(String[] args) {
       launch(args);
   }
  
   @Override
   public void start(Stage primaryStage) {
       primaryStage.setTitle("java-buddy.blogspot.com");
      
       Group root = new Group();
      
       tableView.setEditable(true);
       Callback<TableColumn, TableCell> cellFactory =
               new Callback<TableColumn, TableCell>() {
           @Override
                   public TableCell call(TableColumn p) {
                       return new EditingCell();
                   }
               };

       TableColumn columnMonth = new TableColumn("Month");
       columnMonth.setCellValueFactory(
               new PropertyValueFactory<PieChart.Data,String>("name"));

       TableColumn columnValue = new TableColumn("Value");
       columnValue.setCellValueFactory(
               new PropertyValueFactory<PieChart.Data,Double>("pieValue"));
      
       //--- Add for Editable Cell of Value field, in Double
       columnValue.setCellFactory(cellFactory);
       columnValue.setOnEditCommit(
               new EventHandler<TableColumn.CellEditEvent<PieChart.Data, Double>>() {
                   @Override public void handle(TableColumn.CellEditEvent<PieChart.Data, Double> t) {
                       ((PieChart.Data)t.getTableView().getItems().get(
                               t.getTablePosition().getRow())).setPieValue(t.getNewValue());
                   }
               });
       //---
      
       //--- Prepare PieChart
       final PieChart pieChart = new PieChart(dataList);
       pieChart.setTitle("PieChart");
      
       //---
      
       tableView.setItems(dataList);
       tableView.getColumns().addAll(columnMonth, columnValue);
      
       //---
      
       HBox hBox = new HBox();
       hBox.setSpacing(10);
       hBox.getChildren().addAll(tableView, pieChart);

       root.getChildren().add(hBox);
      
       primaryStage.setScene(new Scene(root, 640, 400));
       primaryStage.show();
   }
  
   class EditingCell extends TableCell<PieChart.Data, Double> {

       private TextField textField;
      
       public EditingCell() {}
      
       @Override
       public void startEdit() {
           super.startEdit();
          
           if (textField == null) {
               createTextField();
           }
          
           setGraphic(textField);
           setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
           textField.selectAll();
       }
      
       @Override
       public void cancelEdit() {
           super.cancelEdit();
          
           setText(String.valueOf(getItem()));
           setContentDisplay(ContentDisplay.TEXT_ONLY);
       }

       @Override
       public void updateItem(Double item, boolean empty) {
           super.updateItem(item, empty);
          
           if (empty) {
               setText(null);
               setGraphic(null);
           } else {
               if (isEditing()) {
                   if (textField != null) {
                       textField.setText(getString());
                   }
                   setGraphic(textField);
                   setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
               } else {
                   setText(getString());
                   setContentDisplay(ContentDisplay.TEXT_ONLY);
               }
           }
       }

       private void createTextField() {
           textField = new TextField(getString());
           textField.setMinWidth(this.getWidth() - this.getGraphicTextGap()*2);
           textField.setOnKeyPressed(new EventHandler<KeyEvent>() {
              
               @Override
               public void handle(KeyEvent t) {
                   if (t.getCode() == KeyCode.ENTER) {
                       commitEdit(Double.parseDouble(textField.getText()));
                   } else if (t.getCode() == KeyCode.ESCAPE) {
                       cancelEdit();
                   }
               }
           });
       }
      
       private String getString() {
           return getItem() == null ? "" : getItem().toString();
       }
   }
 
}



Related:
- Create and update LineChart from TableView

Tuesday, April 17, 2012

JavaFX 2: Editable TableView

Last article demonstrate how to implement a simple TableView. It's modified to be editable: double click the Value field of the table to edit the value.

JavaFX 2: Editable TableView

package javafx_table;

import javafx.application.Application;
import javafx.beans.property.SimpleDoubleProperty;
import javafx.beans.property.SimpleStringProperty;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.event.EventHandler;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.scene.input.KeyCode;
import javafx.scene.input.KeyEvent;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
import javafx.util.Callback;

/**
*
* @web http://java-buddy.blogspot.com/
*/
public class JavaFX_TableView extends Application {

  public class Record{
      private SimpleStringProperty fieldMonth;
      private SimpleDoubleProperty fieldValue;
    
      Record(String fMonth, double fValue){
          this.fieldMonth = new SimpleStringProperty(fMonth);
          this.fieldValue = new SimpleDoubleProperty(fValue);
      }
    
      public String getFieldMonth() {
          return fieldMonth.get();
      }
    
      public double getFieldValue() {
          return fieldValue.get();
      }
    
      public void setFieldMonth(String fMonth) {
          fieldMonth.set(fMonth);
      }
    
      public void setFieldValue(Double fValue) {
          fieldValue.set(fValue);
      }
    
  }

  private TableView<Record> tableView = new TableView<>();

  private ObservableList<Record> dataList =
          FXCollections.observableArrayList(          
              new Record("January", 100),
              new Record("February", 200),
              new Record("March", 50),
              new Record("April", 75),
              new Record("May", 110),
              new Record("June", 300),
              new Record("July", 111),
              new Record("August", 30),
              new Record("September", 75),
              new Record("October", 55),
              new Record("November", 225),
              new Record("December", 99));

  /**
   * @param args the command line arguments
   */
  public static void main(String[] args) {
      launch(args);
  }

  @Override
  public void start(Stage primaryStage) {
      primaryStage.setTitle("java-buddy.blogspot.com");
    
      Group root = new Group();
    
      tableView.setEditable(true);
      Callback<TableColumn, TableCell> cellFactory =
              new Callback<TableColumn, TableCell>() {
                  public TableCell call(TableColumn p) {
                      return new EditingCell();
                  }
              };

      TableColumn columnMonth = new TableColumn("Month");
      columnMonth.setCellValueFactory(
              new PropertyValueFactory<Record,String>("fieldMonth"));

      TableColumn columnValue = new TableColumn("Value");
      columnValue.setCellValueFactory(
              new PropertyValueFactory<Record,Double>("fieldValue"));
    
      //--- Add for Editable Cell of Value field, in Double
      columnValue.setCellFactory(cellFactory);
      columnValue.setOnEditCommit(
              new EventHandler<TableColumn.CellEditEvent<Record, Double>>() {
                  @Override public void handle(TableColumn.CellEditEvent<Record, Double> t) {
                      ((Record)t.getTableView().getItems().get(
                              t.getTablePosition().getRow())).setFieldValue(t.getNewValue());
                  }
              });
      //---
    
      tableView.setItems(dataList);
      tableView.getColumns().addAll(columnMonth, columnValue);
    
      VBox vBox = new VBox();
      vBox.setSpacing(10);
      vBox.getChildren().add(tableView);

      root.getChildren().add(vBox);
    
      primaryStage.setScene(new Scene(root, 300, 250));
      primaryStage.show();
  }

  class EditingCell extends TableCell<Record, Double> {

      private TextField textField;
    
      public EditingCell() {}
    
      @Override
      public void startEdit() {
          super.startEdit();
        
          if (textField == null) {
              createTextField();
          }
        
          setGraphic(textField);
          setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
          textField.selectAll();
      }
    
      @Override
      public void cancelEdit() {
          super.cancelEdit();
        
          setText(String.valueOf(getItem()));
          setContentDisplay(ContentDisplay.TEXT_ONLY);
      }

      @Override
      public void updateItem(Double item, boolean empty) {
          super.updateItem(item, empty);
        
          if (empty) {
              setText(null);
              setGraphic(null);
          } else {
              if (isEditing()) {
                  if (textField != null) {
                      textField.setText(getString());
                  }
                  setGraphic(textField);
                  setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
              } else {
                  setText(getString());
                  setContentDisplay(ContentDisplay.TEXT_ONLY);
              }
          }
      }

      private void createTextField() {
          textField = new TextField(getString());
          textField.setMinWidth(this.getWidth() - this.getGraphicTextGap()*2);
          textField.setOnKeyPressed(new EventHandler<KeyEvent>() {
            
              @Override
              public void handle(KeyEvent t) {
                  if (t.getCode() == KeyCode.ENTER) {
                      commitEdit(Double.parseDouble(textField.getText()));
                  } else if (t.getCode() == KeyCode.ESCAPE) {
                      cancelEdit();
                  }
              }
          });
      }
    
      private String getString() {
          return getItem() == null ? "" : getItem().toString();
      }
  }

}


Related article:
- Create and update PieChart from TableView
- Create and update LineChart from TableView
- Multi-column editable TableVIew

Friday, April 13, 2012

JavaFX 2: TableView

JavaFX provide API of TableView, TableColumn, and TableCell to help creating tables. You can populate a table by implementing the data model and by applying a cell factory.

The table classes provide built-in capabilities to sort data in columns and to resize columns when necessary.

It's a example of JavaFX 2 TableView.

JavaFX 2: TableView

Please note that the setCellValueFactory() method specifies a cell factory for each column. It uses the "
fieldMonth", "fieldValue" properties of the table columns as references to the corresponding methods of the Record class. It assume that there are callback method named getFieldMonth() and getFieldValue() in Record class.
Remark - if you name it getfieldMonth() and getfieldValue(); it will not work!

~ Ref: http://docs.oracle.com/javafx/2.0/api/javafx/scene/control/cell/PropertyValueFactory.html

package javafx_table;

import javafx.application.Application;
import javafx.beans.property.SimpleDoubleProperty;
import javafx.beans.property.SimpleStringProperty;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

/**
*
* @web http://java-buddy.blogspot.com/
*/
public class JavaFX_TableView extends Application {

  public class Record{
      private SimpleStringProperty fieldMonth;
      private SimpleDoubleProperty fieldValue;
    
      Record(String fMonth, double fValue){
          this.fieldMonth = new SimpleStringProperty(fMonth);
          this.fieldValue = new SimpleDoubleProperty(fValue);
      }
    
      public String getFieldMonth() {
          return fieldMonth.get();
      }
    
      public double getFieldValue() {
          return fieldValue.get();
      }
    
  }

  private TableView<Record> tableView = new TableView<>();

  private ObservableList<Record> dataList =
          FXCollections.observableArrayList(          
              new Record("January", 100),
              new Record("February", 200),
              new Record("March", 50),
              new Record("April", 75),
              new Record("May", 110),
              new Record("June", 300),
              new Record("July", 111),
              new Record("August", 30),
              new Record("September", 75),
              new Record("October", 55),
              new Record("November", 225),
              new Record("December", 99));

  /**
   * @param args the command line arguments
   */
  public static void main(String[] args) {
      launch(args);
  }

  @Override
  public void start(Stage primaryStage) {
      primaryStage.setTitle("java-buddy.blogspot.com");
    
      Group root = new Group();

      TableColumn columnMonth = new TableColumn("Month");
      columnMonth.setCellValueFactory(
              new PropertyValueFactory<Record,String>("fieldMonth"));

      TableColumn columnValue = new TableColumn("Value");
      columnValue.setCellValueFactory(
              new PropertyValueFactory<Record,Double>("fieldValue"));
    
      tableView.setItems(dataList);
      tableView.getColumns().addAll(columnMonth, columnValue);
    
      VBox vBox = new VBox();
      vBox.setSpacing(10);
      vBox.getChildren().add(tableView);

      root.getChildren().add(vBox);
    
      primaryStage.setScene(new Scene(root, 300, 250));
      primaryStage.show();
  }
}


Next:
- Editable TableView


More:
Read csv file, display in JavaFX TableView
Read csv, run in background thread and update JavaFX TableView dynamically

Thursday, April 12, 2012

Implement event handler to get data of individual node of PieChart

We can implement EventHandler of MouseEvent for individual node of a PieChart, to read data of the node by calling getName() and getPieValue().

Example:

Implement event handler to get data of individual node of PieChart

package javafx_charts;

import java.awt.event.MouseEvent;
import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.event.EventType;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.chart.PieChart;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.StackPane;
import javafx.scene.shape.LineTo;
import javafx.scene.shape.MoveTo;
import javafx.stage.Stage;

/**
*
* @web http://java-buddy.blogspot.com/
*/
public class JavaFX_Charts extends Application {

Label label;

/**
* @param args the command line arguments
*/
public static void main(String[] args) {
launch(args);
}

@Override
public void start(Stage primaryStage) {
primaryStage.setTitle("java-buddy.blogspot.com");
Group root = new Group();

ObservableList<PieChart.Data> pieChartData =
FXCollections.observableArrayList(
new PieChart.Data("January", 100),
new PieChart.Data("February", 200),
new PieChart.Data("March", 50),
new PieChart.Data("April", 75),
new PieChart.Data("May", 110),
new PieChart.Data("June", 300),
new PieChart.Data("July", 111),
new PieChart.Data("August", 30),
new PieChart.Data("September", 75),
new PieChart.Data("October", 55),
new PieChart.Data("November", 225),
new PieChart.Data("December", 99));

final PieChart pieChart = new PieChart(pieChartData);
pieChart.setTitle("PieChart");

label = new Label("");

//add event handler
for(final PieChart.Data data : pieChart.getData()){

data.getNode().addEventHandler(
javafx.scene.input.MouseEvent.MOUSE_PRESSED,
new EventHandler<javafx.scene.input.MouseEvent>() {

@Override
public void handle(javafx.scene.input.MouseEvent mouseEvent) {

String name = data.getName();
double value = data.getPieValue();
label.setText(name + " : " + String.valueOf(value));
}
});

data.getNode().addEventHandler(
javafx.scene.input.MouseEvent.MOUSE_RELEASED,
new EventHandler<javafx.scene.input.MouseEvent>() {

@Override
public void handle(javafx.scene.input.MouseEvent mouseEvent) {
label.setText("");
}
});
}

root.getChildren().add(pieChart);
root.getChildren().add(label);

primaryStage.setScene(new Scene(root, 500, 400));
primaryStage.show();
}

}


Related article:
- Create and update PieChart from TableView



Wednesday, April 11, 2012

Java 7 New Features Cookbook




Each recipe comprises step-by-step instructions followed by an analysis of what was done in each task and other useful information. The book is designed so that you can read it chapter by chapter, or look at the list of recipes and refer to them in no particular order. Each example comes with its expected output to make your learning even easier. This book is designed to bring those who are familiar with Java up-to-speed on the new features found in Java 7.

Create simple Pie Chart using JavaFX 2

simple Pie Chart

package javafx_charts;

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.chart.PieChart;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

/**
*
* @web http://java-buddy.blogspot.com/
*/
public class JavaFX_Charts extends Application {

/**
* @param args the command line arguments
*/
public static void main(String[] args) {
launch(args);
}

@Override
public void start(Stage primaryStage) {
primaryStage.setTitle("java-buddy.blogspot.com");
Group root = new Group();

ObservableList<PieChart.Data> pieChartData =
FXCollections.observableArrayList(
new PieChart.Data("January", 100),
new PieChart.Data("February", 200),
new PieChart.Data("March", 50),
new PieChart.Data("April", 75),
new PieChart.Data("May", 110),
new PieChart.Data("June", 300),
new PieChart.Data("July", 111),
new PieChart.Data("August", 30),
new PieChart.Data("September", 75),
new PieChart.Data("October", 55),
new PieChart.Data("November", 225),
new PieChart.Data("December", 99));

final PieChart pieChart = new PieChart(pieChartData);
pieChart.setTitle("PieChart");

root.getChildren().add(pieChart);

primaryStage.setScene(new Scene(root, 500, 400));
primaryStage.show();
}
}



Related article:
- Implement event handler to get data of individual node of PieChart
- Create and update PieChart from TableView
- Create simple Line Chart using JavaFX 2



Tuesday, April 10, 2012

JavaFX 2: Change scale in runtime

To change scale (ex. of a Rectangle) in runtime, call setScaleX(double) and setScaleY(double) methods.

In this example, user can press and drag the mouse to change the scale of the rectangle at runtime.


package javafx_transform;

import javafx.application.Application;
import javafx.event.EventHandler;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.input.MouseEvent;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;

/**
 *
 * @web http://java-buddy.blogspot.com/
 */
public class JavaFX_Transform extends Application {

    Rectangle rect;
    double x0, y0;
    
    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }
    
    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("java-buddy.blogspot.com");
        Group root = new Group();
        Scene scene = new Scene(root, 300, 250);

        rect = new Rectangle(100, 100, Color.RED);
        
        scene.setOnMouseDragged(mouseHandler);
        scene.setOnMousePressed(mouseHandler);

        root.getChildren().add(rect);
        primaryStage.setScene(scene);
        primaryStage.show();
    }
    
    void setScaleRect(double sX, double sY){
        
        rect.setScaleX(sX);
        rect.setScaleY(sY);
        
    }
    
        
    EventHandler<MouseEvent> mouseHandler = new EventHandler<MouseEvent>() {

        @Override
        public void handle(MouseEvent mouseEvent) {
            
            if(mouseEvent.getEventType() == MouseEvent.MOUSE_PRESSED){
                x0 = mouseEvent.getX();
                y0 = mouseEvent.getY();
                setScaleRect(1.0, 1.0);

            }else if(mouseEvent.getEventType() == MouseEvent.MOUSE_DRAGGED){
                double scaleX = ((mouseEvent.getX() - x0) /100) + 1;
                double scaleY = ((mouseEvent.getY() - y0)/100) + 1;
                
                setScaleRect(scaleX, scaleY);

            }
            
        }
    
    };
}




Sunday, April 8, 2012

JavaFX 2: transform of Shear

JavaFX 2: transform of Shear

package javafx_transform;

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.scene.transform.Shear;
import javafx.stage.Stage;

/**
*
* @web http://java-buddy.blogspot.com/
*/
public class JavaFX_Transform extends Application {

/**
* @param args the command line arguments
*/
public static void main(String[] args) {
launch(args);
}

@Override
public void start(Stage primaryStage) {
primaryStage.setTitle("java-buddy.blogspot.com");
Group root = new Group();
Scene scene = new Scene(root, 300, 250);

Rectangle rect = new Rectangle(100, 100, Color.RED);
rect.getTransforms().add(new Shear(0.5, 0));; //Shear(double x, double y)

root.getChildren().add(rect);
primaryStage.setScene(scene);
primaryStage.show();
}
}

Friday, April 6, 2012

JavaFX 2: transform of scale

JavaFX 2: transform of scale


package javafx_transform;

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.scene.transform.Scale;
import javafx.stage.Stage;

/**
*
* @web http://java-buddy.blogspot.com/
*/
public class JavaFX_Transform extends Application {

/**
* @param args the command line arguments
*/
public static void main(String[] args) {
launch(args);
}

@Override
public void start(Stage primaryStage) {
primaryStage.setTitle("java-buddy.blogspot.com");
Group root = new Group();
Scene scene = new Scene(root, 300, 250);

Rectangle rect1 = new Rectangle(100, 100, Color.BLUE); //without scale
Rectangle rect2 = new Rectangle(100, 100, Color.RED); //with scale
rect2.getTransforms().add(new Scale(2.0, 2.0)); //Scale(double x, double y)

root.getChildren().add(rect2);
root.getChildren().add(rect1);
primaryStage.setScene(scene);
primaryStage.show();
}
}

Thursday, April 5, 2012

JavaFX 2: transform of translate

JavaFX 2: transform of translate
package javafx_transform;

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.scene.transform.Translate;
import javafx.stage.Stage;

/**
*
* @web http://java-buddy.blogspot.com/
*/
public class JavaFX_Transform extends Application {

/**
* @param args the command line arguments
*/
public static void main(String[] args) {
launch(args);
}

@Override
public void start(Stage primaryStage) {
primaryStage.setTitle("java-buddy.blogspot.com");
Group root = new Group();
Scene scene = new Scene(root, 300, 250);

Rectangle rect1 = new Rectangle(100, 100, Color.BLUE); //without translate
Rectangle rect2 = new Rectangle(100, 100, Color.RED); //with translate
rect2.getTransforms().add(new Translate(150, 50)); //Translate(double x, double y)

root.getChildren().add(rect1);
root.getChildren().add(rect2);
primaryStage.setScene(scene);
primaryStage.show();
}
}

JavaFX 2: Apply transform of rotate

JavaFX 2: Apply transform of rotate

package javafx_transform;

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.scene.transform.Rotate;
import javafx.stage.Stage;

/**
*
* @web http://java-buddy.blogspot.com/
*/
public class JavaFX_Transform extends Application {

/**
* @param args the command line arguments
*/
public static void main(String[] args) {
launch(args);
}

@Override
public void start(Stage primaryStage) {
primaryStage.setTitle("java-buddy.blogspot.com");
Group root = new Group();
Scene scene = new Scene(root, 300, 250);

Rectangle rect1 = new Rectangle(100, 100, Color.BLUE); //without rotate
Rectangle rect2 = new Rectangle(100, 100, Color.RED); //with rotate 30 degree
rect2.getTransforms().add(new Rotate(30, 0, 0));

root.getChildren().add(rect1);
root.getChildren().add(rect2);
primaryStage.setScene(scene);
primaryStage.show();
}
}


Wednesday, April 4, 2012

Free draw by MouseEvent

Last article demonstrate how to "Detect mouse event" in JavaFX 2. It's modify to free draw path in the EventHandler for MouseEvent.


package javafx_mouseevent;

import javafx.application.Application;
import javafx.event.EventHandler;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.input.MouseEvent;
import javafx.scene.paint.Color;
import javafx.scene.shape.LineTo;
import javafx.scene.shape.MoveTo;
import javafx.scene.shape.Path;
import javafx.stage.Stage;

/**
 *
 * @web http://java-buddy.blogspot.com/
 */
public class JavaFX_MouseEvent extends Application {
    
    Label label;
    
    Path path;

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }
    
    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("java-buddy.blogspot.com");
        Group root = new Group();
        Scene scene = new Scene(root, 300, 250);
        
        label = new Label("Wait mouse");
        
        path = new Path();
        path.setStrokeWidth(1);
        path.setStroke(Color.BLACK);
        
        
        scene.setOnMouseClicked(mouseHandler);
        scene.setOnMouseDragged(mouseHandler);
        scene.setOnMouseEntered(mouseHandler);
        scene.setOnMouseExited(mouseHandler);
        scene.setOnMouseMoved(mouseHandler);
        scene.setOnMousePressed(mouseHandler);
        scene.setOnMouseReleased(mouseHandler);

        root.getChildren().add(label);
        root.getChildren().add(path);
        primaryStage.setScene(scene);
        primaryStage.show();
    }
    
    EventHandler<MouseEvent> mouseHandler = new EventHandler<MouseEvent>() {

        @Override
        public void handle(MouseEvent mouseEvent) {
            label.setText(mouseEvent.getEventType() + "\n"
                    + "X : Y - " + mouseEvent.getX() + " : " + mouseEvent.getY() + "\n"
                    + "SceneX : SceneY - " + mouseEvent.getSceneX() + " : " + mouseEvent.getSceneY() + "\n"
                    + "ScreenX : ScreenY - " + mouseEvent.getScreenX() + " : " + mouseEvent.getScreenY());
            
            if(mouseEvent.getEventType() == MouseEvent.MOUSE_PRESSED){
                path.getElements().clear();
                path.getElements().add(new MoveTo(mouseEvent.getX(), mouseEvent.getY()));
            }else if(mouseEvent.getEventType() == MouseEvent.MOUSE_DRAGGED){
                path.getElements().add(new LineTo(mouseEvent.getX(), mouseEvent.getY()));
            }
            
        }
    
    };
    
}


JavaFX Scene Builder - A Visual Layout Tool for JavaFX Applications

JavaFX Scene Builder is a visual layout tool that lets users quickly design JavaFX application user interfaces, without coding. Users can drag and drop UI components to a work area, modify their properties, apply style sheets, and the FXML code for the layout that they are creating is automatically generated in the background. The result is an FXML file that can then be combined with a Java project by binding the UI to the application’s logic.
  • UI Layout Tool
    Scene Builder allows you to easily layout JavaFX UI controls, charts, shapes, and containers, so that you can quickly prototype user interfaces. Animations and effects can be applied seamlessly for more sophisticated UIs.

  • Integrated Developer Workflow
    Scene Builder can be used in combination with any Java IDE, but is more tightly integrated with NetBeans IDE. You can bind the UI to the source code that will handle the events and actions taken on each element through a simple process, run your application in NetBeans, and any changes to FXML in NetBeans will also reflect in your Scene Builder project.

  • Windows and Mac OS X
    Scene Builder is written as a JavaFX application, with native desktop integration on Windows and Mac OS X.
    It is the perfect example of a full-fledge JavaFX desktop application.

  • FXML Visual Editor
    Scene Builder generates FXML, an XML-based markup language that enables users to define an application’s user interface, separately from the application logic. You can also open and edit existing FXML files authored by other users.

  • Preview Your Work
    At any time during the creation of your project, you can preview what the user interface will really look like when deployed, unencumbered by the tool’s menus and palettes.

  • CSS Support
    You can apply the look and feel of your choice to your GUI layout by using style sheets. It’s as easy as selecting a GUI component, and pointing to the CSS file of your choice from the Properties Panel.



Link: http://www.oracle.com/technetwork/java/javafx/tools/index.html

Getting Started with JavaFX Scene Builder