Add boxplot chart type

[thombergs]

Reported by tom.hombergs, Sep 6, 2013
Add the new boxplot chart type.

Also have a look at Highcharts 3 in general to check if there are other options missing.

[thombergs]

#1 santoczno
Hello!

Please find attached my patch file for this issue. It should be applied for the following projects:
wicked-charts-showcase-wicket15
wicked-charts-showcase-options
wicked-charts-highcharts

A boxplot chart type is the last one on the list.

Regards
Czarek Zadorocki

### Eclipse Workspace Patch 1.0
#P wicked-charts-showcase-wicket15
Index: src/main/java/com/googlecode/wickedcharts/showcase/Homepage.html
===================================================================
--- src/main/java/com/googlecode/wickedcharts/showcase/Homepage.html    (revision 292)
+++ src/main/java/com/googlecode/wickedcharts/showcase/Homepage.html    (working copy)
@@ -155,6 +155,7 @@
               <li class="disabled"><a href="#" onclick="return false">Spiderweb</a></li>
               <li class="disabled"><a href="#" onclick="return false">Wind rose</a></li>
               <li><a href="#" wicket:id="bubble">Bubble chart</a></li>
+              <li><a href="#" wicket:id="boxplot">Boxplot chart</a></li>
             </ul>
           </div><!--/.well -->
         </div><!--/span-->
Index: src/main/java/com/googlecode/wickedcharts/showcase/Homepage.java
===================================================================
--- src/main/java/com/googlecode/wickedcharts/showcase/Homepage.java    (revision 292)
+++ src/main/java/com/googlecode/wickedcharts/showcase/Homepage.java    (working copy)
@@ -36,6 +36,7 @@
 import com.googlecode.wickedcharts.showcase.options.BasicColumnOptions;
 import com.googlecode.wickedcharts.showcase.options.BasicLineOptions;
 import com.googlecode.wickedcharts.showcase.options.BasicPieOptions;
+import com.googlecode.wickedcharts.showcase.options.BoxplotChartOptions;
 import com.googlecode.wickedcharts.showcase.options.BubbleChartOptions;
 import com.googlecode.wickedcharts.showcase.options.ColumnWithDrilldownOptions;
 import com.googlecode.wickedcharts.showcase.options.ColumnWithNegativeValuesOptions;
@@ -145,7 +146,7 @@
            new PieWithLegendOptions()));
        this.add(new UpdateChartLink("bubble", chart, codeContainer,
            new BubbleChartOptions()));
