JBStrap Charts - Learn JBStrap

General Chart overview

JBStrap charts are very versatile, but they all function similarly, and share functionalities. We will provide a general overview of these shared features.

ChartCanvas

This is the chart container class. You need to place your charts within a canvas in order to display them. You can display multiple charts within the same canvas. By default, the canvas comes with the following default settings:

The canvas border is not enabled
The default font color is gray
The title text font weight is 700
The title text is center aligned
The title text position is top
The legend font color is gray

You can customize these values to your liking. You can also use the ChartCanvas to retrieve information about a chart. Think of this as the paper on which the chart is drawn, this is where you can set the chart's title, font color, size, border, legend etc.

Tooltips

JBStrap charts come with 3 default tooltip types: Dot, Line and Simple. You can also implement your own tooltip. This can be chosen by using the setTooltipType() method, with a TooltipType enum constant. Not every chart supports every tooltip type, you can find information about which chart supports which tooltip type in their respective sections.

If you wish to implement your own tooltip, you need to use the TooltipRenderer class, as shown in this example:

  Custom Tooltip implementation example  
        
public class TooltipRenderer extends BasePage {

	public TooltipRenderer(final UI ui, final Parameters params) {
		super(ui, params);


		// Chart creation
		final ChartCanvas chartCanvas = new ChartCanvas();
		// Set tooltip type to CUSTOM
		chartCanvas.setTooltipType(TooltipType.CUSTOM);
		// Set tooltip renderer
		chartCanvas.setTooltipRendered(new ChartTooltipRenderer() {

			@Override
			public Component<?> onRendering() {
				return new Card().setHeaderText("Custom tooltip", Color.DARK_GREEN).addComponents(new xData(), new Span(": "), new yData());
			}
		});


		// Add a lineChart to chartCanvas
		chartCanvas.addChart(new LineChart("firstChart", JBStrap.getDataDescriptor("dummyChartDs"), "category").addSeries(new LineSeries("First LineChart", "data")));


		final Card comment = new Card().addComponent(new Paragraph("Creating a new chard, and setting the tooltip renderer."));

		final Container mapCointainer = new Container().setHeight75().addStyleClass("mt-3").addComponent(chartCanvas);
		final Container commentCointainer = new Container().setHeight25().addComponent(comment);

		addComponents(mapCointainer, commentCointainer);

	}
}

Chart click events

The JBStrap charts support click events This means that you can implement server-side code for the event that is triggered when a user clicks on chart data. This is when a ChartClick event is triggered. This event provides you information on where and which chart the user clicked on. This can be reused in various ways, e.g. to update a list.

Lasso

The lasso feature allows the user to select one or more data points. You can select a data point by circling the data points on the chart. You can select multiple charts or series at the same time. If a user selects multiple data points on the chart, a Lasso event is triggered on the server side. This event is associated with every selection. If a user selects a data point on a chart, the event is triggered on every chart. The lasso event contains information on the selected chart and series. This piece of information can be then used in any business logic, e.g., to group data points or conduct further analysis.

Zoom

The zoom feature allows the user to zoom in on a chart area by using the mouse wheel. If a user zooms in on the chart while the lasso feature is disabled, it is possible to move the chart horizontally by keeping the mouse button pressed. If the lasso feature is enabled, users are not allowed to move the chart as the lasso feature is active when keeping the mouse wheel pressed.

Brush

The brush feature works with the zoom feature. This allows a miniature version of the chart appear below the chart. Users can zoom in on the chart, but in this case the miniature version of the chart is not zoomed. Instead, a small dark area indicates the area of the chart currently displayed on the normal size chart. Users can move this darker area, at the same time moving the zoomed area on the normal size chart. If you use this feature alongside the lasso feature, users can use all functionalities of these features on the chart.

These last 3 features lets the users have additional interactivity with the charts. Please note that these three features are only available on vertical charts, they are not available on the Horizontal Bar, Horizontal Stacked Bar and Population Pyramid charts.

Multi charts

This feature allows you to put multiple charts on the same canvas. You can use the vertical charts with this feature. Both charts will share the same tooltip type. The Lasso, Zoom and Brush features are also usable on multi charts.

  Multi Chart example  
        
public class MultiChart extends BasePage implements ValueChangedHandler {

	private static final List<Class<? extends AxesBasedChart<?>>> AXES_BASE_CHARTS = Arrays.asList(
			LineChart.class,
			BarChart.class,
			AreaChart.class,
			DotChart.class,
			StackedAreaChart.class,
			StackedBarChart.class,
			BubbleChart.class
			);

	private final ComboboxItem cbx_chart1;
	private final ComboboxItem cbx_chart2;

