Funnel Chart - Learn JBStrap

Overview

A funnel chart displays one data series. A funnel contains several trapezoid shapes, denoting data points. Every trapezoid shape has a different color (automatically assigned, but can also be specified). The trapezoid denoting the highest value is placed on the top, while other data points are visualized as gradually smaller shapes. The overall outline of the chart has the shape of a funnel. Each trapezoid shape is shown in the legend, helping the user to find out what sort of data the shapes represent.

Customization

You can customize the colors of the chart. You can also create your own custom tooltip.

Features

	Lasso	Brush	Zoom	Dot Tooltip	Line Tooltip	Simple Tooltip	Custom Tooltip	Click event
FunnelChart

Example

  Creating a simple Funnel Chart  
        
@Public
public class CreateFunnelChart extends BasePage {

	@Override
	public void build() {
		// Chart creation
		final ChartCanvas chartCanvas = new ChartCanvas();
		// FunnelChart creation with dataDescriptor and category columnName
		final FunnelChart funnelChart = new FunnelChart("firstChart", JBStrap.getDataDescriptor("dummyChartDD"), "category");
		// Series creation with data columnName
		final Series series =  new Series("First Funnel Chart", "data");

		// Add series to funnelChart
		funnelChart.setSeries(series);
		// Add funnelChart to chartCanvas
		chartCanvas.addChart(funnelChart);


        final Card comment = new Card().addComponent(new Paragraph("Creating a Chart Canvas and a simple Area Chart on it."));
 
        final Container mapContainer = new Container().setHeight75().addStyleClass("mt-3").addComponent(chartCanvas);
        final Container commentContainer = new Container().setHeight25().addComponent(comment);
 
        addComponents(mapContainer, commentContainer);

	}

}

Overview

Customization

Features

Example

Related pages