BubbleChart Control in Flex4


 

BubbleChart Control in Flex4

The BubbleChart Control is a MX Component. There is no Spark component.

The BubbleChart Control is a MX Component. There is no Spark component.

BubbleChart control in Flex4:

The BubbleChart Control is a MX Component. There is no Spark component.
You can provide the data to the chart control by using data provider property. When you will use more than one series in a chart control you will provide the data individually to the series. There are three types of value in each data x-axis value, y-axis value and radius value. You will use minRadius and maxRadius property for chart. The default value of minRadius is 0 pixels and maxRadius is 50 pixels. You will use <mx:horizontalAxis> or <mx:verticalAxis> and <mx:Series> in it. You will use xField, yField, displayName and radiusField property for series. The radiusField property provides the radius to the bubble for showing a Bubble chart. The tag of BubbleChart Control is <mx:BubbleChart>.

Example:

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx"

minWidth="955" minHeight="600">

<fx:Declarations>

<s:SolidColor id="s1" color="#990000" alpha=".5"/>

<s:SolidColor id="s2" color="#808080" alpha=".5"/>

<s:SolidColor id="s3" color="#cc00cc" alpha=".5"/>

<s:SolidColorStroke id="scs1" color="#990000" weight="2"/>

<s:SolidColorStroke id="scs2" color="#808080" weight="2"/>

<s:SolidColorStroke id="scs3" color="#cc00cc" weight="2"/>

</fx:Declarations>

<fx:Script>

<![CDATA[

import mx.collections.ArrayCollection;

[Bindable]

public var student:ArrayCollection = new ArrayCollection([

{"Stream":"Management", "Girls":1000, "r":10 },

{"Stream":"Computer Science", "Girls":800, "r":4 },

{"Stream":"Mechanical", "Girls":200, "r":6 },

{"Stream":"Electical", "Girls":800, "r":3 },

{"Stream":"Electronics", "Girls":500, "r":8 },

{"Stream":"Civil", "Girls":300, "r":7 }

]);

[Bindable]

public var student1:ArrayCollection = new ArrayCollection([

{"Stream":"Management", "Boys":1400, "r":7},

{"Stream":"Computer Science", "Boys":1200, "r":8},

{"Stream":"Mechanical", "Boys":1500, "r":2},

{"Stream":"Electical", "Boys":850, "r":5},

{"Stream":"Electronics", "Boys":1000, "r":10},

{"Stream":"Civil", "Boys":900, "r":1}

]);

[Bindable]

public var student2:ArrayCollection = new ArrayCollection([

{"Stream":"Management", "TotalStudent":2400, "r":3},

{"Stream":"Computer Science", "TotalStudent":2000, "r":7},

{"Stream":"Mechanical", "TotalStudent":1700, "r":4},

{"Stream":"Electical", "TotalStudent":1650, "r":10},

{"Stream":"Electronics", "TotalStudent":1500, "r":1},

{"Stream":"Civil", "TotalStudent":1200, "r":9}

]);

]]>

</fx:Script>

<s:Panel title="BubbleChart control Example" width="617">

<s:layout>

<s:HorizontalLayout/>

</s:layout>

<mx:BubbleChart id="bubblechart1"

minRadius="1"

maxRadius="10"

showDataTips="true"

paddingBottom="10"

paddingLeft="10"

paddingRight="10"

paddingTop="10"

width="515">

<mx:verticalAxis>

<mx:CategoryAxis categoryField="Stream"

dataProvider="{student}"/>

</mx:verticalAxis>

<mx:series>

<mx:BubbleSeries id="as1"

xField="Girls"

yField="Stream"

displayName="Girls"

fill="{s1}"

stroke="{scs1}"

dataProvider="{student}"

radiusField="r"/>

<mx:BubbleSeries id="as2"

xField="Boys"

yField="Stream"

displayName="Boys"

fill="{s2}"

stroke="{scs2}"

dataProvider="{student1}"

radiusField="r"/>

<mx:BubbleSeries id="as3"

xField="TotalStudent"

yField="Stream"

displayName="TotalStudent"

fill="{s3}"

stroke="{scs3}"

dataProvider="{student2}"

radiusField="r"/>

</mx:series>

</mx:BubbleChart>

<mx:Legend dataProvider="{bubblechart1}"/>

</s:Panel>

</s:Application>

Output:

Running Application:

To view this page ensure that Adobe Flash Player version 10.0.0 or greater is installed.

Download this code

Ads