JavaFXعرض البيانات باستخدام الكلاس BarChart

import java.util.Arrays;
import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.chart.BarChart;
import javafx.scene.chart.CategoryAxis;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart.Data;
import javafx.scene.chart.XYChart.Series;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class Main extends Application {

    @Override
    public void start(Stage stage) {

        // يمثل إسم كل عامود سيتم عرضه على الخط الأفقي في الرسم البياني NumberAxis هنا قمنا بإنشاء كائن من الكلاس
        // سيتم عرض معلوماته يجب أن يعتمد نفس هذه الأسماء serires إنتبه: أي
        CategoryAxis xAxis = new CategoryAxis(FXCollections.observableArrayList(
            Arrays.asList("Speed", "Safety", "Milage", "User Rating")));

        // يمثل مدى الأرقام التي سيتم عرضها على الخط العامودي في الرسم البياني NumberAxis هنا قمنا بإنشاء كائن من الكلاس          
        NumberAxis yAxis = new NumberAxis(0, 12, 2);

        // يمثل الرسم البياني الذي نريد إضافته في النافذة BarChart هنا قمنا بإنشاء كائن من الكلاس
        // yAxis و xAxis الأرقام و الأسماء التي ستظهر عليه عامودياً و أفقياً سيتم تحديدها بناءاً على قيم الكائنين
        BarChart barChart = new BarChart(xAxis, yAxis);
        
        // أي وضعنا عنوان للرسم البياني .barChart هنا وضعنا عنوان للكائن
        barChart.setTitle("Audi Characteristics");
        
        // واحد في النافذة و بالتالي لا داعي لجعلها ظاهرة series هنا جعلنا الحاوية التي تعلمنا من صاحب هذه الألوان تختفي لأننا سنعرف خصائص
        barChart.setLegendVisible(false);
        
        // barChart يمثل كل الخطوط التي سيتم رسمها على الكائن Series هنا قمنا بإنشاء كائن من الكلاس
        Series series = new Series();
        
        // series هنا قمنا بتعريف كل الخطوط التي سيتم رسمها للكائن
        // ملاحظة: بما أن كل هذه الخطوط تعود لنفس الكائن, سيتم إعطاءها نفس اللون
        series.getData().add(new Data("Speed", 8));
        series.getData().add(new Data("Safety", 5));
        series.getData().add(new Data("Milage", 7));
        series.getData().add(new Data("User Rating", 6));

        // الذي يمثل الرسم البياني barChart الذي يمثل كل الخطوط البرتقالية على الكائن series هنا قمنا بإضافة الكائن
        barChart.getData().add(series);

        // في النافذة Root Node لأننا ننوي جعله الـ StackPane هنا قمنا بإنشاء كائن من الكلاس
        StackPane root = new StackPane();
        
        // حتى يتم إبعاد الرسم البياني قليلاً عن أطراف النافذة root هنا قمنا بإضافة هامش بمقدار 10 بيكسل على كل جوانب الكائن
        root.setPadding(new Insets(10));

        // root في الكائن barChart هنا قمنا بإضافة الكائن
        root.getChildren().addAll(barChart);

        // فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
        Scene scene = new Scene(root, 400, 340);

        // هنا وضعنا عنوان للنافذة
        stage.setTitle("JavaFX BarChart");

        // أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
        stage.setScene(scene);

        // هنا قمنا بإظهار النافذة
        stage.show();

    }

    // هنا قمنا بتشغيل التطبيق
    public static void main(String[] args) {
        launch(args);
    }

}

