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

Example 1 with SeriesTooltip

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

the class ErrorBarExample method getChart.

@Override
protected Component getChart() {
    Chart chart = new Chart();
    Configuration conf = chart.getConfiguration();
    Color[] colors = getThemeColors();
    // Enable xy zooming, test also with touch devices
    conf.getChart().setZoomType(ZoomType.XY);
    conf.setTitle("Temperature vs Rainfall");
    conf.getxAxis().setCategories("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
    YAxis primaryAxis = conf.getyAxis();
    AxisTitle title = new AxisTitle("Temperature");
    Style style = new Style();
    style.setColor(colors[0]);
    title.setStyle(style);
    primaryAxis.setTitle(title);
    Labels labels = new Labels();
    labels.setFormatter("this.value + '°C'");
    primaryAxis.setLabels(labels);
    YAxis secondaryAxis = new YAxis();
    conf.addyAxis(secondaryAxis);
    title = new AxisTitle("Rainfall");
    secondaryAxis.setTitle(title);
    style = new Style();
    style.setColor(colors[1]);
    title.setStyle(style);
    labels = new Labels();
    labels.setFormatter("this.value + ' mm'");
    labels.setStyle(style);
    secondaryAxis.setLabels(labels);
    secondaryAxis.setOpposite(true);
    conf.getTooltip().setShared(true);
    DataSeries rainfall = new DataSeries("Rainfall");
    PlotOptionsColumn column = new PlotOptionsColumn();
    column.setColor(colors[1]);
    SeriesTooltip tooltip = new SeriesTooltip();
    tooltip.setPointFormat("<span style='font-weight: bold; color: {series.color}'>{series.name}</span>: <b>{point.y:.1f} mm</b> ");
    column.setTooltip(tooltip);
    rainfall.setPlotOptions(column);
    conf.addSeries(rainfall);
    rainfall.setyAxis(secondaryAxis);
    DataSeries rainfallError = new DataSeries("Rainfall");
    conf.addSeries(rainfallError);
    rainfallError.setyAxis(secondaryAxis);
    PlotOptionsErrorbar rainErrorOptions = new PlotOptionsErrorbar();
    tooltip = new SeriesTooltip();
    tooltip.setPointFormat("(error range: {point.low}-{point.high} mm)<br/>");
    rainErrorOptions.setTooltip(tooltip);
    rainfallError.setPlotOptions(rainErrorOptions);
    DataSeries temperature = new DataSeries("Temperature");
    conf.addSeries(temperature);
    PlotOptionsSpline tempOptions = new PlotOptionsSpline();
    tempOptions.setColor(colors[0]);
    tooltip = new SeriesTooltip();
    tooltip.setPointFormat("<span style='font-weight: bold; color: {series.color}'>{series.name}</span>: <b>{point.y:.1f}°C");
    tempOptions.setTooltip(tooltip);
    temperature.setPlotOptions(tempOptions);
    DataSeries temperatureErrors = new DataSeries("Temperature error");
    conf.addSeries(temperatureErrors);
    PlotOptionsErrorbar tempErrorOptions = new PlotOptionsErrorbar();
    SolidColor green = new SolidColor("green");
    tempErrorOptions.setStemColor(green);
    tempErrorOptions.setWhiskerColor(green);
    tooltip = new SeriesTooltip();
    tooltip.setPointFormat("(error range: {point.low}-{point.high}°C)<br/>");
    tempErrorOptions.setTooltip(tooltip);
    temperatureErrors.setPlotOptions(tempErrorOptions);
    // Populate series
    for (Data d : DATA) {
        DataSeriesItem item = new DataSeriesItem();
        item.setY(d.rainfall);
        rainfall.add(item);
        item = new DataSeriesItem();
        item.setLow(d.rainfallErrorLow);
        item.setHigh(d.rainfallErrorHigh);
        rainfallError.add(item);
        item = new DataSeriesItem();
        item.setY(d.temperature);
        temperature.add(item);
        item = new DataSeriesItem();
        item.setLow(d.temperatureErrorLow);
        item.setHigh(d.temperatureErrorHigh);
        temperatureErrors.add(item);
    }
    return chart;
}

Example 2 with SeriesTooltip

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

the class AngularGauge method getChart.

@Override
protected Component getChart() {
    final Chart chart = new Chart();
    chart.setWidth("500px");
    final Configuration configuration = chart.getConfiguration();
    configuration.getChart().setType(ChartType.GAUGE);
    configuration.getChart().setPlotBackgroundColor(null);
    configuration.getChart().setPlotBackgroundImage(null);
    configuration.getChart().setPlotBorderWidth(0);
    configuration.getChart().setPlotShadow(false);
    configuration.setTitle("Speedometer");
    GradientColor gradient1 = GradientColor.createLinear(0, 0, 0, 1);
    gradient1.addColorStop(0, new SolidColor("#FFF"));
    gradient1.addColorStop(1, new SolidColor("#333"));
    GradientColor gradient2 = GradientColor.createLinear(0, 0, 0, 1);
    gradient2.addColorStop(0, new SolidColor("#333"));
    gradient2.addColorStop(1, new SolidColor("#FFF"));
    Background[] background = new Background[3];
    background[0] = new Background();
    background[0].setBackgroundColor(gradient1);
    background[0].setBorderWidth(0);
    background[0].setOuterRadius("109%");
    background[1] = new Background();
    background[1].setBackgroundColor(gradient2);
    background[1].setBorderWidth(1);
    background[1].setOuterRadius("107%");
    background[2] = new Background();
    background[2].setBackgroundColor(new SolidColor("#DDD"));
    background[2].setBorderWidth(0);
    background[2].setInnerRadius("103%");
    background[2].setOuterRadius("105%");
    configuration.getPane().setStartAngle(-150);
    configuration.getPane().setEndAngle(150);
    configuration.getPane().setBackground(background);
    YAxis yAxis = configuration.getyAxis();
    yAxis.setTitle(new AxisTitle("km/h"));
    yAxis.setMin(0);
    yAxis.setMax(200);
    yAxis.setMinorTickInterval("auto");
    yAxis.setMinorTickWidth(1);
    yAxis.setMinorTickLength(10);
    yAxis.setMinorTickPosition(TickPosition.INSIDE);
    yAxis.setMinorTickColor(new SolidColor("#666"));
    yAxis.setGridLineWidth(0);
    yAxis.setTickPixelInterval(30);
    yAxis.setTickWidth(2);
    yAxis.setTickPosition(TickPosition.INSIDE);
    yAxis.setTickLength(10);
    yAxis.setTickColor(new SolidColor("#666"));
    Labels labels = new Labels();
    labels.setStep(2);
    labels.setRotationPerpendicular();
    yAxis.setLabels(labels);
    PlotBand[] plotBands = new PlotBand[3];
    plotBands[0] = new PlotBand(0, 120, new SolidColor("#55BF3B"));
    plotBands[1] = new PlotBand(120, 160, new SolidColor("#DDDF0D"));
    plotBands[2] = new PlotBand(160, 200, new SolidColor("#DF5353"));
    yAxis.setPlotBands(plotBands);
    final ListSeries series = new ListSeries("Speed", 80);
    PlotOptionsGauge plotOptions = new PlotOptionsGauge();
    plotOptions.setTooltip(new SeriesTooltip());
    plotOptions.getTooltip().setValueSuffix(" km/h");
    series.setPlotOptions(plotOptions);
    configuration.setSeries(series);
    runWhileAttached(chart, new Runnable() {

        Random r = new Random(0);

        @Override
        public void run() {
            Integer oldValue = series.getData()[0].intValue();
            Integer newValue = (int) (oldValue + (r.nextDouble() - 0.5) * 20.0);
            series.updatePoint(0, newValue);
        }
    }, 3000, 12000);
    chart.drawChart(configuration);
    return chart;
}

Example 3 with SeriesTooltip

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

the class SolidGauge method getChart.

@Override
protected Component getChart() {
    final Chart chart = new Chart();
    chart.setWidth(500, Unit.PIXELS);
    final Configuration configuration = chart.getConfiguration();
    configuration.getChart().setType(ChartType.SOLIDGAUGE);
    configuration.getTitle().setText("Speed");
    Pane pane = new Pane();
    pane.setCenter("50%", "85%");
    pane.setSize("140%");
    pane.setStartAngle(-90);
    pane.setEndAngle(90);
    configuration.addPane(pane);
    configuration.getTooltip().setEnabled(false);
    Background bkg = new Background();
    bkg.setBackgroundColor(new SolidColor("#eeeeee"));
    bkg.setInnerRadius("60%");
    bkg.setOuterRadius("100%");
    bkg.setShape("arc");
    bkg.setBorderWidth(0);
    pane.setBackground(bkg);
    YAxis yaxis = configuration.getyAxis();
    yaxis.setLineWidth(0);
    yaxis.setTickInterval(200);
    yaxis.setTickWidth(0);
    yaxis.setMin(0);
    yaxis.setMax(200);
    yaxis.setTitle("");
    yaxis.getTitle().setY(-70);
    yaxis.setLabels(new Labels());
    yaxis.getLabels().setY(16);
    Stop stop1 = new Stop(0.1f, SolidColor.GREEN);
    Stop stop2 = new Stop(0.5f, SolidColor.YELLOW);
    Stop stop3 = new Stop(0.9f, SolidColor.RED);
    yaxis.setStops(stop1, stop2, stop3);
    PlotOptionsSolidgauge plotOptions = new PlotOptionsSolidgauge();
    plotOptions.setTooltip(new SeriesTooltip());
    plotOptions.getTooltip().setValueSuffix(" km/h");
    DataLabels labels = new DataLabels();
    labels.setY(5);
    labels.setBorderWidth(0);
    labels.setUseHTML(true);
    labels.setFormat("<div style=\"text-align:center\"><span style=\"font-size:25px;\">{y}</span><br/>" + "                       <span style=\"font-size:12pxg\">km/h</span></div>");
    plotOptions.setDataLabels(labels);
    configuration.setPlotOptions(plotOptions);
    final ListSeries series = new ListSeries("Speed", 80);
    configuration.setSeries(series);
    runWhileAttached(chart, new Runnable() {

        Random r = new Random(0);

        @Override
        public void run() {
            Integer oldValue = series.getData()[0].intValue();
            Integer newValue = (int) (oldValue + (r.nextDouble() - 0.5) * 20.0);
            if (newValue > 200) {
                newValue = 200;
            } else if (newValue < 0) {
                newValue = 0;
            }
            series.updatePoint(0, newValue);
        }
    }, 3000, 12000);
    chart.drawChart(configuration);
    return chart;
}

Example 4 with SeriesTooltip

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

the class TooltipJSONSerializationTest method toJSON_SeriesTooltipWithPointFormatter_serializedAsFunction.

@Test
public void toJSON_SeriesTooltipWithPointFormatter_serializedAsFunction() {
    SeriesTooltip tooltip = new SeriesTooltip();
    tooltip.setPointFormatter("this.y units");
    String json = toJSON(tooltip);
    String expected = "{\"_fn_pointFormatter\":\"this.y units\"}";
    assertEquals(expected, json);
}

Example 5 with SeriesTooltip

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

the class GaugeWithDualAxes method getChart.

@Override
protected Component getChart() {
    final Chart chart = new Chart();
    chart.setWidth("500px");
    final Configuration configuration = chart.getConfiguration();
    configuration.getChart().setType(ChartType.GAUGE);
    configuration.getChart().setAlignTicks(false);
    configuration.getChart().setPlotBackgroundColor(null);
    configuration.getChart().setPlotBackgroundImage(null);
    configuration.getChart().setPlotBorderWidth(0);
    configuration.getChart().setPlotShadow(false);
    configuration.setTitle("Speedometer with dual axes");
    configuration.getPane().setStartAngle(-150);
    configuration.getPane().setEndAngle(150);
    YAxis yAxis = new YAxis();
    yAxis.setMin(0);
    yAxis.setMax(200);
    yAxis.setLineColor(new SolidColor("#339"));
    yAxis.setTickColor(new SolidColor("#339"));
    yAxis.setMinorTickColor(new SolidColor("#339"));
    yAxis.setOffset(-25);
    yAxis.setLineWidth(2);
    Labels labels = new Labels();
    labels.setDistance(-20);
    labels.setRotationPerpendicular();
    labels.setRotation("auto");
    yAxis.setLabels(labels);
    yAxis.setTickLength(5);
    yAxis.setMinorTickLength(5);
    yAxis.setEndOnTick(false);
    YAxis yAxis2 = new YAxis();
    yAxis2.setMin(0);
    yAxis2.setMax(124);
    yAxis2.setLineColor(new SolidColor("#933"));
    yAxis2.setTickColor(new SolidColor("#933"));
    yAxis2.setMinorTickColor(new SolidColor("#933"));
    yAxis2.setOffset(-20);
    yAxis2.setLineWidth(2);
    labels = new Labels();
    labels.setDistance(12);
    labels.setRotationPerpendicular();
    yAxis2.setLabels(labels);
    yAxis2.setTickLength(5);
    yAxis2.setMinorTickLength(5);
    yAxis2.setEndOnTick(false);
    yAxis2.setTickPosition(TickPosition.OUTSIDE);
    yAxis2.setMinorTickPosition(TickPosition.OUTSIDE);
    configuration.addyAxis(yAxis);
    configuration.addyAxis(yAxis2);
    final ListSeries series = new ListSeries("Speed", 80);
    PlotOptionsGauge plotOptionsGauge = new PlotOptionsGauge();
    plotOptionsGauge.setDataLabels(new DataLabels());
    plotOptionsGauge.getDataLabels().setFormatter("function() {return '<span style=\"color:#339\">'+ this.y + ' km/h</span><br/>' + '<span style=\"color:#933\">' + Math.round(this.y * 0.621) + ' mph</span>';}");
    GradientColor gradient = GradientColor.createLinear(0, 0, 0, 1);
    gradient.addColorStop(0, new SolidColor("#DDD"));
    gradient.addColorStop(1, new SolidColor("#FFF"));
    plotOptionsGauge.getDataLabels().setBackgroundColor(gradient);
    plotOptionsGauge.setTooltip(new SeriesTooltip());
    plotOptionsGauge.getTooltip().setValueSuffix(" km/h");
    series.setPlotOptions(plotOptionsGauge);
    configuration.setSeries(series);
    runWhileAttached(chart, new Runnable() {

        Random r = new Random(0);

        @Override
        public void run() {
            Integer oldValue = series.getData()[0].intValue();
            Integer newValue = (int) (oldValue + (r.nextDouble() - 0.5) * 20.0);
            series.updatePoint(0, newValue);
        }
    }, 5000, 12000);
    chart.drawChart(configuration);
    return chart;
}