	private final ChartCanvas canvas;
	private AxesBasedChart<?> chart1;
	private AxesBasedChart<?> chart2;
	private final DataDescriptor dataDescriptor;

	public MultiChart(final UI ui, final Parameters params) {
		super(ui, params);

		dataDescriptor = RandomData.generateData(DataDescriptorColumnDatatype.DATE, "data1", "data2", "data3", "data4");
		chart1 = new BarChart("chart1", dataDescriptor, "Category")
				.addSeries(new Series("series1", "data1"));
		chart2 = new LineChart("chart2", dataDescriptor, "Category")
				.addSeries(new Series("series1", "data3"));

		cbx_chart1 = new ComboboxItem("chart1", "First chart type").addValueChangeHandler(this);
		cbx_chart2 = new ComboboxItem("chart2", "First chart type").addValueChangeHandler(this);

		AXES_BASE_CHARTS.forEach(chartClass -> {
			cbx_chart1.addElement(chartClass.getCanonicalName(), chartClass.getSimpleName());
			cbx_chart2.addElement(chartClass.getCanonicalName(), chartClass.getSimpleName());
		});

		cbx_chart1.setValue(chart1.getClass().getCanonicalName());
		cbx_chart2.setValue(chart2.getClass().getCanonicalName());

		canvas = new ChartCanvas().addChart(chart1, chart2);

		addComponents(new PageTitle(ui, "Multi chart sample", this.getClass(), null),
				new Container(
						canvas
						.setTitle("Sample chart title")
						).setType(ContainerType.FLUID).setWidth50(),
				new Row(
						new Column(cbx_chart1).setSize(ColumnSize.SIX_TWELFTH()),
						new Column(cbx_chart2).setSize(ColumnSize.SIX_TWELFTH())
						)
				);
	}

	@Override
	public void onValueChanged(final FormItemChangeEvent event) {
		try {
			final String name = event.getComponent().getName();
			final Class<?> chartClass = Class.forName(event.getNewValue());
			if (chartClass != null) {
				if (!chartClass.isAssignableFrom(("chart1".equals(name) ? chart1 : chart2).getClass())) {
					final AxesBasedChart<?> newChart = (AxesBasedChart<?>)chartClass.getConstructor(String.class, DataDescriptor.class, String.class).newInstance(name, dataDescriptor, "Category");
					((MultiSeriesChart<?,?>)newChart).addSeries(new Series("series1", "data" + ("chart1".equals(name) ? "1" : "3")));
					if (newChart instanceof StackedAreaChart || newChart instanceof StackedBarChart) {
						((MultiSeriesChart<?,?>)newChart).addSeries(new Series("series2", "data" + ("chart1".equals(name) ? "2" : "4")));
					}
					if (newChart != null) {
						switch (name) {
						case "chart1":
							canvas.removeChart(chart1).removeChart(chart2);
							chart1 = newChart;
							canvas.addChart(chart1, chart2);
							break;
						case "chart2":
							canvas.removeChart(chart2);
							chart2 = newChart;
							canvas.addChart(chart2);
						default:
							break;
						}
					}
				}
			}
		} catch (final Exception e) {
			e.printStackTrace();
		}
	}

}

Customization

As with most JBStrap components, you can customize the look and feel of your charts. For more information, visit the Style customization section. A notable feature of some of the charts (axis based charts), is that you can set the individual color of each data point, even if they are in the same series. By default, every data point in a series has the same color, but if you want to, you can specify separate colors for each point.

Default Chart Types

JBStrap comes with the following chart types:

Example chart

  Complete Line Chart example  
        
package com.jbstrap.sample.pages.charts;

import java.util.Arrays;

import com.jbstrap.core.Parameters;
import com.jbstrap.core.meta.enums.DataDescriptorColumnDatatype;
import com.jbstrap.ui.UI;
import com.jbstrap.ui.components.charts.LineChart;
import com.jbstrap.ui.components.charts.Series;
import com.jbstrap.ui.components.charts.params.enums.AxisType;
import com.jbstrap.ui.components.charts.params.enums.CurveType;
import com.jbstrap.ui.components.charts.params.enums.MarkerType;
import com.jbstrap.ui.components.form.items.CheckboxItem;
import com.jbstrap.ui.components.form.items.ComboboxItem;
import com.jbstrap.ui.components.form.items.IntegerItem;
import com.jbstrap.ui.components.form.items.NumberItem;
import com.jbstrap.ui.components.form.items.TextItem;
import com.jbstrap.ui.components.form.items.colorpicker.ColorPicker;
import com.jbstrap.ui.components.panels.tab.TabPage;

public class LineCharts extends ChartSamplePage<LineChart> {