-
+       this.add(new UpdateChartLink("boxplot", chart, codeContainer, new BoxplotChartOptions()));
    }

    private Label addCodeContainer() {
#P wicked-charts-showcase-options
Index: src/main/java/com/googlecode/wickedcharts/showcase/options/BoxplotChartOptions.java
===================================================================
--- src/main/java/com/googlecode/wickedcharts/showcase/options/BoxplotChartOptions.java (revision 0)
+++ src/main/java/com/googlecode/wickedcharts/showcase/options/BoxplotChartOptions.java (revision 0)
@@ -0,0 +1,87 @@
+/**
+ *   Copyright 2012-2013 Wicked Charts (http://wicked-charts.googlecode.com)
+ *
+ *   Licensed under the Apache License, Version 2.0 (the "License");
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the License at
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ */
+package com.googlecode.wickedcharts.showcase.options;
+
+import java.util.ArrayList;
+import java.util.List;
+
+import com.googlecode.wickedcharts.highcharts.options.ButtonOptions;
+import com.googlecode.wickedcharts.highcharts.options.ChartOptions;
+import com.googlecode.wickedcharts.highcharts.options.CreditOptions;
+import com.googlecode.wickedcharts.highcharts.options.Legend;
+import com.googlecode.wickedcharts.highcharts.options.Navigation;
+import com.googlecode.wickedcharts.highcharts.options.PlotOptions;
+import com.googlecode.wickedcharts.highcharts.options.PlotOptionsChoice;
+import com.googlecode.wickedcharts.highcharts.options.SeriesType;
+import com.googlecode.wickedcharts.highcharts.options.Title;
+import com.googlecode.wickedcharts.highcharts.options.Tooltip;
+import com.googlecode.wickedcharts.highcharts.options.color.ColorReference;
+import com.googlecode.wickedcharts.highcharts.options.color.HexColor;
+import com.googlecode.wickedcharts.highcharts.options.series.Box;
+import com.googlecode.wickedcharts.highcharts.options.series.BoxSeries;
+import com.googlecode.wickedcharts.showcase.options.base.ShowcaseOptions;
+
+public class BoxplotChartOptions extends ShowcaseOptions {
+
+  private static final long serialVersionUID = 1L;
+
+  public BoxplotChartOptions() {
+
+    setCredits(new CreditOptions().setEnabled(false))
+         .setNavigation(new Navigation().setButtonOptions(new ButtonOptions().setEnabled(false)))
+         .setChartOptions(new ChartOptions(SeriesType.BOXPLOT))
+         .setTitle(new Title("Highcharts Boxplot"))
+         .setTooltip(new Tooltip()
+            .setShared(false)
+            .setUseHTML(true)
+            .setHeaderFormat("<em>Experiment No {point.key}</em><br/>")
+         )
+         .setLegend(new Legend().setEnabled(false));
+    
+    BoxSeries boxplotSeries = new BoxSeries();
+    List<ColorReference> colors = new ArrayList<ColorReference>();
+    double open = 1;
+    for(int i = 0; i < 10; i++) {
+      double random = (Math.random() * 10 - 5) * 100;
+      random = Math.round(random) / 100.0;
+      double low = open - 1;
+      double close = open + random;
+      double high = close + 1;
+      double median = (open + close) / 2;
+      Box bar = new Box(low, open, median, close, high);
+      boxplotSeries.addPoint(bar);
+      open = close;
+      colors.add(new HexColor(bar.isIncrease() ? "#00FF00" : "#FF0000"));
+    }
+    addSeries(boxplotSeries);
+
+    PlotOptions plotOptions = new PlotOptions();
+    plotOptions.setColorByPoint(true)
+               .setLineWidth(1)
+               .setMedianWidth(1)
+               .setWhiskerWidth(2)
+               .setWhiskerLength(20)
+               .setStemWidth(2)
+               .setColors(colors);
+    setPlotOptions(new PlotOptionsChoice().setBoxplot(plotOptions));
+    
+  }
+
+  @Override
+  public String getLabel() {
+    return "Boxplot chart";
+  }
+
+}
#P wicked-charts-highcharts
Index: src/main/java/com/googlecode/wickedcharts/highcharts/jackson/JsonRenderer.java
===================================================================
--- src/main/java/com/googlecode/wickedcharts/highcharts/jackson/JsonRenderer.java  (revision 292)
+++ src/main/java/com/googlecode/wickedcharts/highcharts/jackson/JsonRenderer.java  (working copy)
@@ -34,6 +34,7 @@
 import com.googlecode.wickedcharts.highcharts.options.color.NullColor;
 import com.googlecode.wickedcharts.highcharts.options.color.RgbaColor;
 import com.googlecode.wickedcharts.highcharts.options.color.SimpleColor;
+import com.googlecode.wickedcharts.highcharts.options.series.BoxSeries;
 import com.googlecode.wickedcharts.highcharts.options.series.Bubble;
 import com.googlecode.wickedcharts.highcharts.options.series.Coordinate;
 import com.googlecode.wickedcharts.highcharts.options.series.RangeCoordinate;
@@ -97,6 +98,7 @@
        this.jacksonModule.addSerializer(Crosshair.class, new CrosshairSerializer());
        this.jacksonModule.addSerializer(RangeCoordinate.class, new RangeCoordinateSerializer());
        this.jacksonModule.addSerializer(Bubble.class, new BubbleSerializer());
+       this.jacksonModule.addSerializer(BoxSeries.class, new BoxSeriesSerializer());

        ObjectMapper mapper = createDefaultObjectMapper();
        mapper.setLocale(Locale.ENGLISH);
Index: src/main/java/com/googlecode/wickedcharts/highcharts/jackson/BoxSeriesSerializer.java
===================================================================
--- src/main/java/com/googlecode/wickedcharts/highcharts/jackson/BoxSeriesSerializer.java   (revision 0)
+++ src/main/java/com/googlecode/wickedcharts/highcharts/jackson/BoxSeriesSerializer.java   (revision 0)
@@ -0,0 +1,38 @@
+package com.googlecode.wickedcharts.highcharts.jackson;
+
+import java.io.IOException;
+
+import com.fasterxml.jackson.core.JsonGenerator;
+import com.fasterxml.jackson.core.JsonProcessingException;
+import com.fasterxml.jackson.databind.JsonSerializer;
+import com.fasterxml.jackson.databind.SerializerProvider;
+import com.googlecode.wickedcharts.highcharts.options.series.Box;
+import com.googlecode.wickedcharts.highcharts.options.series.BoxSeries;
+
+public class BoxSeriesSerializer extends JsonSerializer<BoxSeries> {
+
+   @Override
+   public void serialize(final BoxSeries value, final JsonGenerator jgen, final SerializerProvider provider) throws IOException, JsonProcessingException {
+
+       StringBuffer result = new StringBuffer();
+       result.append("{");
+       if(value.getData() != null) {
+           result.append("data: [");
+           for(Box point : value.getData()) {
+               final Number timestamp = point.getTimestamp();
+               result.append("[" + (timestamp != null ? timestamp + ", " : "") +
+                                   point.getLow() + ", " +
+                                   point.getOpen() + ", " +
+                                   point.getMedian() + ", " +
+                                   point.getClose() + ", " +
+                                   point.getHigh() +
+                             "],");
+           }
+           result = new StringBuffer(result.substring(0, result.length() - 1));
+           result.append("]");
+       }
+       result.append("}");
+       jgen.writeRawValue(result.toString());
+   }
+
+}
\ No newline at end of file
Index: src/main/java/com/googlecode/wickedcharts/highcharts/options/SeriesType.java
===================================================================
--- src/main/java/com/googlecode/wickedcharts/highcharts/options/SeriesType.java    (revision 292)
+++ src/main/java/com/googlecode/wickedcharts/highcharts/options/SeriesType.java    (working copy)
@@ -49,7 +49,9 @@

    AREARANGE(ChartType.ADVANCED),

-   BUBBLE(ChartType.ADVANCED);
+   BUBBLE(ChartType.ADVANCED),
+
+   BOXPLOT(ChartType.ADVANCED);

    private ChartType chartType;

Index: src/main/java/com/googlecode/wickedcharts/highcharts/options/PlotOptionsChoice.java
===================================================================
--- src/main/java/com/googlecode/wickedcharts/highcharts/options/PlotOptionsChoice.java (revision 292)
+++ src/main/java/com/googlecode/wickedcharts/highcharts/options/PlotOptionsChoice.java (working copy)
@@ -52,6 +52,8 @@

    private PlotOptions columnrange;

+   private PlotOptions boxplot;
+
    public PlotOptionsChoice() {

    }
@@ -164,6 +166,15 @@
        return gauge;
    }

