Chart - cannot get BoxPlot demo sample to work

Hi,

I’ve tried to get the BoxPlot demo to work, but when I end up with an empty page. I’ve tried copying the sample code into a class:


public class VaadinBoxPlotUI extends UI {
    
    private boolean useCustomStyles;
    
    @Override
    protected void init(VaadinRequest request) {
        VerticalLayout layout = new VerticalLayout();
        layout.setSizeFull();
        
        Component chart = getVaadinBoxPlotChart();
        layout.addComponent(chart);
        setContent(layout);
    }
    
    Component getVaadinBoxPlotChart() {
        Chart chart = new Chart();
        DataSeries observations;
        
        chart.getConfiguration().setTitle("Box Plot Example");
        
        Legend legend = new Legend();
        legend.setEnabled(false);
        chart.getConfiguration().setLegend(legend);
        
        XAxis xaxis = chart.getConfiguration().getxAxis();
        xaxis.setTitle("Experiment No.");
        xaxis.setCategories("1", "2", "3", "4", "5");
        
        YAxis yAxis = chart.getConfiguration().getyAxis();
        
        yAxis.setTitle("Observations");
        PlotLine plotLine = new PlotLine();
        plotLine.setColor(new SolidColor("red"));
        plotLine.setValue(932);
        plotLine.setWidth(1);
        PlotBandLabel label = new PlotBandLabel("Theoretical mean: 932");
        label.setAlign(HorizontalAlign.CENTER);
        Style style = new Style();
        style.setColor(new SolidColor("gray"));
        label.setStyle(style);
        plotLine.setLabel(label);
        yAxis.setPlotLines(plotLine);
        
        observations = new DataSeries();
        observations.setName("Observations");
        
        // Add PlotBoxItems contain all fields relevant for plot box chart
        observations.add(new BoxPlotItem(760, 801, 848, 895, 965));
        
        // Example with no arg constructor
        BoxPlotItem plotBoxItem = new BoxPlotItem();
        plotBoxItem.setLow(733);
        plotBoxItem.setLowerQuartile(853);
        plotBoxItem.setMedian(939);
        plotBoxItem.setUpperQuartile(980);
        plotBoxItem.setHigh(1080);
        observations.add(plotBoxItem);
        
        observations.add(new BoxPlotItem(714, 762, 817, 870, 918));
        observations.add(new BoxPlotItem(724, 802, 806, 871, 950));
        observations.add(new BoxPlotItem(834, 836, 864, 882, 910));
        observations.setPlotOptions(getPlotBoxOptions());
        chart.getConfiguration().addSeries(observations);
        
        return chart;
    }
    
    private PlotOptionsBoxPlot getPlotBoxOptions() {
        PlotOptionsBoxPlot options = new PlotOptionsBoxPlot();
        
        if (useCustomStyles) {
            // optional styling
            options.setMedianColor(new SolidColor("cyan"));
            options.setMedianWidth(1);
            
            options.setStemColor(new SolidColor("green"));
            options.setStemDashStyle(DashStyle.SHORTDOT);
            options.setStemWidth(4);
            
            options.setWhiskerColor(new SolidColor("magenta"));
            options.setWhiskerLength(70);
            options.setWhiskerWidth(5);
        }
        
        return options;
    }
    
}

When I show the page, there is the turning wheel for a split-second, then a text message (‘loading the chart’ or something like that) and then the page goes blank.

I tried with the bar chart demo code and that worked. The code for that was:


public class VaadinBarChartUI extends UI {
    

    @Override
    protected void init(VaadinRequest request) {
        VerticalLayout layout = new VerticalLayout();
        layout.setSizeFull();
        
        Component chart = getBarChart();
        layout.addComponent(chart);
        setContent(layout);
    }
    
    protected Component getBarChart() {
        Chart chart = new Chart(ChartType.BAR);
        
        Configuration conf = chart.getConfiguration();
        
        conf.setTitle("Historic World Population by Region");
        conf.setSubTitle("Source: Wikipedia.org");
        
        XAxis x = new XAxis();
        x.setCategories("Africa", "America", "Asia", "Europe", "Oceania");
        x.setTitle((String) null);
        conf.addxAxis(x);
        
        YAxis y = new YAxis();
        y.setMin(0);
        Title title = new Title("Population (millions)");
        title.setVerticalAlign(VerticalAlign.HIGH);
        y.setTitle(title);
        conf.addyAxis(y);
        
        Tooltip tooltip = new Tooltip();
        tooltip.setFormatter("this.series.name +': '+ this.y +' millions'");
        conf.setTooltip(tooltip);
        
        PlotOptionsBar plot = new PlotOptionsBar();
        plot.setDataLabels(new Labels(true));
        conf.setPlotOptions(plot);
        
        Legend legend = new Legend();
        legend.setLayout(LayoutDirection.VERTICAL);
        legend.setHorizontalAlign(HorizontalAlign.RIGHT);
        legend.setVerticalAlign(VerticalAlign.TOP);
        legend.setX(-100);
        legend.setY(100);
        legend.setFloating(true);
        legend.setBorderWidth(1);
        legend.setBackgroundColor("#FFFFFF");
        legend.setShadow(true);
        conf.setLegend(legend);
        
        conf.disableCredits();
        
        List<Series> series = new ArrayList<Series>();
        series.add(new ListSeries("Year 1800", 107, 31, 635, 203, 2));
        series.add(new ListSeries("Year 1900", 133, 156, 947, 408, 6));
        series.add(new ListSeries("Year 2008", 973, 914, 4054, 732, 34));
        conf.setSeries(series);
        
        chart.drawChart(conf);
        
        return chart;
    }
    
}