	public LineCharts(final UI ui, final Parameters params) {
		super(ui, params, "Line chart samples");
	}

	@Override
	LineChart createChart(final AxisType axisType) {
		final DataDescriptorColumnDatatype type = axisType == AxisType.DATE ? DataDescriptorColumnDatatype.DATE : (axisType == AxisType.NUMBER ? DataDescriptorColumnDatatype.LONG : DataDescriptorColumnDatatype.TEXT);
		dataColumnNames.add("data1");
		return new LineChart("chart1", RandomData.generateData(type, dataColumnNames.toArray(new String[0])), "Category")
				.addSeries(new Series("series1", dataColumnNames.get(0)));
	}

	@Override
	String addSeries(final AxisType axisType) {
		final int index = dataColumnNames.size() + 1;
		dataColumnNames.add("data" + index);
		final String seriesName = "series" + index;
		RandomData.generateNewData(chart.getDataDescriptor(), dataColumnNames.get(index - 1));
		chart.addSeries(new Series(seriesName, dataColumnNames.get(index - 1)));
		chart.fetchData();
		return seriesName;
	}

	@Override
	TabPage createChartSettings() {
		return null;
	}

	@Override
	public TabPage chartParamsTab(final String seriesName) {
		final ComboboxItem curveType = new ComboboxItem("curveType", "Curve Type");
		Arrays.asList(CurveType.values()).forEach(t -> curveType.addElement(t.name(), t.name()));
		curveType.setValue(CurveType.SMOOTH.name());
		curveType.addValueChangeHandler(event -> {
			chart.getSeries(seriesName).setCurveType(CurveType.fromName(curveType.getValueAsString()));

		});

		final ComboboxItem markerType = new ComboboxItem("markerType", "type");
		Arrays.asList(MarkerType.values()).forEach(t -> markerType.addElement(t.name(), t.name()));
		markerType.setValue(MarkerType.CIRCLE.name());
		markerType.addValueChangeHandler(event -> {
			chart.getSeries(seriesName).setMarkerType(MarkerType.fromName(markerType.getValueAsString()));

		});

		return new TabPage(seriesName).addComponents(
				grid("Settings",
						curveType,
						new CheckboxItem("seriesTangent", "Series tangent").setValue(true)
						.addValueChangeHandler(event -> chart.getSeries(seriesName).setShowSeriesValueTangent(!chart.getSeries(seriesName).isShowSeriesValueTangent())),
						new CheckboxItem("valueTangent", "Value tangent")
						.addValueChangeHandler(event -> chart.getSeries(seriesName).setShowCategoryValueTangent(!chart.getSeries(seriesName).isShowCategoryValueTangent())),
						new ColorPicker("color", "Color").setValue(null).addValueChangeHandler(event -> {
							if (event.getNewValue() != null && !"#aN".equals(event.getNewValue().toString())) {
								chart.getSeries(seriesName).setColor(event.getNewValue());
							}
						}),
						new TextItem("dashArray", "Dash Array").addValueChangeHandler(event -> chart.getSeries(seriesName).setDashArray(event.getNewValue())),
						new IntegerItem("lineWidth", "Line width").setValue(3L).addValueChangeHandler(event -> {
							final Long width = event.getNewValue();
							chart.getSeries(seriesName).setLineWidth(width == null ? 0 : width.intValue());
						})
						),

				grid("Markers",
						new CheckboxItem("markerShow", "Show").setValue(true).addValueChangeHandler(event -> chart.getSeries(seriesName).setShowMarker(!chart.getSeries(seriesName).isShowMarker()) ),
						markerType,
						new NumberItem("markerSIze", "Size").setValue(8d).addValueChangeHandler(event -> {
							final Double size = event.getNewValue();
							chart.getSeries(seriesName).setMarkerSize(size == null ? 8 : size.doubleValue());
						}),
						new ColorPicker("markerFillColor", "Fill color").setValue(null).addValueChangeHandler(event -> {
							if (event.getNewValue() != null && !"#aN".equals(event.getNewValue().toString())) {
								chart.getSeries(seriesName).setMarkerFillColor(event.getNewValue());
							}
						}),
						new ColorPicker("markerLineColor", "Line color").setValue(null).addValueChangeHandler(event -> {
							if (event.getNewValue() != null && !"#aN".equals(event.getNewValue().toString())) {
								chart.getSeries(seriesName).setMarkerLineColor(event.getNewValue());
							}
						}),
						new IntegerItem("markerLineWidth", "Line width").setValue(2L).addValueChangeHandler(event -> {
							final Long width = event.getNewValue();
							chart.getSeries(seriesName).setMarkerLineWidth(width == null ? 2 : width.intValue());
						})
						)
				);
	}



}