Examples with Hover com.vaadin.addon.charts.model.Hover used on opensource projects

Example 1 with Hover

use of com.vaadin.addon.charts.model.Hover 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;
}

Example 2 with Hover

use of com.vaadin.addon.charts.model.Hover 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;
}

Example 3 with Hover

use of com.vaadin.addon.charts.model.Hover in project charts by vaadin.

the class SplineWithPlotBands method getChart.

@SuppressWarnings("deprecation")
@Override
protected Component getChart() {
    Chart chart = new Chart();
    chart.setHeight("450px");
    chart.setWidth("100%");
    Configuration configuration = chart.getConfiguration();
    configuration.getChart().setType(ChartType.SPLINE);
    configuration.getTitle().setText("Wind speed during two days");
    configuration.getSubTitle().setText("October 6th and 7th 2009 at two locations in Vik i Sogn, Norway");
    configuration.getxAxis().setType(AxisType.DATETIME);
    YAxis yAxis = configuration.getyAxis();
    yAxis.setTitle(new AxisTitle("Wind speed (m/s)"));
    yAxis.setMin(0);
    yAxis.setMinorGridLineWidth(0);
    yAxis.setGridLineWidth(0);
    // disable alternate grid color from Vaadin theme, disturbs
    // demonstrating plotbands
    yAxis.setAlternateGridColor(TRANSPARENT);
    createPlotBands(yAxis);
    configuration.getTooltip().setValueSuffix(" m/s");
    PlotOptionsSpline plotOptions = new PlotOptionsSpline();
    configuration.setPlotOptions(plotOptions);
    plotOptions.setMarker(new Marker(false));
    plotOptions.getMarker().setLineWidth(4);
    plotOptions.getMarker().setSymbol(MarkerSymbolEnum.CIRCLE);
    States states = new States();
    Hover hover = new Hover(true);
    hover.setRadius(5);
    hover.setLineWidth(1);
    states.setHover(hover);
    plotOptions.getMarker().setStates(states);
    plotOptions.setPointInterval(ONE_HOUR);
    LocalDate date = LocalDate.of(2009, 9, 6);
    plotOptions.setPointStart(date.atStartOfDay().toInstant(ZoneOffset.UTC));
    ListSeries ls = new ListSeries();
    ls.setName("Hestavollane");
    ls.setData(4.3, 5.1, 4.3, 5.2, 5.4, 4.7, 3.5, 4.1, 5.6, 7.4, 6.9, 7.1, 7.9, 7.9, 7.5, 6.7, 7.7, 7.7, 7.4, 7.0, 7.1, 5.8, 5.9, 7.4, 8.2, 8.5, 9.4, 8.1, 10.9, 10.4, 10.9, 12.4, 12.1, 9.5, 7.5, 7.1, 7.5, 8.1, 6.8, 3.4, 2.1, 1.9, 2.8, 2.9, 1.3, 4.4, 4.2, 3.0, 3.0);
    configuration.addSeries(ls);
    ls = new ListSeries();
    ls.setName("Voll");
    ls.setData(0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.1, 0.0, 0.3, 0.0, 0.0, 0.4, 0.0, 0.1, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.6, 1.2, 1.7, 0.7, 2.9, 4.1, 2.6, 3.7, 3.9, 1.7, 2.3, 3.0, 3.3, 4.8, 5.0, 4.8, 5.0, 3.2, 2.0, 0.9, 0.4, 0.3, 0.5, 0.4);
    configuration.addSeries(ls);
    chart.drawChart(configuration);
    return chart;
}

Example 4 with Hover

use of com.vaadin.addon.charts.model.Hover in project charts by vaadin.

the class BasicArea method getChart.

