Bubble chart with labels

In January I had the opportunity to visit the Queen City to provide some Flex training to a great team of developers under the queen’s crown, and to spend time with some dear friends as well. They (the developers, not the friends) had a requirement to produce bubble charts that had labels inside the bubbles. It occurred to me that other people could probably use this feature, too, so I decided to polish it up a bit and make it available. The result is two classes, LabeledBubbleRenderer and LabeledBubbleSeries.

To implement the functionality, simply create a BubbleChart, and then put a LabeledBubbleSeries tag where you would normally put your BubbleSeries. You should never need to explicitly reference the LabeledBubbleRenderer, because the LabeledBubbleSeries class uses it as the default renderer.

<mx:BubbleChart>
	<mx:series>
		<rd:LabeledBubbleSeries />
	</mx:series>
</mx:BubbleChart>

The primary departure from the standard BubbleSeries class is that the LabeledBubbleSeries has a fourth data field: In addition to xField, yField, and radiusField, there is also a labelField property. As the name suggests, this is the name of the field that stores the string that should be displayed in each bubble’s label.

<mx:BubbleChart>
	<mx:series>
		<rd:LabeledBubbleSeries labelField="name"
					xField="leads"
					yField="sales"
					radiusField="commission" />
	</mx:series>
</mx:BubbleChart>

Secondarily, there are also a couple of additional styles, which control the location of the text within the bubble. These values, of course, are passed on to the LabeledBubbleRenderer instances which draw the circles and display the text.

<mx:BubbleChart>
	<mx:series>
		<rd:LabeledBubbleSeries textAlign="center"
					textVAlign="middle" />
	</mx:series>
</mx:BubbleChart>

I have posted a very simple demo app that shows how this all fits together.

If you look at the code, you will see a rather tight coupling between the two classes. I did not view this as undesirable because I could not think of a reason why you would want to use one without the other. However, the code is free for you to modify as needed. If you do make a significant modification that you think might benefit others, please let me know, as I would like to integrate it.

• View the Demo
• View the Source

Finally, a disclaimer: As you have probably already noticed, this code is not independent of Adobe’s Data Visualization components. So if you don’t have those, this won’t do you much good. But if you do have them, then you may find this to be a useful little enhancement. Enjoy!

This being the 17th of March, allow me to close with this wish: Erin Go Bragh.