How to: Build a Bubble Chart

Configure the Data Table Component

First, you'll configure a Data Table component with sample data that displays in your bubble chart.

1. In the Module Builder, drag and drop a Data Table component onto your canvas.

2. In the Property ID and Label Text fields, enter dtSalesByAgent.

3. In the data table, enter the following:

   leads	sales	revenue	agentId
   240	25	1000000	6635022
   320	30	1500000	1953225
   180	20	800000	3485878
   500	35	900000	9728223
   250	10	2000000	7782362
   270	18	1700000	8155255
   200	33	2300000	6687696
   330	22	1200000	5169492

   

4. Click Save Component.

Configure the Hidden Component

Use a Hidden component to store the output from the Data Workflow component you’ll set up next.

1. Drag and drop a Hidden component onto your canvas, placing it below your dtSalesByAgent Data Table component.

2. In the Property ID and Label Text fields, enter salesForBubbleChart.

3. Click Save Component.

Configure the Data Workflow Component

Now, you'll configure your Data Workflow component. Here, you'll use a Pick operator to select three keys from your data. Then, you'll convert each of those fields to x, y, and z values. Your x and y values represent data points on each axis. The z values determine the size of each point. Your data must be formatted this way to pass to a Chart component.

1. Drag and drop a Data Workflow component onto your canvas, placing it below your dtSalesByAgent Data Table component.

2. In the Property ID and Canvas Label Text fields, enter dwfScatterPlot.

Configure the Input Operator

1. Drag and drop an Input operator onto your Data Workflow canvas.

2. Configure the operator's Info window as follows:

   Setting	Value
   Category	Input
   Component	dtSalesByAgent
   Required	Yes
   Source	Default

Configure the Pick Operator

This Pick operator retrieves the leads and sales columns from your data table.

1. Drag and drop a Pick operator onto your Data Workflow canvas.

2. Configure the operator's Info window as follows:

   Setting	Value
   Category	Pick
   Label	Leads, Sales, and Revenue
   Pick Keys	leads, sales, revenue

3. Connect the output port (right) of the dtSalesByAgent Input operator to the input port (left) of the Leads, Sales, and Revenue Pick operator.

Configure the First Console Operator

The first Console operator in this configuration displays the data retrieved by the Pick operator in the DevTools Console.

1. Drag and drop a Console operator onto your Data Workflow canvas.

2. Configure the operator's Info window as follows:

   Setting	Value
   Category	Console
   Label	Picked Data

3. Connect the output port (right) of the Leads, Sales, and Revenue Pick operator to the input port (left) of the Picked Data Console operator.

Configure the First Rename Field Operator

This Rename Field operator renames your leads column to x. Doing so lets your leads data serve as the x values.

1. Drag and drop a Rename Field operator onto your Data Workflow canvas.

2. Configure the operator's Info window as follows:

   Setting	Value
   Category	Rename Field
   Label	X-axis
   Current Name	leads
   Target Name	x

3. Connect the output port (right) of the Leads, Sales, and Revenue Pick operator to the input port (left) of the X-axis Rename Field operator.

Configure the Second Rename Field Operator

This Rename Field operator renames your sales column to y. Doing so lets your sales data serve as the y values.

1. Drag and drop another Rename Field operator onto your Data Workflow canvas.

2. Configure the operator's Info window as follows:

   Setting	Value
   Category	Rename Field
   Label	Y-axis
   Current Name	sales
   Target Name	y

3. Connect the output port (right) of the X-axis Rename Field operator to the input port (left) of the Y-axis Rename Field operator.

Configure the Third Rename Field Operator

This final Rename Field operator renames your revenue column to z. Doing so lets your revenue data serve as the z values.

1. Drag and drop another Rename Field operator onto your Data Workflow canvas.

2. Configure the operator's Info window as follows:

   Setting	Value
   Category	Rename Field
   Label	Z-axis
   Current Name	revenue
   Target Name	z

3. Connect the output port (right) of the Y-axis Rename Field operator to the input port (left) of the Z-axis Rename Field operator.

Configure the Second Console Operator

This Console operator displays the data after being renamed by the Rename Field operators.

1. Drag and drop another Console operator onto your Data Workflow canvas.

2. Configure the operator's Info window as follows:

   Setting	Value
   Category	Console
   Label	Renamed Data

3. Connect the output port (right) of the Z-axis Rename Field operator to the input port (left) of the Renamed Data Console operator.

Configure the Output Operator

The Output operator passes your final result to the Hidden component you set up earlier.

1. Drag and drop an Output operator onto your Data Workflow canvas.

2. Configure the operator's Info window as follows:

   Setting	Value
   Category	Output
   Component	salesForBubbleChart
   Action	value

3. Connect the output port (right) of the Z-axis Rename Field operator to the input port (left) of the salesForBubbleChart Output operator.

   

4. Click Save Component.

Configure the Chart Component

Now it's time to configure your Chart component and determine which data to reference when populating your chart.

1. Drag and drop a Chart component onto your canvas, placing it below your salesForBubbleChart Hidden component.

2. In the Property ID field, enter chartLeadsSalesRevenue.

3. In the Label Text field, enter Leads vs Sales vs Revenue.

4. In the Chart Title field, enter Leads vs Sales vs Revenue.

5. In the Inputs table, enter the following:

   ID	Label	Chart Type	Categories	Values
   salesForBubbleChart		bubble		salesForBubbleChart

   

6. Navigate to the component’s Advanced settings.

7. From the Series Axis Type and Value Axis Type drop-downs, select Linear.

8. In the Series Axis Label Text field, enter Leads.

9. In the Value Axis Label Text field, enter Sales.

   

10. Click Save.

Configure the Initializer Component

Lastly, configure an Initializer component to run your Data Workflow.

1. Drag and drop an Initializer component onto your canvas, placing it below your Data Table component.

2. In the Property ID and Canvas Label Text fields, enter initBubbleChart.

3. From the Trigger Type drop-down, select New Submission.

4. In the Outputs table, enter the following:

   Property ID	Type	Value
   dwfBubbleChart	trigger	GO

   

5. Click Save Component.

6. Save your module.

Here's how your completed module looks in the Module Builder:

Preview your module in Express View. You'll see the data from your data table displayed like a traditional scatter plot. Leads serve as the x-axis, and sales serve as the y-axis. But you'll notice that each point on the chart is a different size. This variation is due to the revenue values. If a point has a larger revenue value, its bubble is larger. And if a point's revenue is smaller, the bubble is smaller. This plot provides an added layer of data to analyze.