use of com.vaadin.addon.charts.model.PlotOptionsGauge 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;
}
use of com.vaadin.addon.charts.model.PlotOptionsGauge 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;
}
use of com.vaadin.addon.charts.model.PlotOptionsGauge 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;
}
use of com.vaadin.addon.charts.model.PlotOptionsGauge in project charts by vaadin.
the class Clock 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 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();
Labels labels = new Labels();
labels.setDistance(-20);
yAxis.setLabels(labels);
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"));
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 hour = new DataSeriesItem();
final DataSeriesItem minute = new DataSeriesItem();
final DataSeriesItem second = new DataSeriesItem();
hour.setId("hour");
hour.setY(10);
hour.setDial(new Dial());
hour.getDial().setRadius("60%");
hour.getDial().setBaseWidth(4);
hour.getDial().setRearLength("0%");
hour.getDial().setBaseLength("95%");
minute.setId("minute");
minute.setY(10);
minute.setDial(new Dial());
minute.getDial().setBaseLength("95%");
minute.getDial().setRearLength("0%");
second.setId("second");
second.setY(30);
second.setDial(new Dial());
second.getDial().setRadius("100%");
second.getDial().setBaseWidth(1);
second.getDial().setRearLength("20%");
series.add(hour);
series.add(minute);
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 hours = cal.get(Calendar.HOUR);
double mins = cal.get(Calendar.MINUTE);
double secs = cal.get(Calendar.SECOND);
// disable animation when the second dial reaches 0
boolean animation = secs == 0 ? false : true;
configuration.getChart().setAnimation(animation);
hour.setY(hours + (mins / 60.0));
minute.setY(mins * (12.0 / 60.0) + secs * (12.0 / 3600.0));
second.setY(secs * (12.0 / 60.0));
series.update(hour);
series.update(minute);
series.update(second);
}
}, 1000, 15000);
chart.drawChart(configuration);
return chart;
}
use of com.vaadin.addon.charts.model.PlotOptionsGauge in project charts by vaadin.
the class VUMeter method getChart.
@Override
protected Component getChart() {
final Chart chart = new Chart();
chart.setWidth("600px");
chart.setHeight("200px");
GradientColor gradient = GradientColor.createLinear(0, 0, 0, 1);
gradient.addColorStop(0, new SolidColor("#FFF4C6"));
gradient.addColorStop(0.3, new SolidColor("#FFFFFF"));
gradient.addColorStop(1, new SolidColor("#FFF4C6"));
final Configuration configuration = chart.getConfiguration();
configuration.getChart().setType(ChartType.GAUGE);
configuration.getChart().setPlotBackgroundColor(gradient);
configuration.getChart().setPlotBackgroundImage(null);
configuration.getChart().setPlotBorderWidth(1);
configuration.setTitle("VU meter");
Pane pane1 = new Pane(-45, 45);
Pane pane2 = new Pane(-45, 45);
pane1.setBackground(new Background[] {});
pane2.setBackground(new Background[] {});
pane1.setCenter("25%", "145%");
pane2.setCenter("75%", "145%");
pane1.setSize("300px");
pane2.setSize("300");
configuration.addPane(pane1);
configuration.addPane(pane2);
PlotBand plotBand1 = new PlotBand(0, 6, new SolidColor("#C02316"));
plotBand1.setInnerRadius("100%");
plotBand1.setOuterRadius("105%");
PlotBand plotBand2 = new PlotBand(0, 6, new SolidColor("#C02316"));
plotBand2.setInnerRadius("100%");
plotBand2.setOuterRadius("105%");
YAxis yAxis = new YAxis();
yAxis.setPane(pane1);
yAxis.setTitle("VU<br/><span style=\"font-size:8px\">Channel A</span>");
yAxis.getTitle().setY(-40);
yAxis.setMin(-20);
yAxis.setMax(6);
yAxis.setTickPosition(TickPosition.OUTSIDE);
yAxis.setMinorTickPosition(TickPosition.OUTSIDE);
Labels labels = new Labels();
labels.setDistance(20);
labels.setRotationPerpendicular();
yAxis.setLabels(labels);
yAxis.setPlotBands(plotBand1);
YAxis yAxis2 = new YAxis();
yAxis2.setPane(pane2);
yAxis2.setTitle("VU<br/><span style=\"font-size:8px\">Channel B</span>");
yAxis2.getTitle().setY(-40);
yAxis2.setMin(-20);
yAxis2.setMax(6);
yAxis2.setTickPosition(TickPosition.OUTSIDE);
yAxis2.setMinorTickPosition(TickPosition.OUTSIDE);
labels = new Labels();
labels.setDistance(20);
labels.setRotationPerpendicular();
yAxis2.setLabels(labels);
yAxis2.setPlotBands(plotBand2);
configuration.addyAxis(yAxis);
configuration.addyAxis(yAxis2);
PlotOptionsGauge gauge = new PlotOptionsGauge();
gauge.setDataLabels(new DataLabels(false));
gauge.setDial(new Dial());
gauge.getDial().setRadius("100%");
configuration.setPlotOptions(gauge);
final ListSeries series1 = new ListSeries(-20);
final ListSeries series2 = new ListSeries(-20);
series1.setyAxis(0);
series2.setyAxis(1);
configuration.setSeries(series1, series2);
runWhileAttached(chart, new Runnable() {
final Random r = new Random(0);
@Override
public void run() {
double left = series1.getData()[0].doubleValue();
double inc = (r.nextDouble() - 0.5) * 3;
double leftVal = left + inc;
double rightVal = leftVal + inc / 3;
if (leftVal < -20 || leftVal > 6) {
leftVal = left - inc;
}
if (rightVal < -20 || rightVal > 6) {
rightVal = leftVal;
}
series1.updatePoint(0, leftVal);
series2.updatePoint(0, rightVal);
}
}, 500, 12000);
chart.drawChart(configuration);
return chart;
}
Aggregations