use of com.vaadin.addon.charts.model.PlotOptionsArea in project charts by vaadin.
the class TimeSeriesWithTimeline method getChart.
@Override
protected Component getChart() {
final Chart chart = new Chart();
chart.setHeight("450px");
chart.setWidth("100%");
chart.setTimeline(true);
Color[] colors = getThemeColors();
Configuration configuration = chart.getConfiguration();
configuration.getChart().setSpacingRight(20);
configuration.getTitle().setText("USD to EUR exchange rate from 2006 through 2008");
configuration.getxAxis().setType(AxisType.DATETIME);
configuration.getxAxis().setMinRange(TWO_WEEKS);
configuration.getxAxis().setTitle(new AxisTitle(""));
configuration.getLegend().setEnabled(false);
YAxis yAxis = configuration.getyAxis();
yAxis.setTitle(new AxisTitle("Exchange rate"));
yAxis.setMin(0.6);
yAxis.setStartOnTick(false);
yAxis.setShowFirstLabel(false);
configuration.getTooltip().setShared(true);
PlotOptionsArea plotOptions = new PlotOptionsArea();
GradientColor fillColor = GradientColor.createLinear(0, 0, 0, 1);
fillColor.addColorStop(0, (SolidColor) colors[0]);
fillColor.addColorStop(1, (SolidColor) colors[8]);
plotOptions.setFillColor(fillColor);
plotOptions.setLineWidth(1);
plotOptions.setShadow(false);
Marker marker = plotOptions.getMarker();
marker.setEnabled(false);
Hover hoverState = new Hover(true);
hoverState.setRadius(5);
States states = new States();
states.setHover(hoverState);
marker.setStates(states);
Hover hoverStateForArea = new Hover(true);
hoverStateForArea.setLineWidth(1);
States statesForArea = new States();
statesForArea.setHover(hoverStateForArea);
plotOptions.setStates(statesForArea);
plotOptions.setShadow(false);
configuration.setPlotOptions(plotOptions);
SimpleDateFormat df = new SimpleDateFormat("yyyy/MM/dd");
ListSeries ls = new ListSeries();
PlotOptionsArea options = new PlotOptionsArea();
options.setPointInterval(DAY_IN_MILLIS);
ls.setPlotOptions(options);
ls.setName("USD to EUR");
try {
options.setPointStart(df.parse("2006/01/02").getTime());
} catch (ParseException e) {
e.printStackTrace();
}
ls.setData(USD_TO_EUR_EXCHANGE_RATES);
configuration.setSeries(ls);
chart.drawChart(configuration);
return chart;
}
use of com.vaadin.addon.charts.model.PlotOptionsArea in project charts by vaadin.
the class TimeSeriesZoomable method getChart.
@Override
protected Component getChart() {
Chart chart = new Chart();
chart.setHeight("450px");
chart.setWidth("100%");
Color[] colors = getThemeColors();
Configuration configuration = chart.getConfiguration();
configuration.getChart().setZoomType(ZoomType.X);
configuration.getChart().setSpacingRight(20);
configuration.getTitle().setText("USD to EUR exchange rate from 2006 through 2008");
String title = Page.getCurrent().getWebBrowser().isTouchDevice() ? "Drag your finger over the plot to zoom in" : "Click and drag in the plot area to zoom in";
configuration.getSubTitle().setText(title);
configuration.getxAxis().setType(AxisType.DATETIME);
configuration.getxAxis().setMinRange(TWO_WEEKS);
configuration.getxAxis().setTitle(new AxisTitle(""));
configuration.getLegend().setEnabled(false);
YAxis yAxis = configuration.getyAxis();
yAxis.setTitle(new AxisTitle("Exchange rate"));
yAxis.setMin(0.6);
yAxis.setStartOnTick(false);
yAxis.setShowFirstLabel(false);
configuration.getTooltip().setShared(true);
PlotOptionsArea plotOptions = new PlotOptionsArea();
GradientColor fillColor = GradientColor.createLinear(0, 0, 0, 1);
fillColor.addColorStop(0, (SolidColor) colors[0]);
fillColor.addColorStop(1, (SolidColor) colors[8]);
plotOptions.setFillColor(fillColor);
plotOptions.setLineWidth(1);
plotOptions.setShadow(false);
Marker marker = new Marker();
marker.setEnabled(false);
Hover hoverState = new Hover(true);
hoverState.setRadius(5);
States states = new States();
states.setHover(hoverState);
marker.setStates(states);
Hover hoverStateForArea = new Hover(true);
hoverStateForArea.setLineWidth(1);
States statesForArea = new States();
statesForArea.setHover(hoverStateForArea);
plotOptions.setStates(statesForArea);
plotOptions.setMarker(marker);
plotOptions.setShadow(false);
configuration.setPlotOptions(plotOptions);
SimpleDateFormat df = new SimpleDateFormat("yyyy/MM/dd");
ListSeries ls = new ListSeries();
PlotOptionsArea options = new PlotOptionsArea();
options.setPointInterval(DAY_IN_MILLIS);
ls.setPlotOptions(options);
ls.setName("USD to EUR");
try {
options.setPointStart(df.parse("2006/01/02").getTime());
} catch (ParseException e) {
e.printStackTrace();
}
ls.setData(USD_TO_EUR_EXCHANGE_RATES);
configuration.setSeries(ls);
chart.drawChart(configuration);
return chart;
}
use of com.vaadin.addon.charts.model.PlotOptionsArea in project charts by vaadin.
the class SVGGeneratorExample method getChart.
@Override
protected Component getChart() {
final Chart chart;
chart = new Chart();
chart.setHeight("450px");
chart.setWidth("100%");
Configuration configuration = chart.getConfiguration();
configuration.getChart().setZoomType(ZoomType.X);
configuration.getChart().setSpacingRight(20);
configuration.getTitle().setText("USD to EUR exchange rate from 2006 through 2008");
String title = Page.getCurrent().getWebBrowser().isTouchDevice() ? "Drag your finger over the plot to zoom in" : "Click and drag in the plot area to zoom in";
configuration.getSubTitle().setText(title);
configuration.getxAxis().setType(AxisType.DATETIME);
configuration.getxAxis().setMinRange(TWO_WEEKS);
configuration.getxAxis().setTitle(new AxisTitle(""));
configuration.getLegend().setEnabled(false);
YAxis yAxis = configuration.getyAxis();
yAxis.setTitle(new AxisTitle("Exchange rate"));
yAxis.setMin(0.6);
yAxis.setStartOnTick(false);
yAxis.setShowFirstLabel(false);
configuration.getTooltip().setShared(true);
PlotOptionsArea plotOptions = new PlotOptionsArea();
GradientColor fillColor = GradientColor.createLinear(0, 0, 0, 1);
fillColor.addColorStop(0, SolidColor.AQUA);
fillColor.addColorStop(1, SolidColor.BLACK);
plotOptions.setFillColor(fillColor);
plotOptions.setLineWidth(1);
plotOptions.setShadow(false);
Marker marker = new Marker();
marker.setEnabled(false);
Hover hoverState = new Hover(true);
hoverState.setRadius(5);
States states = new States();
states.setHover(hoverState);
plotOptions.setStates(states);
plotOptions.setMarker(marker);
plotOptions.setShadow(false);
configuration.setPlotOptions(plotOptions);
SimpleDateFormat df = new SimpleDateFormat("yyyy/MM/dd");
ListSeries ls = new ListSeries();
PlotOptionsArea options = new PlotOptionsArea();
options.setPointInterval(DAY_IN_MILLIS);
ls.setPlotOptions(options);
ls.setName("USD to EUR");
try {
options.setPointStart(df.parse("2006/01/02").getTime());
} catch (ParseException e) {
e.printStackTrace();
}
ls.setData(USD_TO_EUR_EXCHANGE_RATES);
configuration.setSeries(ls);
chart.drawChart(configuration);
Button export = new Button("Export");
StreamResource.StreamSource svgStreamSource = createSVGStreamSource(chart);
FileDownloader fileDownloader = new FileDownloader(new StreamResource(svgStreamSource, "chart.svg"));
fileDownloader.extend(export);
Button timelineToggle = new Button("Timeline toggle");
timelineToggle.addClickListener(new Button.ClickListener() {
boolean timeline = false;
@Override
public void buttonClick(Button.ClickEvent event) {
timeline = !timeline;
chart.setTimeline(timeline);
}
});
HorizontalLayout controls = new HorizontalLayout(export, timelineToggle);
controls.setSpacing(true);
addComponent(controls);
setSpacing(true);
return chart;
}
use of com.vaadin.addon.charts.model.PlotOptionsArea in project charts by vaadin.
the class MasterDetailChart method getMasterChart.
private Chart getMasterChart() {
Chart masterChart = new Chart(ChartType.AREA);
masterChart.setHeight("80px");
masterChart.setWidth("100%");
masterChart.setId("master-chart");
Configuration configuration = masterChart.getConfiguration();
configuration.getChart().setZoomType(ZoomType.X);
configuration.getChart().setReflow(false);
configuration.getChart().setBorderWidth(0);
configuration.getChart().setBackgroundColor(null);
configuration.getChart().setMarginLeft(50);
configuration.getChart().setMarginRight(20);
configuration.getTitle().setText("");
configuration.getxAxis().setType(AxisType.DATETIME);
configuration.getxAxis().setShowLastLabel(true);
configuration.getxAxis().setMinRange(14 * DAY_IN_MILLIS);
configuration.getxAxis().setTitle(new AxisTitle(""));
PlotBand mask = new PlotBand();
mask.setColor(new SolidColor(0, 0, 0, 0.2));
mask.setFrom(Util.toHighchartsTS(DEMO_DATASET_START.atStartOfDay().toInstant(ZoneOffset.UTC)));
mask.setTo(Util.toHighchartsTS(DEMO_DATASET_END.atStartOfDay().toInstant(ZoneOffset.UTC)));
configuration.getxAxis().setPlotBands(mask);
YAxis yAxis = configuration.getyAxis();
yAxis.setGridLineWidth(0);
yAxis.setLabels(new Labels(false));
yAxis.setTitle(new AxisTitle(""));
yAxis.setMin(0.6);
yAxis.setShowFirstLabel(false);
configuration.getTooltip().setEnabled(false);
configuration.getLegend().setEnabled(false);
configuration.getCredits().setEnabled(false);
PlotOptionsArea plotOptions = new PlotOptionsArea();
plotOptions.setLineWidth(1);
plotOptions.setShadow(false);
Hover hover = new Hover();
hover.setLineWidth(1);
States states = new States();
states.setHover(hover);
plotOptions.setStates(states);
plotOptions.setEnableMouseTracking(false);
plotOptions.setAnimation(false);
configuration.setPlotOptions(plotOptions);
ListSeries ls = new ListSeries();
PlotOptionsArea masterPlotOptions = new PlotOptionsArea();
GradientColor fillColor = GradientColor.createLinear(0, 0, 0, 1);
fillColor.addColorStop(0, new SolidColor(69, 114, 167, 1));
fillColor.addColorStop(1, new SolidColor(69, 114, 167, 0.5));
masterPlotOptions.setFillColor(fillColor);
masterPlotOptions.setPointInterval(24 * 3600 * 1000);
masterPlotOptions.setMarker(new Marker(false));
masterPlotOptions.setPointStart(Util.toHighchartsTS(DEMO_DATASET_START.atStartOfDay().toInstant(ZoneOffset.UTC)));
ls.setPlotOptions(masterPlotOptions);
ls.setName("USD to EUR");
ls.setData(FULL_DEMO_DATA_SET);
configuration.addSeries(ls);
masterChart.drawChart(configuration);
return masterChart;
}
use of com.vaadin.addon.charts.model.PlotOptionsArea in project charts by vaadin.
the class AreaSpline method getChart.
@Override
protected Component getChart() {
Chart chart = new Chart(ChartType.AREASPLINE);
chart.setHeight("450px");
Configuration conf = chart.getConfiguration();
conf.setTitle(new Title("Average fruit consumption during one week"));
Legend legend = new Legend();
legend.setLayout(LayoutDirection.VERTICAL);
legend.setAlign(HorizontalAlign.LEFT);
legend.setFloating(true);
legend.setVerticalAlign(VerticalAlign.TOP);
legend.setX(150);
legend.setY(100);
conf.setLegend(legend);
XAxis xAxis = new XAxis();
xAxis.setCategories(new String[] { "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday" });
// add blue background for the weekend
PlotBand plotBand = new PlotBand(4.5, 6.5, LIGHT_BLUE);
plotBand.setZIndex(1);
xAxis.setPlotBands(plotBand);
conf.addxAxis(xAxis);
YAxis yAxis = new YAxis();
yAxis.setTitle(new AxisTitle("Fruit units"));
conf.addyAxis(yAxis);
Tooltip tooltip = new Tooltip();
// Customize tooltip formatting
tooltip.setHeaderFormat("");
tooltip.setPointFormat("{series.name}: {point.y} units");
// Same could be achieved by defining following JS formatter funtion:
// tooltip.setFormatter("function(){ return this.x +': '+ this.y +' units';}");
// ... or its shorthand form:
// tooltip.setFormatter("this.x +': '+ this.y +' units'");
conf.setTooltip(tooltip);
PlotOptionsArea plotOptions = new PlotOptionsArea();
plotOptions.setFillOpacity(0.5);
conf.setPlotOptions(plotOptions);
ListSeries o = new ListSeries("John", 3, 4, 3, 5, 4, 10);
// Add last value separately
o.addData(12);
conf.addSeries(o);
conf.addSeries(new ListSeries("Jane", 1, 3, 4, 3, 3, 5, 4));
chart.drawChart(conf);
return chart;
}
Aggregations