@Override
protected Component getChart() {
    Chart chart = new Chart(ChartType.AREA);
    Configuration conf = chart.getConfiguration();
    conf.setTitle(new Title("US and USSR nuclear stockpiles"));
    conf.setSubTitle(new Subtitle("Source: <a href=\"http://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf\">thebulletin.metapress.com</a>"));
    PlotOptionsArea plotOptions = new PlotOptionsArea();
    plotOptions.setPointStart(1940);
    Marker marker = new Marker();
    marker.setEnabled(false);
    marker.setSymbol(MarkerSymbolEnum.CIRCLE);
    marker.setRadius(2);
    States states = new States();
    states.setHover(new Hover(true));
    marker.setStates(states);
    plotOptions.setMarker(marker);
    conf.setPlotOptions(plotOptions);
    XAxis xAxis = new XAxis();
    Labels labels = new Labels();
    // Display x axis value (year) as non formatted integer
    labels.setFormatter("this.value");
    xAxis.setLabels(labels);
    conf.addxAxis(xAxis);
    YAxis yAxis = new YAxis();
    yAxis.setTitle(new AxisTitle("Nuclear weapon states"));
    labels = new Labels();
    // display y axis value in kilos as there is such a pile of weapons
    labels.setFormatter("this.value / 1000 +'k'");
    yAxis.setLabels(labels);
    conf.addyAxis(yAxis);
    Tooltip tooltip = new Tooltip();
    tooltip.setFormatter("this.series.name +' produced <b>'+ Highcharts.numberFormat(this.y, 0) +'</b><br/>warheads in '+ this.x");
    conf.setTooltip(tooltip);
    final Number[] usaNumbers = new Number[] { null, null, null, null, null, 6, 11, 32, 110, 235, 369, 640, 1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126, 27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662, 26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605, 24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586, 22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950, 10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104 };
    conf.addSeries(new ListSeries("USA", usaNumbers));
    final Number[] ussrNumbers = new Number[] { null, null, null, null, null, null, null, null, null, null, 5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322, 4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478, 15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049, 33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000, 35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000, 21000, 20000, 19000, 18000, 18000, 17000, 16000 };
    conf.addSeries(new ListSeries("USSR/Russia", ussrNumbers));
    chart.drawChart(conf);
    return chart;
}

Example 5 with Hover

use of com.vaadin.addon.charts.model.Hover in project charts by vaadin.

the class MasterDetailChart method getDetailChart.

private Chart getDetailChart() {
    Chart detailChart = new Chart();
    detailChart.setHeight("100%");
    detailChart.setWidth("100%");
    Configuration configuration = detailChart.getConfiguration();
    configuration.getCredits().setEnabled(false);
    configuration.setTitle("Historical USD to EUR Exchange Rate");
    configuration.setSubTitle("Select an area by dragging across the lower chart");
    configuration.getxAxis().setType(AxisType.DATETIME);
    configuration.getyAxis().setTitle(new AxisTitle((String) null));
    configuration.getyAxis().setMinRange(0.1);
    configuration.getTooltip().setFormatter("function() {var point = this.points[0];return '<b>'+ point.series.name +'</b><br/>'+Highcharts.dateFormat('%A %B %e %Y', this.x) + ':<br/>'+'1 USD = '+ Highcharts.numberFormat(point.y, 2) +' EUR';}");
    configuration.getTooltip().setShared(true);
    PlotOptionsLine series = new PlotOptionsLine();
    series.setPointInterval(DAY_IN_MILLIS);
    configuration.setPlotOptions(series);
    States states = new States();
    Hover hover = new Hover();
    hover.setRadius(3);
    states.setHover(hover);
    Marker marker = series.getMarker();
    marker.setEnabled(false);
    marker.setStates(states);
    marker.setRadius(2);
    series.setAnimation(false);
    ListSeries seriesList = new ListSeries();
    PlotOptionsLine plotOptionsLine = new PlotOptionsLine();
    plotOptionsLine.setPointInterval(DAY_IN_MILLIS);
    plotOptionsLine.setPointStart(Util.toHighchartsTS(DEMO_DATASET_START.atStartOfDay().toInstant(ZoneOffset.UTC)));
    seriesList.setPlotOptions(plotOptionsLine);
    seriesList.setName("USD to EUR");
    seriesList.setData(FULL_DEMO_DATA_SET);
    configuration.getLegend().setEnabled(false);
    configuration.setExporting(false);
    configuration.addSeries(seriesList);
    detailChart.drawChart(configuration);
    return detailChart;
}