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

Example 6 with Style

use of com.vaadin.addon.charts.model.style.Style in project charts by vaadin.

the class CustomClock method getChart.

@Override
protected Chart getChart() {
    final Chart chart = new Chart();
    chart.setWidth("500px");
    chart.setHeight("200px");
    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("The Vaadin Charts customised clock");
    configuration.getCredits().setEnabled(false);
    GradientColor gradient1 = GradientColor.createRadial(0.5, -0.4, 1.9);
    gradient1.addColorStop(0.5, new SolidColor(255, 255, 255, 0.2));
    gradient1.addColorStop(0.5, new SolidColor(200, 200, 200, 0.2));
    Background[] background = new Background[2];
    background[0] = new Background();
    background[1] = new Background();
    background[1].setBackgroundColor(gradient1);
    background[1].setBorderWidth(1);
    background[1].setOuterRadius("107%");
    configuration.getPane().setBackground(background);
    YAxis yAxis = configuration.getyAxis();
    yAxis.getLabels().setDistance(-20);
    yAxis.setMin(0);
    yAxis.setMax(12);
    yAxis.setLineWidth(0);
    yAxis.setShowFirstLabel(false);
    yAxis.setMinorTickInterval("auto");
    yAxis.setMinorTickWidth(1);
    yAxis.setMinorTickLength(5);
    yAxis.setMinorTickPosition(TickPosition.INSIDE);
    yAxis.setMinorGridLineWidth(0);
    yAxis.setMinorTickColor(new SolidColor("#666"));
    yAxis.setTickInterval(1);
    yAxis.setTickWidth(2);
    yAxis.setTickPosition(TickPosition.INSIDE);
    yAxis.setTickLength(10);
    yAxis.setTickColor(new SolidColor("#666"));
    yAxis.setTitle(new AxisTitle("Powered by<br/>Vaadin Charts 2"));
    yAxis.getTitle().setStyle(new Style());
    yAxis.getTitle().getStyle().setColor(new SolidColor("#BBB"));
    yAxis.getTitle().getStyle().setFontWeight(FontWeight.BOLD);
    yAxis.getTitle().getStyle().setFontSize("8px");
    yAxis.getTitle().getStyle().setLineHeight("10px");
    yAxis.getTitle().setY(10);
    final DataSeries series = new DataSeries();
    final DataSeriesItem second = new DataSeriesItem();
    second.setId("second");
    second.setY(30);
    second.setDial(new Dial());
    second.getDial().setRadius("100%");
    second.getDial().setBaseWidth(1);
    second.getDial().setRearLength("20%");
    second.getDial().setBackgroundColor(SolidColor.AQUA);
    second.getDial().setBorderColor(SolidColor.RED);
    second.getDial().setBorderWidth(10);
    second.getDial().setTopWidth(8);
    series.add(second);
    PlotOptionsGauge plotOptionsGauge = new PlotOptionsGauge();
    plotOptionsGauge.setDataLabels(new DataLabels(false));
    configuration.setPlotOptions(plotOptionsGauge);
    configuration.setSeries(series);
    final Calendar cal = Calendar.getInstance();
    runWhileAttached(chart, new Runnable() {

        @Override
        public void run() {
            cal.setTimeInMillis(System.currentTimeMillis());
            double secs = cal.get(Calendar.SECOND);
            // disable animation when the second dial reaches 0
            boolean animation = secs == 0 ? false : true;
            configuration.getChart().setAnimation(animation);
            second.setY(secs * (12.0 / 60.0));
            series.update(second);
        }
    }, 1000, 15000);
    chart.drawChart(configuration);
    return chart;
}

Example 7 with Style

use of com.vaadin.addon.charts.model.style.Style 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 8 with Style

use of com.vaadin.addon.charts.model.style.Style in project charts by vaadin.

the class SplineWithPlotBandRemoveFunctionality method createPlotBand.

private void createPlotBand(YAxis yAxis) {
    Style style = new Style();
    style.setColor(LIGHT_GRAY);
    final PlotBand lightAir = new PlotBand();
    lightAir.setFrom(0.3);
    lightAir.setTo(1.5);
    lightAir.setColor(LIGHT_BLUE);
    lightAir.setLabel(new Label("Light air"));
    lightAir.getLabel().setStyle(style);
    final PlotBand lightBreeze = new PlotBand();
    lightBreeze.setFrom(1.5);
    lightBreeze.setTo(3.3);
    lightBreeze.setColor(TRANSPARENT);
    lightBreeze.setLabel(new Label("Light breeze"));
    lightBreeze.getLabel().setStyle(style);
    final PlotBand gentleBreeze = new PlotBand();
    gentleBreeze.setFrom(3.3);
    gentleBreeze.setTo(5.5);
    gentleBreeze.setColor(LIGHT_BLUE);
    gentleBreeze.setLabel(new Label("Gentle breeze"));
    gentleBreeze.getLabel().setStyle(style);
    final PlotBand moderateBreeze = new PlotBand();
    moderateBreeze.setFrom(5.5);
    moderateBreeze.setTo(8);
    moderateBreeze.setColor(TRANSPARENT);
    moderateBreeze.setLabel(new Label("Moderate breeze"));
    moderateBreeze.getLabel().setStyle(style);
    final PlotBand freshBreeze = new PlotBand();
    freshBreeze.setFrom(8);
    freshBreeze.setTo(11);
    freshBreeze.setColor(LIGHT_BLUE);
    freshBreeze.setLabel(new Label("Fresh breeze"));
    freshBreeze.getLabel().setStyle(style);
    final PlotBand strongBreeze = new PlotBand();
    strongBreeze.setFrom(11);
    strongBreeze.setTo(14);
    strongBreeze.setColor(TRANSPARENT);
    strongBreeze.setLabel(new Label("Strong breeze"));
    strongBreeze.getLabel().setStyle(style);
    final PlotBand highWind = new PlotBand();
    highWind.setFrom(14);
    highWind.setTo(15);
    highWind.setColor(LIGHT_BLUE);
    highWind.setLabel(new Label("High wind"));
    highWind.getLabel().setStyle(style);
    yAxis.setPlotBands(lightAir, lightBreeze, gentleBreeze, moderateBreeze, freshBreeze, strongBreeze, highWind);
}

