JSF Highcharts Entegrasyonu

JSF Ömer Faruk KURT Aralık 18, 2016


Merhaba,

Oluşturmuş olduğumuz verileri görselleştirmek için kullanılan Javascript ile yapılmış olan grafik kütüphanesidir. Kullanılan grafikleri buradan görebilirsiniz. Şimdi bu kütüphaneyi JSF projemize nasıl entegre edeceğimizi göreceğiz. Maven projeleri için org.webjars ın oluşturmuş olduğunu bağımlılığı kullanabiliriz. Webjars resmi sitesinden hangi kütüphaneleri kullabileceğimizi görebiliriz. Tabiki Highcharts kütüphanesi jquery üzerine inşa edildiğinden dolayı projemize highchart kütüphanesi ile beraber jquery kütüphanesini de eklememiz gerekmektedir.


pom.xml
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>highcharts</artifactId>
            <version>5.0.4</version>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>jquery</artifactId>
            <version>3.1.1</version>
        </dependency>

Projemize eklemiş olduğumuz highchart kütüphanesini sayfamıza tanımlamak için aşağıdaki şekilde script olarak sayfamıza eklememiz gerekmektedir.

xhtml
        <h:outputScript library="webjars/jquery/3.1.1" name="jquery.js"/>
        <h:outputScript library="webjars/highcharts/5.0.4" name="highcharts.js"/>

Lines için sayfanın son hali aşağıdaki gibi oluyor.
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
    <h:head>
        <title>Facelet Title</title>
        <h:outputScript library="webjars/jquery/3.1.1" name="jquery.js"/>
        <h:outputScript library="webjars/highcharts/5.0.4" name="highcharts.js"/>
        <script type="text/javascript">
            $(function () {
                Highcharts.chart('container', { //container = div id si
                    title: {
                        text: 'Monthly Average Temperature',
                        x: -20 //center
                    },
                    subtitle: {
                        text: 'Source: WorldClimate.com',
                        x: -20
                    },
                    xAxis: {
                        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                    },
                    yAxis: {
                        title: {
                            text: 'Temperature (°C)'
                        },
                        plotLines: [{
                                value: 0,
                                width: 1,
                                color: '#808080'
                            }]
                    },
                    tooltip: {
                        valueSuffix: '°C'
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'middle',
                        borderWidth: 0
                    },
                    series: [{
                            name: 'Tokyo',
                            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
                        }, {
                            name: 'New York',
                            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
                        }, {
                            name: 'Berlin',
                            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
                        }, {
                            name: 'London',
                            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
                        }]
                });
            });
        </script>
    </h:head>
    <h:body>
        <div id="container"></div>
    </h:body>
</html>

Sorunsuz javalı günler
Tags

Yorum Gönder

0 Yorumlar