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 :) Mouse o como algunos de ustedes me llaman 'El Cochinote', 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

Maria DB  es un sistema de gestión de bases de datos derivado de MySQL con licencia GPL, pero con un rendimiento similar...

En este oportunidad comparto una pequeña aplicación hecha en java para recortar partes de una imagen seleccionado con el...

En este post crearemos un componente que solo hay en android y que no esta disponible en la paleta de controles de Netbe...

Radio.Garden es un proyecto interactivo desarrollado por el Instituto Holandés para el Sonido y la Visión en cooperación...

Web amigas