+   public PlotOptionsChoice setBoxplot(PlotOptions boxplot) {
+       this.boxplot = boxplot;
+       return this;
+   }
+
+   public PlotOptions getBoxplot() {
+       return boxplot;
+   }
+
    public PlotOptions getPlotOptions(SeriesType type) {
        switch (type) {
            case AREA:
@@ -186,6 +197,8 @@
                return this.columnrange;
            case GAUGE:
                return this.gauge;
+           case BOXPLOT:
+               return this.boxplot;
            default:
                throw new IllegalArgumentException("Invalid SeriesType: " + type);
        }
@@ -223,6 +236,9 @@
            case GAUGE:
                this.gauge = plotOptions;
                break;
+           case BOXPLOT:
+               this.boxplot = plotOptions;
+               break;
            default:
                throw new IllegalArgumentException("Invalid SeriesType: " + type);
        }
Index: src/main/java/com/googlecode/wickedcharts/highcharts/options/PlotOptions.java
===================================================================
--- src/main/java/com/googlecode/wickedcharts/highcharts/options/PlotOptions.java   (revision 292)
+++ src/main/java/com/googlecode/wickedcharts/highcharts/options/PlotOptions.java   (working copy)
@@ -16,6 +16,8 @@

 import java.awt.Color;
 import java.io.Serializable;
+import java.util.ArrayList;
+import java.util.List;

 import com.googlecode.wickedcharts.highcharts.options.color.ColorReference;
 import com.googlecode.wickedcharts.highcharts.options.color.SimpleColor;
@@ -106,6 +108,14 @@

    private Integer lineWidth;

+   private Integer medianWidth;
+
+   private Integer whiskerWidth;
+
+   private Integer whiskerLength;
+
+   private Integer stemWidth;
+
    private Marker marker;

    private Integer threshold;
@@ -124,6 +134,8 @@

    private PointPlacement pointPlacement;

+   private List<ColorReference> colors = new ArrayList<ColorReference>();
+
    public Boolean getAllowPointSelect() {
        return this.allowPointSelect;
    }