import java.util.Arrays;
import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.chart.BarChart;
import javafx.scene.chart.CategoryAxis;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart.Data;
import javafx.scene.chart.XYChart.Series;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class Main extends Application {

    @Override
    public void start(Stage stage) {

        // يمثل إسم كل عامود سيتم عرضه على الخط الأفقي في الرسم البياني NumberAxis هنا قمنا بإنشاء كائن من الكلاس
        // سيتم عرض معلوماته يجب أن يعتمد نفس هذه الأسماء serires إنتبه: أي
        CategoryAxis xAxis = new CategoryAxis(FXCollections.observableArrayList(
            Arrays.asList("Speed", "Safety", "Milage", "User Rating")));

        // يمثل مدى الأرقام التي سيتم عرضها على الخط العامودي في الرسم البياني NumberAxis هنا قمنا بإنشاء كائن من الكلاس          
        NumberAxis yAxis = new NumberAxis(0, 12, 2);

        // يمثل الرسم البياني الذي نريد إضافته في النافذة BarChart هنا قمنا بإنشاء كائن من الكلاس
        // yAxis و xAxis الأرقام و الأسماء التي ستظهر عليه عامودياً و أفقياً سيتم تحديدها بناءاً على قيم الكائنين
        BarChart barChart = new BarChart(xAxis, yAxis);
        
        // أي وضعنا عنوان للرسم البياني .barChart هنا وضعنا عنوان للكائن
        barChart.setTitle("Cars Comparison Result");
        
        // هنا قمنا بإضافة مسافة فارغة بمقدار 60 بيكسل بين كل مجموعة أعمدة سيتم عرضها في الجدول حتى لا يظهروا بشكل عريض و متلاصق
        barChart.setCategoryGap(60);
        
        // barChart يمثل كل خصائص السيارة الأولى التي سيتم رسمها على الكائن Series هنا قمنا بإنشاء كائن من الكلاس
        // و إفتراضياً سيتم تلوين خصائص هذه السيارة باللون الأحمر ,"Audi" ملاحظة: السيارة الأولى قمنا بتسميتها
        Series audiSeries = new Series();
        audiSeries.setName("Audi");
        audiSeries.getData().add(new Data("Speed", 8));
        audiSeries.getData().add(new Data("Safety", 5));
        audiSeries.getData().add(new Data("Milage", 7));
        audiSeries.getData().add(new Data("User Rating", 6));
        
        // barChart يمثل كل خصائص السيارة الثاني التي سيتم رسمها على الكائن Series هنا قمنا بإنشاء كائن من الكلاس
        // و إفتراضياً سيتم تلوين خصائص هذه السيارة باللون البرتقالي ,"Fiat" ملاحظة: السيارة الثانية قمنا بتسميتها
        Series fiatSeries = new Series();
        fiatSeries.setName("Fiat");
        fiatSeries.getData().add(new Data("Speed", 6));
        fiatSeries.getData().add(new Data("Safety", 8));
        fiatSeries.getData().add(new Data("Milage", 8));
        fiatSeries.getData().add(new Data("User Rating", 5));
        
        // barChart يمثل كل خصائص السيارة الثالثة التي سيتم رسمها على الكائن Series هنا قمنا بإنشاء كائن من الكلاس
        // و إفتراضياً سيتم تلوين خصائص هذه السيارة باللون الأخضر ,"Mercedes" ملاحظة: السيارة الثالثة قمنا بتسميتها
        Series mercedesSeries = new Series();
        mercedesSeries.setName("Mercedes");
        mercedesSeries.getData().add(new Data("Speed", 9));
        mercedesSeries.getData().add(new Data("Safety", 8));
        mercedesSeries.getData().add(new Data("Milage", 6));
        mercedesSeries.getData().add(new Data("User Rating", 8));

        // الذي يمثل الرسم البياني barChart حتى يظهروا على الكائن mercedesSeries و fiatSeries ,audiSeries هنا قمنا بإضافة الكائنات
        barChart.getData().addAll(audiSeries, fiatSeries, mercedesSeries);

        // في النافذة Root Node لأننا ننوي جعله الـ StackPane هنا قمنا بإنشاء كائن من الكلاس
        StackPane root = new StackPane();
        
        // حتى يتم إبعاد الرسم البياني قليلاً عن أطراف النافذة root هنا قمنا بإضافة هامش بمقدار 10 بيكسل على كل جوانب الكائن
        root.setPadding(new Insets(10));

        // root في الكائن barChart هنا قمنا بإضافة الكائن
        root.getChildren().addAll(barChart);

        // فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
        Scene scene = new Scene(root, 600, 340);

        // هنا وضعنا عنوان للنافذة
        stage.setTitle("JavaFX BarChart");

        // أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
        stage.setScene(scene);

        // هنا قمنا بإظهار النافذة
        stage.show();

    }

    // هنا قمنا بتشغيل التطبيق
    public static void main(String[] args) {
        launch(args);
    }

}

