Examples with Chart com.vaadin.addon.charts.Chart used on opensource projects

Example 36 with Chart

use of com.vaadin.addon.charts.Chart in project charts by vaadin.

the class BubbleChartMaxSizePercentage method getChart.

@Override
protected Component getChart() {
    Chart chart = new Chart(ChartType.BUBBLE);
    Configuration conf = chart.getConfiguration();
    conf.setTitle((String) null);
    DataSeries dataSeries = new DataSeries();
    dataSeries.add(item(9, 81, 13));
    dataSeries.add(item(98, 5, 39));
    dataSeries.add(item(51, 50, 23));
    dataSeries.add(item(41, 22, -36));
    dataSeries.add(item(58, 24, -30));
    dataSeries.add(item(78, 37, -16));
    dataSeries.add(item(55, 56, 3));
    dataSeries.add(item(18, 45, 20));
    dataSeries.add(item(42, 44, -22));
    dataSeries.add(item(3, 52, 9));
    dataSeries.add(item(31, 50, 47));
    dataSeries.add(item(79, 91, 13));
    dataSeries.add(item(93, 23, -27));
    dataSeries.add(item(44, 83, -28));
    PlotOptionsBubble opts = new PlotOptionsBubble();
    opts.setNegativeColor(getThemeColors()[3]);
    opts.setMaxSize(50, Unit.PERCENTAGE);
    opts.setMinSize("3");
    conf.setPlotOptions(opts);
    conf.addSeries(dataSeries);
    return chart;
}

Example 37 with Chart

use of com.vaadin.addon.charts.Chart in project charts by vaadin.

the class ColumnRange method getChart.

@Override
protected Component getChart() {
    Chart chart = new Chart(ChartType.COLUMNRANGE);
    Configuration conf = chart.getConfiguration();
    conf.getChart().setInverted(true);
    conf.setTitle("Temperature variation by month");
    conf.setSubTitle("Observed in Vik i Sogn, Norway, 2009");
    XAxis xAxis = new XAxis();
    xAxis.setCategories("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
    conf.addxAxis(xAxis);
    YAxis yAxis = new YAxis();
    yAxis.setTitle("Temperature ( °C )");
    conf.addyAxis(yAxis);
    Tooltip tooltip = new Tooltip();
    tooltip.setValueSuffix("°C");
    conf.setTooltip(tooltip);
    PlotOptionsColumnrange columnRange = new PlotOptionsColumnrange();
    columnRange.setDataLabels(new DataLabelsRange(true));
    columnRange.getDataLabels().setFormatter("function() {return this.y + '°C';}");
    conf.setPlotOptions(columnRange);
    conf.getLegend().setEnabled(false);
    // RangeSeries has some helper constructors of which example below, but
    // here we use the raw DataSeries API
    // RangeSeries data = new RangeSeries("Temperatures", getRawData());
    DataSeries data = new DataSeries();
    data.setName("Temperatures");
    for (Number[] minMaxPair : getRawData()) {
        DataSeriesItem item = new DataSeriesItem();
        item.setLow(minMaxPair[0]);
        item.setHigh(minMaxPair[1]);
        data.add(item);
    }
    conf.setSeries(data);
    return chart;
}

Example 38 with Chart

use of com.vaadin.addon.charts.Chart 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 39 with Chart

use of com.vaadin.addon.charts.Chart in project charts by vaadin.

the class CustomThemeUI method getChart.

@Override
protected Component getChart() {
    Chart chart = new Chart();
    chart.setHeight("450px");
    chart.setWidth("100%");
    ChartOptions.get().setTheme(new CustomTheme());
    Configuration configuration = chart.getConfiguration();
    configuration.getChart().setType(ChartType.LINE);
    configuration.getChart().setMarginRight(130);
    configuration.getChart().setMarginBottom(25);
    configuration.getTitle().setText("Monthly Average Temperature");
    configuration.getSubTitle().setText("Source: WorldClimate.com");
    configuration.getxAxis().setCategories(new String[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" });
    YAxis yAxis = configuration.getyAxis();
    yAxis.setMin(-5d);
    yAxis.setTitle(new AxisTitle("Temperature (°C)"));
    yAxis.getTitle().setAlign(VerticalAlign.MIDDLE);
    configuration.getTooltip().setFormatter("'<b>'+ this.series.name +'</b><br/>'+this.x +': '+ this.y +'°C'");
    PlotOptionsLine plotOptions = new PlotOptionsLine();
    plotOptions.setDataLabels(new DataLabels(true));
    configuration.setPlotOptions(plotOptions);
    ListSeries ls = new ListSeries();
    ls.setName("Tokyo");
    ls.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);
    configuration.addSeries(ls);
    chart.drawChart(configuration);
    return chart;
}

Example 40 with Chart

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