@@ -308,6 +320,26 @@
        return this.zIndex;
    }

+   public Integer getMedianWidth() {
+       return medianWidth;
+   }
+
+   public Integer getWhiskerWidth() {
+       return whiskerWidth;
+   }
+
+   public Integer getWhiskerLength() {
+       return whiskerLength;
+   }
+
+   public Integer getStemWidth() {
+       return stemWidth;
+   }
+
+   public List<ColorReference> getColors() {
+       return colors;
+   }
+   
    public PlotOptions setAllowPointSelect(final Boolean allowPointSelect) {
        this.allowPointSelect = allowPointSelect;
        return this;
@@ -558,4 +590,29 @@
        return this;
    }

+   public PlotOptions setMedianWidth(Integer medianWidth) {
+       this.medianWidth = medianWidth;
+       return this;
+   }
+
+   public PlotOptions setWhiskerWidth(Integer whiskerWidth) {
+       this.whiskerWidth = whiskerWidth;
+       return this;
+   }
+
+   public PlotOptions setWhiskerLength(Integer whiskerLength) {
+       this.whiskerLength = whiskerLength;
+       return this;
+   }
+
+   public PlotOptions setStemWidth(Integer stemWidth) {
+       this.stemWidth = stemWidth;
+       return this;
+   }
+
+   public PlotOptions setColors(List<ColorReference> colors) {
+       this.colors = colors;
+       return this;
+   }
+
 }
Index: src/main/java/com/googlecode/wickedcharts/highcharts/options/series/Box.java
===================================================================
--- src/main/java/com/googlecode/wickedcharts/highcharts/options/series/Box.java    (revision 0)
+++ src/main/java/com/googlecode/wickedcharts/highcharts/options/series/Box.java    (revision 0)
@@ -0,0 +1,84 @@
+package com.googlecode.wickedcharts.highcharts.options.series;
+
+import java.io.Serializable;
+
+public class Box implements Serializable {
+  private static final long serialVersionUID = 2721517577232309011L;
+
+  private Number open;
+   private Number high;
+   private Number low;
+   private Number close;
+   private Number median;
+   private Number timestamp;
+
+   public Box() {
+   }
+
+   public Box(Number low, Number open, Number median, Number close, Number high) {
+       this(low, open, median, close, high, null);
+   }
+
+   public Box(Number low, Number open, Number median, Number close, Number high, Number timestamp) {
+       super();
+       this.low = low;
+       this.open = open;
+       this.median = median;
+       this.close = close;
+       this.high = high;
+     this.timestamp = timestamp;
+  }
+
+   public Number getOpen() {
+       return open;
+   }
+
+   public void setOpen(Number open) {
+       this.open = open;
+   }
+
+   public Number getHigh() {
+       return high;
+   }
+
+   public void setHigh(Number high) {
+       this.high = high;
+   }
+
+   public Number getLow() {
+       return low;
+   }
+
+   public void setLow(Number low) {
+       this.low = low;
+   }
+
+   public Number getMedian() {
+       return median;
+   }
+
+   public void setMedian(Number median) {
+       this.median = median;
+   }
+
+   public Number getClose() {
+       return close;
+   }
+
+   public void setClose(Number close) {
+       this.close = close;
+   }
+
+   public boolean isIncrease() {
+       return close.doubleValue() > open.doubleValue();
+   }
+
+   public Number getTimestamp() {
+       return timestamp;
+   }
+
+   public void setTimestamp(Number timestamp) {
+       this.timestamp = timestamp;
+   }
+
+}
\ No newline at end of file
Index: src/main/java/com/googlecode/wickedcharts/highcharts/options/series/BoxSeries.java
===================================================================
--- src/main/java/com/googlecode/wickedcharts/highcharts/options/series/BoxSeries.java  (revision 0)
+++ src/main/java/com/googlecode/wickedcharts/highcharts/options/series/BoxSeries.java  (revision 0)
@@ -0,0 +1,12 @@
+package com.googlecode.wickedcharts.highcharts.options.series;
+
+
+public class BoxSeries extends Series<Box> {
+   private static final long serialVersionUID = 1L;
+
+   public BoxSeries addPoint(Box box) {
+       super.addPoint(box);
+       return this;
+   }
+
+}
\ No newline at end of file

[thombergs]

Thanks for the patch! I will have a look at it and include it in the next release!

[thombergs]

#3 liguo86
I have added this patch,but no Exporting button on the chart.

[thombergs]

patch included in trunk