I also found an alternative way to configure the box plot chart, but trying it out resulted in the same behaviour ending in a blank screen:


public class VaadinBoxPlotChartTypeUI extends UI {
    
    @Override
    protected void init(VaadinRequest request) {
        VerticalLayout layout = new VerticalLayout();
        layout.setSizeFull();
        
        Component chart = getVaadinBoxPlotWithChartType();
        layout.addComponent(chart);
        setContent(layout);
    }
    
    Component getVaadinBoxPlotWithChartType() {
        Chart chart = new Chart(ChartType.BOXPLOT);
        chart.setWidth("600px");
        chart.setHeight("400px");
        
        // Modify the default configuration a bit
        Configuration conf = chart.getConfiguration();
        conf.setTitle("Orienteering Split Times");
        conf.getLegend().setEnabled(false);
        
        // Set median line color and width
        PlotOptionsBoxPlot plotOptions = new PlotOptionsBoxPlot();
        plotOptions.setMedianColor(SolidColor.BLUE);
        plotOptions.setMedianWidth(3);
        // plotOptions.setWhiskerLength(whiskerLength)
        conf.setPlotOptions(plotOptions);
        
        // Orienteering control point times for runners
        double data[][]
 = orienteeringdata();
        
        DataSeries series = new DataSeries();
        for (double cpointtimes[] : data) {
            StatAnalysis analysis = new StatAnalysis(cpointtimes);
            series.add(new BoxPlotItem(analysis.low(),
                    analysis.firstQuartile(),
                    analysis.median(),
                    analysis.thirdQuartile(),
                    analysis.high()));
        }
        conf.setSeries(series);
        
        // Set the category labels on the axis correspondingly
        XAxis xaxis = new XAxis();
        xaxis.setCategories("S-1", "1-2", "2-3", "3-4", "4-5",
                "5-6", "6-7", "7-8");
        xaxis.setTitle("Check Point");
        xaxis.setTickInterval(1);
        conf.addxAxis(xaxis);
        
        // Set the Y axis title
        YAxis yaxis = new YAxis();
        yaxis.setTitle("Time (s)");
        conf.addyAxis(yaxis);
        return chart;
    }
    
    double[][]
 orienteeringdata() {
        double data[][]
 = {
                { 65, 63, 71, 86, 115, 117, 106, 122, 144, 320, 164, 230, 128, 170, 184, 463, 194, 215, 194 },
                { 117, 107, 115, 114, 135, 194, 191, 270, 253, 441, 462, 515, 293, 258, 340, 313, 348, 359, 520 },
                { 56, 58, 65, 237, 151, 98, 152, 108, 124, 140, 142, 157, 369, 217, 158, 146, 483, 449, 286 },
                { 198, 194, 333, 276, 318, 325, 309, 326, 376, 357, 409, 366, 465, 516, 530, 820, 584, 583, 885 },
                { 63, 65, 69, 69, 125, 112, 106, 100, 122, 160, 167, 152, 187, 255, 163, 159, 357, 371, 192 },
                { 80, 78, 77, 72, 87, 120, 140, 121, 133, 129, 129, 159, 192, 191, 185, 146, 216, 204, 217 },
                { 160, 175, 184, 158, 209, 242, 271, 284, 395, 287, 321, 283, 359, 450, 492, 360, 501, 535, 733 },
                { 80, 89, 109, 87, 81, 118, 107, 142, 149, 111, 156, 122, 105, 160, 238, 145, 114, 216, 240 } };
        return data;
    }
    
    class StatAnalysis {
        private double orderedData[];
        
        public StatAnalysis(double data[]) {
            orderedData = data.clone();
            Arrays.sort(orderedData);
        }
        
        public double low() {
            return orderedData[0]
;
        }
        
        public double high() {
            return orderedData[orderedData.length - 1]
;
        }
        
        public double median() {
            if ((orderedData.length % 2) == 1)
                return (orderedData[orderedData.length / 2]
 + orderedData[orderedData.length / 2 + 1]
) / 2;
            else
                return orderedData[orderedData.length / 2]
;
        }
        
        public double firstQuartile() {
            switch (orderedData.length % 4) {
            case 0:
                return (orderedData[orderedData.length / 4]
 + orderedData[orderedData.length / 4 + 1]
) / 2;
            case 1:
                return orderedData[orderedData.length / 4]
 * 0.25 + orderedData[orderedData.length / 4 + 1]
 * 0.75;
            case 2:
                return orderedData[orderedData.length / 4]
;
            case 3:
                return orderedData[orderedData.length / 4]
 * 0.75 + orderedData[orderedData.length / 4 + 1]
 * 0.25;
            }
            return 0.0;
        }
        
        public double thirdQuartile() {
            switch (orderedData.length % 4) {
            case 0:
                return (orderedData[orderedData.length / 4]
 + orderedData[orderedData.length / 4 - 1]
) / 2;
            case 1:
                return orderedData[orderedData.length / 4 * 3]
 * 0.25 + orderedData[orderedData.length / 4 * 3 - 1]
 * 0.75;
            case 2:
                return orderedData[orderedData.length / 4 * 3]
;
            case 3:
                return orderedData[orderedData.length / 4 * 3]
 * 0.75 + orderedData[orderedData.length / 4 * 3 - 1]
 * 0.25;
            }
            return 0.0;
        }
    }
    
}

We are using Vaadin version 7.1.0 and Charts version 1.1.2

/grydholt