import java.util.Arrays;
import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.geometry.Insets;
import javafx.geometry.Side;
import javafx.scene.Scene;
import javafx.scene.chart.BarChart;
import javafx.scene.chart.CategoryAxis;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart.Data;
import javafx.scene.chart.XYChart.Series;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class Main extends Application {

    @Override
    public void start(Stage stage) {

        // يمثل إسم كل عامود سيتم عرضه على الخط الأفقي في الرسم البياني NumberAxis هنا قمنا بإنشاء كائن من الكلاس
        // سيتم عرض معلوماته يجب أن يعتمد نفس هذه الأسماء serires إنتبه: أي
        CategoryAxis xAxis = new CategoryAxis(FXCollections.observableArrayList(
            Arrays.asList("Speed", "Safety", "Milage", "User Rating")));

        // يمثل مدى الأرقام التي سيتم عرضها على الخط العامودي في الرسم البياني NumberAxis هنا قمنا بإنشاء كائن من الكلاس          
        NumberAxis yAxis = new NumberAxis(0, 12, 2);

        // يمثل الرسم البياني الذي نريد إضافته في النافذة BarChart هنا قمنا بإنشاء كائن من الكلاس
        // yAxis و xAxis الأرقام و الأسماء التي ستظهر عليه عامودياً و أفقياً سيتم تحديدها بناءاً على قيم الكائنين
        BarChart barChart = new BarChart(xAxis, yAxis);
        
        // أي وضعنا عنوان للرسم البياني .barChart هنا وضعنا عنوان للكائن
        barChart.setTitle("Cars Comparison Result");
        
        // هنا قمنا بإضافة مسافة فارغة بمقدار 40 بيكسل بين كل مجموعة أعمدة سيتم عرضها في الجدول حتى لا يظهروا بشكل عريض و متلاصق
        barChart.setCategoryGap(40);
        
        // هنا جعلنا حاوية دليل الألوان تظهر يمين الرسم البياني
        barChart.setLegendSide(Side.RIGHT);
        
        // barChart يمثل كل خصائص السيارة الأولى التي سيتم رسمها على الكائن Series هنا قمنا بإنشاء كائن من الكلاس
        // و إفتراضياً سيتم تلوين خصائص هذه السيارة باللون الأحمر ,"Audi" ملاحظة: السيارة الأولى قمنا بتسميتها
        Series audiSeries = new Series();
        audiSeries.setName("Audi");
        audiSeries.getData().add(new Data("Speed", 8));
        audiSeries.getData().add(new Data("Safety", 5));
        audiSeries.getData().add(new Data("Milage", 7));
        audiSeries.getData().add(new Data("User Rating", 6));
        
        // barChart يمثل كل خصائص السيارة الثاني التي سيتم رسمها على الكائن Series هنا قمنا بإنشاء كائن من الكلاس
        // و إفتراضياً سيتم تلوين خصائص هذه السيارة باللون البرتقالي ,"Fiat" ملاحظة: السيارة الثانية قمنا بتسميتها
        Series fiatSeries = new Series();
        fiatSeries.setName("Fiat");
        fiatSeries.getData().add(new Data("Speed", 6));
        fiatSeries.getData().add(new Data("Safety", 8));
        fiatSeries.getData().add(new Data("Milage", 8));
        fiatSeries.getData().add(new Data("User Rating", 5));
        
        // barChart يمثل كل خصائص السيارة الثالثة التي سيتم رسمها على الكائن Series هنا قمنا بإنشاء كائن من الكلاس
        // و إفتراضياً سيتم تلوين خصائص هذه السيارة باللون الأخضر ,"Mercedes" ملاحظة: السيارة الثالثة قمنا بتسميتها
        Series mercedesSeries = new Series();
        mercedesSeries.setName("Mercedes");
        mercedesSeries.getData().add(new Data("Speed", 9));
        mercedesSeries.getData().add(new Data("Safety", 8));
        mercedesSeries.getData().add(new Data("Milage", 6));
        mercedesSeries.getData().add(new Data("User Rating", 8));

        // الذي يمثل الرسم البياني barChart حتى يظهروا على الكائن mercedesSeries و fiatSeries ,audiSeries هنا قمنا بإضافة الكائنات
        barChart.getData().addAll(audiSeries, fiatSeries, mercedesSeries);

        // في النافذة Root Node لأننا ننوي جعله الـ StackPane هنا قمنا بإنشاء كائن من الكلاس
        StackPane root = new StackPane();
        
        // حتى يتم إبعاد الرسم البياني قليلاً عن أطراف النافذة root هنا قمنا بإضافة هامش بمقدار 10 بيكسل على كل جوانب الكائن
        root.setPadding(new Insets(10));

        // root في الكائن barChart هنا قمنا بإضافة الكائن
        root.getChildren().addAll(barChart);

        // فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
        Scene scene = new Scene(root, 600, 340);

        // هنا وضعنا عنوان للنافذة
        stage.setTitle("JavaFX BarChart");

        // أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
        stage.setScene(scene);

        // هنا قمنا بإظهار النافذة
        stage.show();

    }

    // هنا قمنا بتشغيل التطبيق
    public static void main(String[] args) {
        launch(args);
    }

}