Example 9 with Style

use of com.vaadin.addon.charts.model.style.Style in project charts by vaadin.

the class ChartTypes method chartTypesWaterfallPlotoptions.

public void chartTypesWaterfallPlotoptions() {
    // Define the colors
    Chart chart = new Chart();
    Configuration conf = chart.getConfiguration();
    final Color balanceColor = SolidColor.BLACK;
    final Color positiveColor = SolidColor.BLUE;
    final Color negativeColor = SolidColor.RED;
    // Configure the colors
    PlotOptionsWaterfall options = new PlotOptionsWaterfall();
    options.setUpColor(positiveColor);
    options.setColor(negativeColor);
    // Configure the labels
    DataLabels labels = new DataLabels(true);
    labels.setVerticalAlign(VerticalAlign.TOP);
    labels.setY(-20);
    labels.setFormatter("Math.floor(this.y/1000) + 'k'");
    Style style = new Style();
    style.setColor(SolidColor.BLACK);
    style.setFontWeight(FontWeight.BOLD);
    labels.setStyle(style);
    options.setDataLabels(labels);
    options.setPointPadding(0);
    conf.setPlotOptions(options);
}

Example 10 with Style

use of com.vaadin.addon.charts.model.style.Style in project charts by vaadin.

the class MultipleAxes method getChart.

@Override
protected Component getChart() {
    Chart chart = new Chart();
    Configuration conf = chart.getConfiguration();
    Color[] colors = getThemeColors();
    conf.getChart().setZoomType(ZoomType.XY);
    conf.setTitle("Average Monthly Weather Data for Tokyo");
    conf.setSubTitle("Source: WorldClimate.com");
    XAxis x = new XAxis();
    x.setCategories("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
    conf.addxAxis(x);
    YAxis y1 = new YAxis();
    Labels labels = new Labels();
    labels.setFormatter("return this.value +'°C'");
    Style style = new Style();
    style.setColor(colors[1]);
    labels.setStyle(style);
    y1.setLabels(labels);
    y1.setOpposite(true);
    AxisTitle title = new AxisTitle("Temperature");
    style = new Style();
    style.setColor(colors[1]);
    y1.setTitle(title);
    conf.addyAxis(y1);
    YAxis y2 = new YAxis();
    y2.setGridLineWidth(0);
    title = new AxisTitle("Rainfall");
    style = new Style();
    style.setColor(colors[0]);
    y2.setTitle(title);
    labels = new Labels();
    labels.setFormatter("this.value +' mm'");
    style = new Style();
    style.setColor(colors[0]);
    labels.setStyle(style);
    y2.setLabels(labels);
    conf.addyAxis(y2);
    YAxis y3 = new YAxis();
    y3.setGridLineWidth(0);
    conf.addyAxis(y3);
    title = new AxisTitle("Sea-Level Pressure");
    style = new Style();
    style.setColor(colors[2]);
    y3.setTitle(title);
    labels = new Labels();
    labels.setFormatter("this.value +' mb'");
    style = new Style();
    style.setColor(colors[2]);
    labels.setStyle(style);
    y3.setLabels(labels);
    y3.setOpposite(true);
    chart.drawChart(conf);
    Tooltip tooltip = new Tooltip();
    tooltip.setFormatter("function() { " + "var unit = { 'Rainfall': 'mm', 'Temperature': '°C', 'Sea-Level Pressure': 'mb' }[this.series.name];" + "return ''+ this.x +': '+ this.y +' '+ unit; }");
    conf.setTooltip(tooltip);
    Legend legend = new Legend();
    legend.setLayout(LayoutDirection.VERTICAL);
    legend.setAlign(HorizontalAlign.LEFT);
    legend.setX(120);
    legend.setVerticalAlign(VerticalAlign.TOP);
    legend.setY(80);
    legend.setFloating(true);
    conf.setLegend(legend);
    DataSeries series = new DataSeries();
    PlotOptionsColumn plotOptionsColumn = new PlotOptionsColumn();
    plotOptionsColumn.setColor(colors[0]);
    series.setPlotOptions(plotOptionsColumn);
    series.setName("Rainfall");
    series.setyAxis(1);
    series.setData(49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4);
    conf.addSeries(series);
    series = new DataSeries();
    PlotOptionsSpline plotOptionsSpline = new PlotOptionsSpline();
    plotOptionsSpline.setColor(colors[2]);
    series.setPlotOptions(plotOptionsSpline);
    series.setName("Sea-Level Pressure");
    series.setyAxis(2);
    series.setData(1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7);
    conf.addSeries(series);
    series = new DataSeries();
    plotOptionsSpline = new PlotOptionsSpline();
    plotOptionsSpline.setColor(colors[1]);
    series.setPlotOptions(plotOptionsSpline);
    series.setName("Temperature");
    series.setData(7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6);
    conf.addSeries(series);
    chart.drawChart(conf);
    return chart;
}