JSF Highcharts From Bean

JSF Ömer Faruk KURT Aralık 18, 2016

Merhaba,

Burada Highcharts'ı nasıl integrasyon yaptığımızı anlatmıştım. Şimdi de Bean tarafından gönderilern verileri grafiğe nasıl çevireceğimizi anlatmaya çalışacağım.

pom.xml
    <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>highcharts</artifactId>
            <version>5.0.4</version>
        </dependency>
        <dependency>
            <groupId>com.google.code.gson</groupId>
            <artifactId>gson</artifactId>
            <version>2.8.0</version>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>jquery</artifactId>
            <version>3.1.1</version>
        </dependency>



Bean sayfamız aşağıdaki gibi olacak.
package com.kurtomerfaruk.jsfhighcharts;

import com.google.gson.Gson;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;

/**
 *
 * @author Omer Faruk KURT kurtomerfaruk@gmail.com Created on date 18.12.2016
 * 20:31:13
 */
@ManagedBean
@ViewScoped
public class ChartController {

    private String month;
    private String data;
    private List<Data> dataList;

    @PostConstruct
    public void init() {
        List<String> months = Arrays.asList("'Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'");
        List<Double> value = new ArrayList<>();

        dataList = new ArrayList<>();

        value = Arrays.asList(7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6);
        dataList.add(new Data("Tokyo", value));
        value = Arrays.asList(-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5);
        dataList.add(new Data("New York", value));
        value = Arrays.asList(-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5);
        dataList.add(new Data("Berlin", value));
        value = Arrays.asList(3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8);
        dataList.add(new Data("London", value));
        value = Arrays.asList(2.1, 1.1, 5.0, 9.0, 16.0, 34.0, 39.0, 42.0, 35.0, 27.2, 9.0, 6.0);
        dataList.add(new Data("Gaziantep", value));

        month = months.toString();
        data = new Gson().toJson(dataList);
    }

    public String getData() {
        return data;
    }

    public void setData(String data) {
        this.data = data;
    }

    public String getMonth() {
        return month;
    }

    public void setMonth(String month) {
        this.month = month;
    }

    public List<Data> getDataList() {
        return dataList;
    }

    public void setDataList(List<Data> dataList) {
        this.dataList = dataList;
    }

}

Öncelikle ayları tanımladık ve daha sonra Şehir ve aylara göre sıcaklık listesini de List'ten Gson'a çevirip düzenlememizi yaptık.

package com.kurtomerfaruk.jsfhighcharts;

import java.util.List;

/**
 *
 * @author Omer Faruk KURT kurtomerfaruk@gmail.com Created on date 18.12.2016
 * 20:30:07
 */
public class Data {

    private String name;
    private List<Double> data;

    public Data(String name, List<Double> data) {
        this.name = name;
        this.data = data;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public List<Double> getData() {
        return data;
    }

    public void setData(List<Double> data) {
        this.data = data;
    }

}



ve xhtml sayfamızda bean tarafında üretmiş olduğumuz verileri JSON veri olarak çekip ekrana yansıtıyoruz.
<?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: #{chartController.month}
                    },
                    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: #{chartController.data}
                });
            });
        </script>
    </h:head>
    <h:body>
        <div id="container"></div>
    </h:body>
</html>
Sorunsuz javalı günler
Tags

Yorum Gönder

0 Yorumlar