JavaFX BarChart

Para crear una gráfica de barras con la API JavaFX utilizaremos las clase BarChart, los datos se pueden representar de manera horizontal o vertical, la longitud de las barras es proporcional al correspondiente valor del conjunto de datos, para representar cada uno de los ejes de la gráfica necesitaremos un objeto CategoryAxis y otro NumberAxis, el primero contiene datos de tipo texto y el segundo datos numéricos, nuestra clase debe contener uno de cada uno.

Podemos crear una gráfica de barras de la siguiente manera:

CategoryAxis xAxis = new CategoryAxis();
xAxis.setLabel("Ventas mensuales");

NumberAxis yAxis = new NumberAxis();
yAxis.setLabel("Productos vendidos");

BarChart chart = new BarChart(xAxis, yAxis);
chart.setTitle("Gráfica de ventas 2017");

Vamos a crear una gráfica que muestre los productos vendidos en el año 2017, en el eje X colocaremos los nombres de los meses, por esto usamos la clase CategoryAxis y en el eje Y colocaremos las cantidades vendidas, la clase es NumberAxis, usando el método setTitle("...") indicamos el título de la gráfica.

Ahora lo que prosigue es ingresar los datos, para crear una barra en la gráfica requerimos un objeto XYChart.Series en nuestro caso representa un producto y sus correspondientes ventas en los respectivos meses, un BarChart puede contener y mostrar un conjunto de estos objetos, permitiéndonos mostrar varios productos y sus ventas en diversos meses del año.

XYChart.Series<String, Number> autos = new XYChart.Series<>();
autos.setName("Autos");
autos.getData().addAll(
        new XYChart.Data<>("Enero", 358),
        new XYChart.Data<>("Marzo", 54),
        new XYChart.Data<>("Mayo", 50),
        new XYChart.Data<>("Julio", 158));

XYChart.Series<String, Number> computadores = new XYChart.Series<>();
computadores.setName("Computadoras");
computadores.getData().addAll(
        new XYChart.Data<>("Enero", 1017),
        new XYChart.Data<>("Marzo", 172),
        new XYChart.Data<>("Mayo", 59),
        new XYChart.Data<>("Julio", 285));

XYChart.Series<String, Number> comida = new XYChart.Series<>();
comida.setName("Comida");
comida.getData().addAll(
        new XYChart.Data<>("Enero", 107),
        new XYChart.Data<>("Marzo", 128),
        new XYChart.Data<>("Mayo", 590),
        new XYChart.Data<>("Julio", 225));

ObservableList<XYChart.Series<String, Number>> data = FXCollections.observableArrayList();
data.addAll(autos, comida, computadores);

Para indicarle al BarChart que debe utilizar estos datos para graficar usamos el método setData(data), con lo que hemos hecho hasta ahora tenemos los siguiente:

BarChart gráfica de barras en JavaFX

Mostrar gráfico de barras horizontal

Mostrar la gráfica en forma horizontal es sencillo, solo debemos cambiar los ejes, ahora la clase CategoryAxis representa las X y la clase NumberAxis el eje de las Y, también debemos cambiar los datos del XYSeries.Chart, solo debemos tener el cuanta que primero debemos ingresar el datos numéricos y luego los de tipo texto, al contrario de los anterior, pues hemos invertido los ejes.

El código Java para crear una gráfica de barras:

public class BarChartExample extends Application {

    @Override
    public void start(Stage primaryStage) {

        CategoryAxis yAxis = new CategoryAxis();
        yAxis.setLabel("Productos vendidos");

        NumberAxis xAxis = new NumberAxis();
        xAxis.setLabel("Ventas mensuales");

        BarChart chart = new BarChart(xAxis, yAxis);
        chart.setTitle("Gráfica de ventas 2017");
        chart.setData(getDataHSeries());

        StackPane root = new StackPane();
        root.getChildren().add(chart);

        Scene scene = new Scene(root, 640, 427);

        primaryStage.setTitle("JavaFX BarChart");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static ObservableList<XYChart.Series<Number, String>> getDataHSeries() {

        XYChart.Series<Number, String> autos = new XYChart.Series<>();
        autos.setName("Autos");
        autos.getData().addAll(
                new XYChart.Data<>(358, "Enero"),
                new XYChart.Data<>(54, "Marzo"),
                new XYChart.Data<>(50, "Mayo"),
                new XYChart.Data<>(158, "Julio"));

        XYChart.Series<Number, String> computadores = new XYChart.Series<>();
        computadores.setName("Computadoras");
        computadores.getData().addAll(
                new XYChart.Data<>(1017, "Enero"),
                new XYChart.Data<>(172, "Marzo"),
                new XYChart.Data<>(59, "Mayo"),
                new XYChart.Data<>(285, "Julio"));

        XYChart.Series<Number, String> comida = new XYChart.Series<>();
        comida.setName("Comida");
        comida.getData().addAll(
                new XYChart.Data<>(107, "Enero"),
                new XYChart.Data<>(128, "Marzo"),
                new XYChart.Data<>(590, "Mayo"),
                new XYChart.Data<>(225, "Julio"));

        ObservableList<XYChart.Series<Number, String>> data = FXCollections.observableArrayList();
        data.addAll(autos, comida, computadores);

        return data;
    }

    public static void main(String[] args) { launch(args); }

}

Gráfica de barras horizontal

Como en el tutorial PieChart también es posible modificar o personalizar la gráfica, cambiando la posición o estilo de sus componentes, algunas cosas que nos pueden interesar son:

Rotar las etiquetas que se muestran el los ejes, para esto usaremos el método setTickLabelRotation(ángulo):

CategoryAxis yAxis = new CategoryAxis();
yAxis.setLabel("Productos vendidos");
yAxis.setTickLabelRotation(-90);

NumberAxis xAxis = new NumberAxis();
xAxis.setLabel("Ventas mensuales");
xAxis.setTickLabelRotation(45);

Cambiar el estilo mediante CSS, usando la clase chart-bar.default-color# reemplazando # por el índice de la barra establecemos el color para la barra indicada, con bar-gap establecemos la distancia en los grupos de barras de cada mes, y con category-gap se cambia la distancia entre las barras de un grupo.

.bar-chart {
    -fx-bar-gap: 6;
    -fx-category-gap: 10;
}

.chart-bar.default-color0 {
    -fx-bar-fill: blue;
}

.chart-bar.default-color1 {
    -fx-bar-fill: green;
}

.chart-bar.default-color2 {
    -fx-bar-fill: red;
}

CSS BarChart JavaFX

Existen muchas más opciones de configuración y estilo que podemos aplicar, de momento quedamos aquí, hasta la próxima.

Comentarios

Temas relacionados

Entradas populares de este blog

tkinter Grid

tkinter Canvas

Histogramas OpenCV Python

Python Binance API