쿠...sal: [컴][웹] GWT 사용하기

GWT graph / GWT 그래프 사용 / GWT 차트 사용 /

GWT 에서 chart 를 사용해 보자. 이글의 내용은 ref. 1 의 내용을 각색한 것이다.

Download library

먼저 jar 을 다운로드 해야 한다. 아래경로에서 download 하자.
https://code.google.com/p/gwt-google-apis/downloads/list
gwt-visualization-1.1.2.zip

gwt-visualization-1.1.2.zip 에서 gwt-visualization.jar 만 있으면 된다.

classpath 설정

이 .jar 을 java classpath 중 아무곳에나 넣자. 또는 아무곳에나 넣고, classpath 에 설정해 주자. 여기서는 아래 경로에 넣었다.
c:\Program Files\gwt\gwt-visualization.jar

<inherits>

Codes

그리고 아래 ref.1 에 있는 Java Code 를 EntryPoint 로 사용하자.

그러면 chart 를 볼 수 있다. source 에 대한 설명은 ref. 1 을 참고하자.

아래 소스는 ref. 1 의 소스에서 최신버전의 PieChart 로 바꿔서 사용했다.

package com.gwtChart.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.JsArray;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Panel;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.visualization.client.AbstractDataTable;
import com.google.gwt.visualization.client.AbstractDataTable.ColumnType;
import com.google.gwt.visualization.client.DataTable;
import com.google.gwt.visualization.client.Selection;
import com.google.gwt.visualization.client.VisualizationUtils;
import com.google.gwt.visualization.client.events.SelectHandler;
import com.google.gwt.visualization.client.visualizations.corechart.Options;
import com.google.gwt.visualization.client.visualizations.corechart.PieChart;

/**
 * Entry point classes define onModuleLoad()
 */
public class GwtChart implements EntryPoint {
    public void onModuleLoad() {
        // Create a callback to be called when the visualization API
        // has been loaded.
        Runnable onLoadCallback = new Runnable() {
            public void run() {
                Panel panel = RootPanel.get();

                // Create a pie chart visualization.
                PieChart pie = new PieChart(createTable(), createOptions());

                pie.addSelectHandler(createSelectHandler(pie));
                panel.add(pie);
            }
        };

        // Load the visualization api, passing the onLoadCallback to be called
        // when loading is done.
        VisualizationUtils.loadVisualizationApi(onLoadCallback, PieChart.PACKAGE);
    }

    private Options createOptions() {
        PieChart.PieOptions options = PieChart.createPieOptions();
        options.setWidth(400);
        options.setHeight(240);
        options.set3D(true);
        options.setTitle("My Daily Activities");
        return options;
    }

    private SelectHandler createSelectHandler(final PieChart chart) {
        return new SelectHandler() {
            @Override
            public void onSelect(SelectEvent event) {
                String message = "";

                // May be multiple selections.
                JsArray selections = chart.getSelections();

                for (int i = 0; i < selections.length(); i++) {
                    // add a new line for each selection
                    message += i == 0 ? "" : "\n";

                    Selection selection = selections.get(i);

                    if (selection.isCell()) {
                        // isCell() returns true if a cell has been selected.

                        // getRow() returns the row number of the selected cell.
                        int row = selection.getRow();
                        // getColumn() returns the column number of the selected cell.
                        int column = selection.getColumn();
                        message += "cell " + row + ":" + column + " selected";
                    } else if (selection.isRow()) {
                        // isRow() returns true if an entire row has been selected.

                        // getRow() returns the row number of the selected row.
                        int row = selection.getRow();
                        message += "row " + row + " selected";
                    } else {
                        // unreachable
                        message += "Pie chart selections should be either row selections or cell selections.";
                        message += "  Other visualizations support column selections as well.";
                    }
                }

                Window.alert(message);
            }
        };
    }

    private AbstractDataTable createTable() {
        DataTable data = DataTable.create();
        data.addColumn(ColumnType.STRING, "Task");
        data.addColumn(ColumnType.STRING, "Location");
        data.addColumn(ColumnType.NUMBER, "Hours per Day");
        data.addRows(3);
        // 1st row
        data.setValue(0, 0, "Work");
        data.setValue(0, 1, "Mountain View");
        data.setValue(0, 2, 10);
        // 2nd row
        data.setValue(1, 0, "Commute");
        data.setValue(1, 1, "Route 17");
        data.setValue(1, 2, 4);
        // 3rd row
        data.setValue(2, 0, "Sleep");
        data.setValue(2, 1, "Santa Cruz");
        data.setValue(2, 2, 10);
//        return data;
        // Data view -- read only, and no location column
        DataView result = DataView.create(data);
        result.setColumns(new int[]{0, 2});
        return result;
    }
}

차트 인자, chart argument

대부분의 차트들이 그렇지만, 차트를 그리는데에 아래의 2가지가 필요하다

data : 차트에 그려질 데이터가 필요하다.
차트 skin 에 대한 option : 차트의 모습에 대한 설정 값들이 필요하다. 예를 들면, 너비, 높이, 색 등이 이런 설정값(Option) 이다.

구글 차트도 마찬가지다. 그래서 위의 코드에서도 data(createTable()) 와 option(createOptions()) 를 인자로 넘겨주고 있다.

new PieChart(createTable(), createOptions())

DataTable, DataView

chart 의 data 는 DataTable 이나 DataView class 가 된다고 한다. DataTable 은 우리가 흔히 생각하는 table 을 생각하면 된다. 그리고 DataView 는 DataTable 에서 몇몇 data 만 골라서 새로운 table 을 만들 때 사용한다고 생각하면 된다. 쉽게 RDBMS 에 View 같은 느낌이라고 여기면 쉬울 듯 하다.

이 View 를 어쩔 때 사용하느냐면, 특정차트에서는 필요없는 data 가 있을 수 있다. 위의 소스의 경우에는 2번째 column 인 Location 부분이 불필요하다. 저부분이 있으면 그 값으로 PieChart 가 그려지지 않는다. 저런 경우에 다시 DataTable 을 만들기에는 수고스럽다. 그럴 때 DataView 를 이용하면 되는 것이다.

addXXXHandler

차트마다 다양한 handler 를 제공한다. 기본적으로 차트를 선택했을 때에 대한 처리를 할 수 있는 addSelectHandler 는 대부분의 차트에서 제공한다고 한다.

CoreChart

ref. 2 에 따르면 CoreChart 를 지원하는 새로운 버전에서는 아래와 같이 사용하던 것을

VisualizationUtils.loadVisualizationApi(onLoadCallback, PieChart.PACKAGE);

아래처럼 바꾸면 된다고 한다.

VisualizationUtils.loadVisualizationApi(new VisualizationRunnable(), CoreChart.PACKAGE);

쿠...sal

[컴][웹] GWT 사용하기 - Google Chart

Download library

classpath 설정

<inherits>

Codes

차트 인자, chart argument

DataTable, DataView

addXXXHandler

CoreChart

See Also

References

댓글 없음:

댓글 쓰기