Graficos estadisticos con javafx y swing

Creado por jc mouse Lunes, Julio 4, 2016

En este post aprenderemos a usar los gráficos 2d que viene con JavaFX en nuestras aplicaciones java swing. Esto puede sernos de utilidad cuando necesitemos mostrar un gráfico sencillo sin tener que estar agregando otras librerías a nuestro proyecto.

Necesitamos:

  • IDE Netbeans para el desarrollo de la interfaz, pero si prefieres usar Eclipse no hay problema
  • Java 8

Nivel: Intermedio Avanzado

Paso 1: El proyecto

Creamos un nuevo proyecto Java Application que llamaremos “PieChartFX“, a continuación creamos los paquetes necesarios y agregamos un JFrame con el nombre de “PieChartJFrame

chart fx

Paso 2: Interfaz

Ayudándonos de las herramientas de diseño de Netbeans, crearemos la siguiente interfaz:

javafx

A los spinner debes colocar un tipo de modelo numérico.

Paso 3: Código

Abre el JFrame en modo código

  • Lo primero que haremos es añadir los imports necesarios:
import java.awt.BorderLayout;
import java.util.Set;
import javafx.application.Platform;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.embed.swing.JFXPanel;
import javafx.geometry.Side;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.chart.PieChart;
import javafx.scene.chart.PieChart.Data;
import javafx.scene.control.Label;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
  • A continuación declaramos las variables que usaremos en la clase:
    /**
    * Contenedor para el grafico
    */
    private final JFXPanel jfxPanel = new JFXPanel();    
    /**
     * Para almacenar los datos del grafico
     */
    private ObservableList<Data> data2d = FXCollections.observableArrayList();
    /**
     * Grafico 2d FX
     */
    private PieChart pieChart = new PieChart();   
  • De la misma forma declaramos los métodos para integrar FX con swing y también métodos para poder interactuar entre ellos
    /**
     * Crea escena fx
     */
    private void createScene(){
        Platform.runLater(() -> {            
            pieChart.setTitle("Java vs JavaFX");//titulo del grafico
            pieChart.setLegendSide(Side.LEFT);//Posicion de leyenda            
            pieChart.setData(getChartData());            
            updateColors();            
            jfxPanel.setScene(new Scene(pieChart));
        });
    }
        
    /**
     * devuelve los valores para el grafico 2d
     */
    private ObservableList<Data> getChartData() {        
        data2d.addAll(new PieChart.Data("java", 55),
                      new PieChart.Data("JavaFx", 87));          
        return data2d;
    }
    
    /**
     * Actualiza colores de la torta y su leyenda
     */
    private void updateColors(){    
        //colores para cada seccion de la torta
        Color[] colors = { Color.web("#04B404"), Color.web("#FF8000") };
        
        int i = 0;
        //cambia colores de cada seccion de la torta
        for (PieChart.Data data : data2d) {
            String hex = String.format( "#%02X%02X%02X",
                        (int)( colors[i].getRed() * 255 ),
                        (int)( colors[i].getGreen() * 255 ),
                        (int)( colors[i].getBlue() * 255 ) );
              data.getNode().setStyle( "-fx-pie-color: "+hex+";");
              i++;
        }
        //cambia colores de la leyenda
        Set<Node> items;items = pieChart.lookupAll("Label.chart-legend-item");
        i = 0;            
        for (Node item : items) {
            Label label = (Label) item;
            final Rectangle rectangle = new Rectangle(20, 20, colors[i]);                
            label.setGraphic(rectangle);
            i++;
        }
    }

    
    /**
     * Actualiza valores del gráfico
     * @param java valores para java
     * @param javafx valores para javafx
     */
    private void setChartData(int java, int javafx){
        Platform.runLater(() -> {
            data2d.clear();
            data2d.addAll(new PieChart.Data("java", java),
                         new PieChart.Data("JavaFx", javafx));
            updateColors();
        });
        
    }
  • En el constructor de clase realizamos la siguiente modificación
    public PieChartJFrame() {
        initComponents();
        setTitle("Java Swing Graficos Estadisticos con FX");        
        setLocationRelativeTo(null);
        
        //crea la escena en javafx
        createScene();
        //añade grafico FX a Swing
        jPanel1.setLayout(new BorderLayout());
        jPanel1.add(jfxPanel,BorderLayout.CENTER);
    }
  • Finalmente declaramos la acción para cuando pulsemos el botón, se actualicen los datos del gráfico:
    private void btnUpdateActionPerformed(java.awt.event.ActionEvent evt) {                                          
        setChartData( Integer.valueOf(jSpinner1.getValue().toString()),Integer.valueOf(jSpinner2.getValue().toString()));
    }     

ejecutamos el proyecto (F6)

piechart java

Link de descarga pobre <<AQUI>>

Enjoy!!!

Si te ha gustado podrías compartirlo o dejar un comentario. ¡Muchas gracias!

Sobre el autor y el sitio web

Yo soy yo :) JC Mouse, Soy orgullosamente boliviano soy fundador y CEO de la web jc-Mouse.net uno de las pocas web en emprendimiento y tecnología en Bolivia.

Toda la información que encuentres en este sitio es y sera completamente gratis siempre, puedes copiar, descargar y re-publicar si así lo deseas en otros blogs o sitios web, solo te pido a cambio que dejes una referencia a esta web. Esto nos ayuda a crecer y seguir aportando. Bye

Enjoy! :)

ENTRADAS QUE TE PUEDEN INTERESAR

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *


*

Comparte lo que sabes

Categorias

Android Bolivia

Bandera en Alto

Ultimas entradas

Así es, el Salar de Uyuni ubicado en el suroeste de Bolivia con una extensión de 10582 Km2 y a una altitud 3663 mts sobr...

Un Fragment representa un comportamiento o una parte de la interfaz de usuario en una Activity. Puedes combinar múltiple...

La clase Canvas (Lienzo)  de Android es una superficie que nos permite pintar figuras, texto e imágenes utilizando para...

Google acaba de lanzar AutoDraw, una aplicación que usa la Inteligencia Artificial para adivinar lo que intentas dibujar...

Web amigas