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

Example 1 with Color

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

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

the class DonutChart method createChart.

public static Chart createChart() {
    rand = new Random(0);
    Chart chart = new Chart(ChartType.PIE);
    Configuration conf = chart.getConfiguration();
    conf.setTitle("Browser market share, April, 2011");
    YAxis yaxis = new YAxis();
    yaxis.setTitle("Total percent market share");
    PlotOptionsPie pie = new PlotOptionsPie();
    pie.setShadow(false);
    conf.setPlotOptions(pie);
    conf.getTooltip().setValueSuffix("%");
    DataSeries innerSeries = new DataSeries();
    innerSeries.setName("Browsers");
    PlotOptionsPie innerPieOptions = new PlotOptionsPie();
    innerSeries.setPlotOptions(innerPieOptions);
    innerPieOptions.setSize("237px");
    innerPieOptions.setDataLabels(new DataLabels());
    innerPieOptions.getDataLabels().setFormatter("this.y > 5 ? this.point.name : null");
    innerPieOptions.getDataLabels().setColor(new SolidColor(255, 255, 255));
    innerPieOptions.getDataLabels().setDistance(-30);
    Color[] innerColors = Arrays.copyOf(colors, 5);
    innerSeries.setData(new String[] { "MSIE", "Firefox", "Chrome", "Safari", "Opera" }, new Number[] { 55.11, 21.63, 11.94, 7.15, 2.14 }, innerColors);
    DataSeries outerSeries = new DataSeries();
    outerSeries.setName("Versions");
    PlotOptionsPie outerSeriesOptions = new PlotOptionsPie();
    outerSeries.setPlotOptions(outerSeriesOptions);
    outerSeriesOptions.setInnerSize("237px");
    outerSeriesOptions.setSize("318px");
    outerSeriesOptions.setDataLabels(new DataLabels());
    outerSeriesOptions.getDataLabels().setFormatter("this.y > 1 ? '<b>'+ this.point.name +':</b> '+ this.y +'%' : null");
    DataSeriesItem[] outerItems = new DataSeriesItem[] { /* @formatter:off */
    new DataSeriesItem("MSIE 6.0", 10.85, color(0)), new DataSeriesItem("MSIE 7.0", 7.35, color(0)), new DataSeriesItem("MSIE 8.0", 33.06, color(0)), new DataSeriesItem("MSIE 9.0", 2.81, color(0)), new DataSeriesItem("Firefox 2.0", 0.20, color(1)), new DataSeriesItem("Firefox 3.0", 0.83, color(1)), new DataSeriesItem("Firefox 3.5", 1.58, color(1)), new DataSeriesItem("Firefox 3.6", 13.12, color(1)), new DataSeriesItem("Firefox 4.0", 5.43, color(1)), new DataSeriesItem("Chrome 5.0", 0.12, color(2)), new DataSeriesItem("Chrome 6.0", 0.19, color(2)), new DataSeriesItem("Chrome 7.0", 0.12, color(2)), new DataSeriesItem("Chrome 8.0", 0.36, color(2)), new DataSeriesItem("Chrome 9.0", 0.32, color(2)), new DataSeriesItem("Chrome 10.0", 9.91, color(2)), new DataSeriesItem("Chrome 11.0", 0.50, color(2)), new DataSeriesItem("Chrome 12.0", 0.22, color(2)), new DataSeriesItem("Safari 5.0", 4.55, color(3)), new DataSeriesItem("Safari 4.0", 1.42, color(3)), new DataSeriesItem("Safari Win 5.0", 0.23, color(3)), new DataSeriesItem("Safari 4.1", 0.21, color(3)), new DataSeriesItem("Safari/Maxthon", 0.20, color(3)), new DataSeriesItem("Safari 3.1", 0.19, color(3)), new DataSeriesItem("Safari 4.1", 0.14, color(3)), new DataSeriesItem("Opera 9.x", 0.12, color(4)), new DataSeriesItem("Opera 10.x", 0.37, color(4)), new DataSeriesItem("Opera 11.x", 1.65, color(4)) /* @formatter:on */
    };
    outerSeries.setData(Arrays.asList(outerItems));
    conf.setSeries(innerSeries, outerSeries);
    chart.drawChart(conf);
    return chart;
}

Example 3 with Color

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

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

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