Wicketで使えるグラフ表示ライブラリ  WickedChart

#はじめに
Wicketで作っているWebアプリケーションでグラフを表示させたかった。
どうやら[WickedChart](http://wicked-charts.appspot.com/start/default?7)というライブラリを使えば簡単にできるみたい。

#WickedChart
[github//wicked-charts/Readmeより抜粋](https://github.com/thombergs/wicked-charts#what-is-wicked-charts)
>Wicked Charts is a Java wrapper of the Highcharts javascript library. Highcharts provides eye-pleasing charts using HTML5 SVG technology (see http://www.highcharts.com/demo). With Wicked Charts, you can configure a chart in Java and display it in any web application based on Apache Wicket or JSF. Or you can use the Highcharts Java wrapper to integrate it in web applications built with other java web frameworks.

HighchartsっていうJavascriptライブラリ用のラッパークラスで、
WicketやJSFで使えるし、他のJava Web フレームワークでも使える。

#ライセンス
[github//wicked-charts/Readmeより抜粋](https://github.com/thombergs/wicked-charts#what-is-wicked-charts)
>Please note that while Wicked Charts is licensed under Apache 2.0 License, Highcharts itself is only free for non-commercial use. See here: [http://shop.highsoft.com/highcharts.html]

Wicked Charts自身はApache2.0ライセンスで使用可能だけど、
実際にグラフを描画するライブラリ部分（HighCharts）は商用目的では使えないみたい。
[商用目的で使う場合の料金一覧](http://shop.highsoft.com/highcharts.html)
ライセンスひとつ分が US$590.00（2014/10/23時点）

#使い方
##必要なライブラリ
Mavenの設定ファイル pom.xmlにdependencyを追加。使用するWicketのバージョンに注意する。
###Wicket 6.x
```
<dependency>
  <groupId>com.googlecode.wicked-charts</groupId>
  <artifactId>wicked-charts-wicket6</artifactId>
  <version>1.5.0</version>
</dependency>
```
###Wicket 1.5.x
```
<dependency>
  <groupId>com.googlecode.wicked-charts</groupId>
  <artifactId>wicked-charts-wicket15</artifactId>
  <version>1.5.0</version>
</dependency>
```
[その他のバージョンはこちら](https://github.com/thombergs/wicked-charts#maven-coordinates)

##Javaクラスですること
2ステップ
1.描画したいグラフのタイプや、数値、ラベルなどのオプション設定
2.設定したグラフをページにAddする

##HTMLですること
好きなところに下のタグを追加する

```html:Test.html
<div wicket:id="chart"/>
```

#サンプルコード

```java:Test.java
//一部抜粋

Options options = new Options();

    options
        .setChartOptions(new ChartOptions()
            .setType(SeriesType.LINE));

    options
        .setTitle(new Title("My very own chart."));

    options
        .setxAxis(new Axis()
            .setCategories(Arrays
                .asList(new String[] { "Jan", "Feb", "Mar", "Apr", "May",
                    "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" })));

    options
        .setyAxis(new Axis()
            .setTitle(new Title("Temperature (C)")));

    options
        .setLegend(new Legend()
            .setLayout(LegendLayout.VERTICAL)
            .setAlign(HorizontalAlignment.RIGHT)
            .setVerticalAlign(VerticalAlignment.TOP)
            .setX(-10)
            .setY(100)
            .setBorderWidth(0));

    options
        .addSeries(new SimpleSeries()
            .setName("Tokyo")
            .setData(
                Arrays
                    .asList(new Number[] { 7.0, 6.9, 9.5, 14.5, 18.2, 21.5,
                        25.2, 26.5, 23.3, 18.3, 13.9, 9.6 })));

    options
        .addSeries(new SimpleSeries()
            .setName("New York")
            .setData(
                Arrays
                    .asList(new Number[] { -0.2, 0.8, 5.7, 11.3, 17.0, 22.0,
                        24.8, 24.1, 20.1, 14.1, 8.6, 2.5 })));

    //上記の設定をもとにグラフをページにAddする
    add(new Chart("chart", options));
```

```html:Test.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
	<div wicket:id="chart" style="height:500px; width:800px" />
</body>
</html>
```
#結果
![作成されたグラフ](https://qiita-image-store.s3.amazonaws.com/0/57201/c8f420dc-b288-7409-7462-29414917c97f.jpeg)
他にもいろいろなグラフを作成できる。
[作成可能なグラフ一覧](http://wicked-charts.appspot.com/start/default?7)
[設定可能な値](http://api.highcharts.com/highcharts)

#情報元
[Wicked Chart: Githubリポジトリ](https://github.com/thombergs/wicked-charts#maven-coordinates)
[Wicked Chart: Getting Started](https://github.com/thombergs/wicked-charts/wiki/Getting-Started#defining-a-chart)
[Wicked Chart: リファレンス](http://wicked-charts.googlecode.com/svn-history/r226/trunk/wicked-charts-parent/apidocs/index.html)
[HighchartsAPI：リファレンス](http://api.highcharts.com/highcharts)