Merhaba.

Bu yazımızda JavaFX ile gelen grafik çizdirme sınıflarından ikisini inceleyeceğiz. Bunlar çizgi grafiği ve pasta grafiği.

Grafikler elimizdeki verileri görselleştirmeleri açısından aslında önemli bir yer tutuyor. JavaFX ise içindeki grafik yani Chart sınıfları ile grafikleri çok kolay bir biçimde kullanabilmemizi sağlıyor. Yapmamız gereken sadece sınıftan nesne türetmek ve içine verileri yerleştirmek. Çizimler, animasyonlar ve geri kalan bütün işlemleri JavaFX hallediyor.

Aşağıdaki kodları bir JavaFX Main Class oluşturduktan sonra class içine yazarak çalıştırabilirsiniz.

private void init( Stage primaryStage )

    {

        HBox root = new HBox();

        //Kontrolleri yatay olarak yerleştireceğimiz taşıyıcı HBbox

        final javafx.scene.chart.LineChart my_line_chart = create_line_chart();

        //Çizgi grafiği oluşturup döndüren metodumuz

        final javafx.scene.chart.PieChart my_pie_chart = create_pie_chart();

        //Pasta grafiği oluşturup döndüren metodumuz

        my_pie_chart.dataProperty().addListener(new ChangeListener<ObservableList<PieChart.Data>>()

        {

            //dataProperty aslında pastadaki verilerin tutulduğu observableList 'tir ve bir change listener ile değişiklikleri yakalayabiliriz.

            @Override

            public void changed( ObservableValue<? extends ObservableList<Data>> ov, ObservableList<Data> t, ObservableList<Data> t1 )

            {

                //Bir eleman eklendiğinde veya çıkarıldığında bu kodlar çalışacaktır.

                System.out.println("Veri eklendi veya çıkarıldı");

            }

        });

        root.getChildren().add(my_line_chart);

        Button btn_veri_seti_ekle = ButtonBuilder.create().layoutY(10).text("Veri Seti Ekle").build();

        //Grafiklere veri ekleyecek button'umuz

        btn_veri_seti_ekle.setOnAction(new EventHandler<ActionEvent>()

        {

            //Butona tıklandığında...

            @Override

            public void handle( ActionEvent t )

            {

                my_line_chart.getData().add(veri_seti_olustur());

                //Veri seti oluşturma kodları aşağıda.

                //Veri setini chart sınıfındaki getData() ile döndürülen ObservableList 'e ekliyoruz. Gerisini grafik kendisi hallediyor.

                //Veriseti yerine sadece Data ekleseydik tek bir nokta eklemiş olurduk. 3 adet nokta eklediğimiz zaman bir çizgi oluşturmaz.

                int sayi = new Random().nextInt(20);

                my_pie_chart.getData().add(new PieChart.Data("Yeni " + sayi, sayi));

                //Paste grafiğine veri eklemek için getData().add() içine PieChart sınıfından Data türeterek yazıyoruz.

                //Zaten bu Data sınıfı bir string ve bir double alıyor yani isim ve sayı değeri oluyor.

                //Aşağıdaki metodlar da pasta grafiğinin saat yönünde eklenmesini ve verilerin isimlerinin görünüp görünmemesini belirler.

                //my_pie_chart.clockwiseProperty();

                //my_pie_chart.labelsVisibleProperty();

            }

        });

        root.getChildren().add(btn_veri_seti_ekle);

        root.getChildren().add(my_pie_chart);

        primaryStage.setScene(new Scene(root));

        primaryStage.setTitle("Charts");

        //Elemanları yatay yığına ekledik. Pencerenin başlık ve Scene özelliğini verdik.

    }

    private PieChart create_pie_chart()

    {

        //Pasta grafiği döndüren metodumuz...

        final PieChart pc = new PieChart(FXCollections.observableArrayList(

            new PieChart.Data("Sun", 20),

            new PieChart.Data("IBM", 12),

            new PieChart.Data("HP", 25),

            new PieChart.Data("Dell", 22),

            new PieChart.Data("Apple", 30)));

        //Kullanımı basit. Sadece PieChart sınıfından bir nesne oluşturduk ve içinde bir observableArraylist tanımladık.

        //Bu Arraylist 'in her elemanını PieChart sınıfındaki Data sınıfından türettik. Veriler için isim ve değer verdik.

        pc.setTitle("Pie Chart Example");

        //Pasta grafiğine başlık verdik ve işlem tamam.

        return pc;

    }

    private LineChart<Number, Number> create_line_chart()

    {

        //Çizgi grafiğini biraz farklı olarak <Number, Number> şeklinde tanımladık.

        //Bu şekide her iki eksende de Number türünde değer tutacağımızı belirledik.

        //Bu tanım "LineChart create_line_chart()" şeklinde de olabilirdi.

        NumberAxis xAxis = new NumberAxis();

        NumberAxis yAxis = new NumberAxis();

        //NumberAxis ile X ve Y eksenlerini tanımladık. StringAxis veya CategoryAxis de olabilirdi.

        LineChart<Number, Number> line_chart = new LineChart<>(xAxis, yAxis);

        //LineChart tanımlamasını <Number, Number> kullanarak yaptık ve iki eksenin de Number olacağınız belirledik.

        //Ayrıca tanımladığımız eksenleri grafiğin eksen özellikleri olarak verdik.

        //<Number, Number> kullanmadan da aşağıdaki gibi tanımlanabilirdi.

        //final LineChart line_chart = new LineChart(xAxis, yAxis);

        line_chart.setTitle("Çizgi grafiği");

        //Grafiğin başlığını verdik.

        xAxis.setLabel("X Axis");

        yAxis.setLabel("Y Axis");

        //Eksenlerin açıklamalarını yazdık.

        //Aşağıdaki metodlar da grafik için kullanılabilir.

        //line_chart.setLayoutX(10);

        //line_chart.isLegendVisible();

        //Alt kısımdaki lejantı gizler.

        //line_chart.setAnimated(false);

        //Ekleme ve silme animasyonlarını iptal eder.

        line_chart.getData().add(veri_seti_olustur());

        //Veriseti oluturup getData() ile döndürülen observableList 'e ekldik.

        return line_chart;

    }

    @Override public void start( Stage primaryStage ) throws Exception

    {

        init(primaryStage);

        primaryStage.show();

    }

    public static void main( String[] args )

    {

        launch(args);

    }

    private XYChart.Series veri_seti_olustur()

    {

        XYChart.Series<Number, Number> yeni_veri_seti = new XYChart.Series<>();

        //Bütün iki boyutlu grafiklerde yani X ve Y ekseni olan grafiklerde verileri ifade etmek için kullanabileceğimiz XYChart sınıfı

        //Bu sınıftan Series ile bir veri seti oluşturulur. Verilerimizin hem X hem Y değeri sayı olacağı için <Number, Number> kullandık.

        //<String, String> de olabilirdi.

        int sayi = new Random().nextInt(20);

        //Verisetine eklenecek rastgele sayı değeri

        yeni_veri_seti.setName("Veri Seti " + sayi);

        //Verisetine isim vererek grafikte diğerlerinden ayırt edilmesini sağlayabiliriz.

        yeni_veri_seti.getData().add(new XYChart.Data<Number, Number>(sayi, sayi));

        yeni_veri_seti.getData().add(new XYChart.Data<Number, Number>(sayi * 2.5, sayi * 2));

        yeni_veri_seti.getData().add(new XYChart.Data<Number, Number>(sayi * 3.5, sayi * 4));

        //Verisetine 3 adet veri ekledik. Bu durumda 3 adet koordinat anlamına geliyor.

        //new XYChart.Data<Number, Number>(sayi * 3.5, sayi * 4) satırı ile yukarıda tanımlamada kullandığımız gibi <Number, Number> olarak XYChart sınıfından Data örneği oluşturduk.

        //Çizgi oluşturması için veriseti olarak ekledik.

        return yeni_veri_seti;

    }

Bu kodların ekran çıktısı ise aşağıdaki gibi olacaktır.

Özetle görsel ögeleri sıkça kullanan grafik çizdiren programlarda çok işe yarayacak olan bu sınıfları kullanmak da bir o kadar kolay. Bir sonraki yazımızda görüşmek üzere.

Numan Karaaslan

Bilgisayar Mühendisi