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