Is it possible to create a packed bubble chart in Flex like the following example?
Source: http://blog.tiger.com.pl/wp-content/uploads/2013/06/bubble2.jpg
I googled it and didn't find anything. If there is not a native way to do it, can someone suggest how I could draw it myself?
Well, after searching and searching I found a library called flare here you can see an example of what I was looking for demo at Layout/Bubbles. But everything was done in Actionscript 3. Then I started to create my own class to be used in Flex and I got it. Here is the code of the class I wrote.
package classes
{
import flare.animate.FunctionSequence;
import flare.animate.Transition;
import flare.animate.TransitionEvent;
import flare.animate.Transitioner;
import flare.display.TextSprite;
import flare.query.methods.add;
import flare.query.methods.div;
import flare.query.methods.mul;
import flare.util.Shapes;
import flare.util.Strings;
import flare.vis.Visualization;
import flare.vis.controls.DragControl;
import flare.vis.controls.ExpandControl;
import flare.vis.controls.HoverControl;
import flare.vis.controls.IControl;
import flare.vis.controls.TooltipControl;
import flare.vis.data.Data;
import flare.vis.data.DataList;
import flare.vis.data.DataSprite;
import flare.vis.data.NodeSprite;
import flare.vis.events.SelectionEvent;
import flare.vis.events.TooltipEvent;
import flare.vis.operator.OperatorSwitch;
import flare.vis.operator.encoder.PropertyEncoder;
import flare.vis.operator.label.Labeler;
import flare.vis.operator.layout.CircleLayout;
import flare.vis.operator.layout.CirclePackingLayout;
import flare.vis.operator.layout.DendrogramLayout;
import flare.vis.operator.layout.ForceDirectedLayout;
import flare.vis.operator.layout.IcicleTreeLayout;
import flare.vis.operator.layout.IndentedTreeLayout;
import flare.vis.operator.layout.Layout;
import flare.vis.operator.layout.NodeLinkTreeLayout;
import flare.vis.operator.layout.RadialTreeLayout;
import flash.display.DisplayObjectContainer;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.geom.Point;
import flash.geom.Rectangle;
import flash.text.TextFormat;
import flash.text.TextFormatAlign;
import mx.core.Container;
import mx.core.UIComponent;
import mx.core.mx_internal;
import mx.events.ResizeEvent;
public class PackedBubblesChart extends UIComponent {
public static const DEFAULT_FLEX_SERIES_COLORS:Array = [
0xe48701, 0xa5bc4e, 0x1b95d9, 0xcaca9e,
0x6693b0, 0xf05e27, 0x86d1e4, 0xe4f9a0,
0xffd512, 0x75b000, 0x0662b0, 0xede8c6,
0xcc3300, 0xd1dfe7, 0x52d4ca, 0xc5e05d,
0xe7c174, 0xfff797, 0xc5f68f, 0xbdf1e6,
0x9e987d, 0xeb988d, 0x91c9e5, 0x93dc4a,
0xffb900, 0x9ebbcd, 0x009797, 0x0db2c2
];
// Constructor
public function PackedBubblesChart() {
addEventListener(Event.ADDED_TO_STAGE, addedToStage);
addEventListener(Event.REMOVED_FROM_STAGE, removedFromStage);
}
protected function addedToStage(event: Event) : void {
(this.parent as Container).addEventListener(ResizeEvent.RESIZE, resizeBubbleChart);
tryRender();
}
protected function removedFromStage(event: Event) : void {
clearNodes();
(this.parent as Container).removeEventListener(ResizeEvent.RESIZE, resizeBubbleChart);
}
protected function clearNodes() : void {
if(vis) {
for each(var sprite : DataSprite in _nodesInformation.nodes) {
sprite.parent.removeChild(sprite);
}
vis = null;
}
}
protected function resizeBubbleChart(event:ResizeEvent) : void {
_bounds = new Rectangle(0, 0, parent.width, parent.height);
tryRender();
}
private var _init:Boolean = false;
private var _bounds:Rectangle;
public var labelField : String = "label";
public var valueField : String = "value";
public function get bounds():Rectangle { return _bounds; }
public function set bounds(b:Rectangle):void {
_bounds = b;
resize();
}
private var _dataProvider : Array = [];
private var _nodesInformation : Data = new Data();
private var _nodeDefaultFormat : Object =
{
name: "Bubbles",
op: new CirclePackingLayout(8, false, "depth"),
nodes:{
shape: Shapes.CIRCLE,
fillColor: 0x11aaaaaa,
lineColor: 0xdddddddd,
lineWidth: 4,
alpha: 1,
visible: true
},
edges: {alpha:0, visible:false},
ctrl: new DragControl(NodeSprite),
canStraighten: true
}
public function get dataProvider() : Array {
return _dataProvider;
}
public function set dataProvider(info : Array) : void {
/*
if(vis && _dataProvider && _dataProvider.length > 0) {
for each(var sprite : DataSprite in _nodesInformation.nodes) {
sprite.parent.removeChild(sprite);
}
vis = null;
}
*/
_dataProvider = info;
tryRender();
}
protected function tryRender() : void {
if(parent) _bounds = new Rectangle(0,0,parent.width, parent.height);
if(_dataProvider && _dataProvider.length > 0 && _bounds) {
clearNodes();
_nodesInformation = createNodes(_dataProvider.length);
_nodesInformation.nodes.setProperties(_nodeDefaultFormat.nodes);
var index : uint = 0;
for each(var item : Object in _dataProvider) {
var labelText : String = item[labelField];
var valueNumber : Number = item[valueField];
_nodesInformation.nodes[index].data.label = labelText;
_nodesInformation.nodes[index].buttonMode = true;
_nodesInformation.nodes[index].size = item[valueField];
_nodesInformation.nodes[index].props.value = valueNumber;
_nodesInformation.nodes[index].props.name =labelText;
_nodesInformation.nodes[index].props.name_value = labelText+"\n("+valueNumber+")";
_nodesInformation.nodes[index].fillColor = 0xff000000 + DEFAULT_FLEX_SERIES_COLORS[index % 28];
index++;
}
_nodesInformation.nodes.sortBy("props.value");
// create the visualization
vis = new Visualization(_nodesInformation);
vis.bounds = bounds;
vis.operators.add(_nodeDefaultFormat.op);
vis.setOperator("nodes", new PropertyEncoder(_nodeDefaultFormat.nodes, "nodes"));
vis.operators.add(new Labeler("props.name_value", Data.NODES,new TextFormat("Arial",12,0,true,null,null,null,null, TextFormatAlign.CENTER),null));
vis.controls.add(new TooltipControl(DataSprite, null,
function(evt:TooltipEvent):void {
var d:DataSprite = evt.node;
TextSprite(evt.tooltip).htmlText = Strings.format(_tipText, d.props.name, d.props.value);
}
));
init();
}
}
public static function createNodes(n:uint):Data {
var g:Data = new Data();
for (var i:uint=0; i < n; i++) {
var node:NodeSprite = g.addNode();
node.data.label = String(i);
}
return g;
}
public function set toolTipFormat(value : String) : void {
_tipText = value;
}
private var _tipText:String = "<b>Label</b>: {0}<br/><b>Value</b>: {1}";
private var vis:Visualization;
private var os:OperatorSwitch;
private var shape:String = null;
public function init():void {
vis.controls.add(new HoverControl(NodeSprite,
// by default, move highlighted items to front
HoverControl.MOVE_AND_RETURN,
// highlight node border on mouse over
function(e:SelectionEvent):void {
e.node.lineWidth = 10;
e.node.lineColor = 0x88ff0000;
},
// remove highlight on mouse out
function(e:SelectionEvent):void {
e.node.lineWidth = 4;
e.node.lineColor = _nodeDefaultFormat.nodes.lineColor;
}));
vis.controls.add(_nodeDefaultFormat.ctrl);
vis.update();
addChild(vis);
}
public function resize():void
{
if (vis) {
vis.bounds = bounds;
vis.update();
}
}
}
}
And here is an application example of what to use it in flex
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
minWidth="955" minHeight="600" creationComplete="init(event)" layout="vertical"
verticalAlign="middle">
<mx:Script>
<![CDATA[
import classes.PackedBubblesChart;
import mx.events.FlexEvent;
import mx.events.ResizeEvent;
protected var companies : Array = [];
protected var otherCompanies : Array = [];
protected var bubbleChart : PackedBubblesChart = new PackedBubblesChart();
protected function init(event:FlexEvent):void {
companies.push({company_name:"Sunray Management Group", count:92});
companies.push({company_name:"Chevron", count:145});
companies.push({company_name:"Nabors", count:35});
companies.push({company_name:"Milicom", count:23});
companies.push({company_name:"gNostos", count:200});
companies.push({company_name:"Cisco", count:43});
otherCompanies.push({company_name:"Chevron", count:145});
otherCompanies.push({company_name:"Nabors", count:35});
otherCompanies.push({company_name:"Milicom", count:23});
otherCompanies.push({company_name:"gNostos", count:200});
companies.push({company_name:"Sunray Management Group", count:92});
companies.push({company_name:"Chevron", count:145});
companies.push({company_name:"Nabors", count:35});
companies.push({company_name:"Milicom", count:23});
companies.push({company_name:"gNostos", count:200});
companies.push({company_name:"Cisco", count:43});
otherCompanies.push({company_name:"Chevron", count:145});
otherCompanies.push({company_name:"Nabors", count:35});
otherCompanies.push({company_name:"Milicom", count:23});
otherCompanies.push({company_name:"gNostos", count:200});
companies.push({company_name:"Sunray Management Group", count:92});
companies.push({company_name:"Chevron", count:145});
companies.push({company_name:"Nabors", count:35});
companies.push({company_name:"Milicom", count:23});
companies.push({company_name:"gNostos", count:200});
companies.push({company_name:"Cisco", count:43});
otherCompanies.push({company_name:"Chevron", count:145});
otherCompanies.push({company_name:"Nabors", count:35});
otherCompanies.push({company_name:"Milicom", count:23});
otherCompanies.push({company_name:"gNostos", count:200});
companies.push({company_name:"Sunray Management Group", count:92});
companies.push({company_name:"Chevron", count:145});
companies.push({company_name:"Nabors", count:35});
companies.push({company_name:"Milicom", count:23});
companies.push({company_name:"gNostos", count:200});
companies.push({company_name:"Cisco", count:43});
otherCompanies.push({company_name:"Chevron", count:145});
otherCompanies.push({company_name:"Nabors", count:35});
otherCompanies.push({company_name:"Milicom", count:23});
otherCompanies.push({company_name:"gNostos", count:200});
bubbleChart.labelField = "company_name";
bubbleChart.valueField = "count";
bubbleChart.toolTipFormat = "<b>Company</b>: {0}<br/><b>Count</b>: {1}";
bubbleChart.dataProvider = companies;
canvas.addChild(bubbleChart);
}
protected function button_clickHandler(event:MouseEvent):void {
if(bubbleChart.dataProvider == companies) bubbleChart.dataProvider = otherCompanies;
else bubbleChart.dataProvider = companies;
}
]]>
</mx:Script>
<mx:Canvas id="canvas" width="100%" height="100%">
</mx:Canvas>
<mx:Button label="New data provider" click="button_clickHandler(event)"/>
</mx:Application>
Well, I answer my own question because I think it could be useful for other people.
Sorry for my english.
this was the result... Ah, Beautyful. Thanks to Flare people.
Hai i want create a full screen mode ,so i used this link http://blog.flexexamples.com/2007/08/07/creating-full-screen-flex-applications/.But i cannot create a full screen mode.anybody kindly help me.
<mx:Script>
<![CDATA[
import mx.effects.easing.*;
import mx.effects.Fade;
import mx.effects.Rotate;
import mx.controls.Alert;
private var fade:Fade;
private var rotate:Rotate;
private function init():void {
// Fade effect
fade = new Fade();
fade.duration=9500;
// Rotate effect
Alert.show("Text Copied!", "Alert Box", Alert.OK);
stage.displayState=StageDisplayState.FULL_SCREEN;
img.setStyle("showEffect", fade);
}
]]>
</mx:Script>
error
The stage property is still null when the object is initialized. So you can't call
stage.displayState = StageDisplayState.FULL_SCREEN;
at the init() method.
You should call that when the object is added to the stage.
private function init():void {
// ...
this.addEventListener(Event.ADDED_TO_STAGE, addedToStage);
}
function addedToStage(e:Event) {
stage.displayState = StageDisplayState.FULL_SCREEN;
}
Or you can do as in the link you posted:
private function init():void {
// ...
Application.application.stage.displayState = StageDisplayState.FULL_SCREEN;
}
Another possibility for the error is that img is null too. So check that it is already created before using it:
private function init():void {
// ...
if (img) {
img.setStyle("showEffect", fade);
} else {
trace("img is null.");
}
}
I've been trying to get FXG to work in my Flex app, it works and renders fine but what I'm trying to accomplish is a sort of a gallery with data about the images in a database. I used to be able to use <s:Image source=/path/{variable_name}> but now I have to import the FXG files and can't use <s:Image> anymore. Here I can display a static FXG image:
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fxg="assets.fxg.*"
tabBarVisible="false" title="{data.name}">
<fxg:megapicture001 x="118" y="27" width="338" height="519"/>
<s:Label x="78" y="43" text="{data.name}"/>
<s:navigationContent>
<s:Button icon="#Embed('assets/home.png')" click="navigator.popView()"/>
</s:navigationContent>
</s:View>
Trying to do <fxg:{data.picturename} /> blows up.
You can't import and use the FXG elements stand alone since they aren't display objects. My take was to wrap them in a UIComponent container. This class will probably end up as part of the Flextras Mobile Component set in our next update sometime early next year most likely:
package com.dotcomit.utils
{
import flash.display.DisplayObject;
import flash.display.Sprite;
import mx.core.UIComponent;
public class FXGImage extends UIComponent
{
public function FXGImage(source:Class = null)
{
if(source){
this.source = source;
}
super();
}
// this will tell us the class we want to use for the display
// most likely an fxgClass
private var _source : Class;
protected var sourceChanged :Boolean = true;
public function get source():Class
{
return _source;
}
public function set source(value:Class):void
{
_source = value;
sourceChanged = true;
this.commitProperties();
}
public var imageInstance : DisplayObject;
// if you want to offset the position of the X and Y values in the
public var XOffset :int = 0;
public var YOffset :int = 0;
// if you want to offset the position of the X and Y values in the
public var heightOffset :int = 0;
public var widthOffset :int = 0;
override protected function createChildren():void{
super.createChildren();
if(this.sourceChanged){
if(this.imageInstance){
this.removeChild(this.imageInstance);
this.imageInstance = null;
}
if(this.source){
this.imageInstance = new source();
this.imageInstance.x = 0 + XOffset;
this.imageInstance.y = 0 + YOffset;
this.addChild(this.imageInstance);
}
this.sourceChanged = false;
}
}
override protected function commitProperties():void{
super.commitProperties();
if(this.sourceChanged){
// if the source changed re-created it; which is done in createChildren();
this.createChildren();
}
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
super.updateDisplayList(unscaledWidth, unscaledHeight);
if(unscaledHeight != 0){
this.imageInstance.height = unscaledHeight + this.heightOffset;
}
if(unscaledWidth != 0){
this.imageInstance.width = unscaledWidth + this.widthOffset;
}
}
}
}
You can use it something like this:
<utils:FXGImage id="fxgImage" source="assets.images.mainMenu.MainMenuBackground" height="100%" width="100%" />
<fx:Script>
<![CDATA[
import mx.controls.*;
import mx.controls.TextInput;
import mx.events.ListEvent;
public function init():void
{
for(var i:int=0;i<5;i++)
{
var txtbox:TextInput = new TextInput();
txtbox.id = "text"+i;
myHBox.addChild(txtbox);
}
}
public function getVal():void
{
}
]]>
</fx:Script>
<mx:HBox id="myHBox" width="100%" height="100%">
<mx:Button label="Get Value" click="getVal()"/>
</mx:HBox>
I have implemented this one. I am getting 5 textboxes with empty value, if i entered some value in each textbox then, i want to get specific 3rd textbox value wen some event trigger. so how i can i make. since am new to flex. Pls give me solutions. Thanks in advance.
Why don't you just store the values in its own data structure?
<fx:Script>
<![CDATA[
import mx.controls.*;
import mx.controls.TextInput;
import mx.events.ListEvent;
private var inputs:Vector.<TextInput> = new Vector.<TextInput>();
public function init():void
{
for(var i:uint = 0; i<5; i++)
{
var txtbox:TextInput = new TextInput();
inputs.push(txtbox);
myHBox.addChild(txtbox);
}
}
public function getVal():void
{
var value:String;
for(var i:uint = 0, len:uint = inputs.length; i<len; i++)
{
value += inputs[i].text + ' ';
}
trace(value);
}
]]>
</fx:Script>
<mx:HBox id="myHBox" width="100%" height="100%">
<mx:Button label="Get Value" click="getVal()"/>
</mx:HBox>
Also, if this is a new project, why are you using Flex 3?
Your question is not all too clear, but if I understand correctly,
Try this:
public function init():void
{
for(var i:int=0;i<5;i++)
{
var txtbox:TextInput = new TextInput();
//txtbox.id = "text"+i;
txtbox.name = "text"+i;
txtbox.addEventListener(Event.CHANGE,onChange);
myHBox.addChild(txtbox);
}
}
private function onChange(event:Event):void{
Alert.show(TextInput(event.target).text,TextInput(event.target).name + " Changed");
}
public function getVal():void
{
Alert.show(TextInput(myHBox.getChildByName("text3")).text,"Value");
}
cheers
I can take snapshot of a component. But the problem is the component is lil bigger with scroll bars. The saved image has scrollbars (only the visible area is getting saved). What i need is I want the entire component to be saved as an image.
This exact functionality is available while we print the component using FlexPrintJob, where by setting the FlexPrintJobScaleType.NONE.
But here in my case i want it to be saved using ImageSnapShot ( not thru FlexPrintJob ).
Thanks Advance,
Sriss
I thought I knew how to do this, but there seem to be lots of awkward issues. I got it working but it's not nice. :-( Maybe you can improve on it.
Here's the code for an example application. And below is the code for the MyCanvas class. When you click the button an image of the Canvas container but without scrollbars should be drawn.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:my="*">
<mx:Script><![CDATA[
import flash.display.BitmapData;
import flash.events.Event;
import mx.containers.Canvas;
import mx.graphics.ImageSnapshot;
import flash.geom.Matrix;
import mx.core.ScrollPolicy;
public function onclick():void
{
var bitmapData:BitmapData = ImageSnapshot.captureBitmapData(canvas);
canvas.addEventListener("BitMapReady", onBitMapReady);
canvas.horizontalScrollPolicy = ScrollPolicy.OFF;
canvas.CreateBitMapData();
}
private function onBitMapReady(e:Event):void
{
DrawBitmapDataAt(canvas.bitMapData, 100, 100);
canvas.removeEventListener("BitMapReady", onBitMapReady);
canvas.horizontalScrollPolicy = ScrollPolicy.AUTO;
}
private function DrawBitmapDataAt(bitmapData:BitmapData,x:int,y:int):void
{
var matrix:Matrix = new Matrix();
matrix.tx = x;
matrix.ty = y;
box.graphics.lineStyle(0,0,0);
box.graphics.beginBitmapFill(bitmapData, matrix, false);
box.graphics.drawRect(x,y,bitmapData.width,bitmapData.height);
}
]]></mx:Script>
<mx:Box id="box">
<my:MyCanvas width="50" height="50" backgroundColor="white" id="canvas">
<mx:Button label="Hello" click="onclick()" />
</my:MyCanvas>
</mx:Box>
</mx:Application>
MyCanvas class:
package
{
import flash.events.Event;
import flash.events.TimerEvent;
import mx.containers.Canvas;
import flash.display.BitmapData;
import mx.core.ScrollPolicy;
import mx.graphics.ImageSnapshot;
import flash.utils.Timer;
public class MyCanvas extends Canvas
{
public var bitMapData:BitmapData;
private var creatingBitMap:Boolean = false;
private var timer:Timer;
public function CreateBitMapData():void
{
this.horizontalScrollPolicy = ScrollPolicy.OFF;
creatingBitMap = true;
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
if (creatingBitMap == true && this.horizontalScrollBar == null)
{
bitMapData = ImageSnapshot.captureBitmapData(this);
this.dispatchEvent(new Event("BitMapReady"));
creatingBitMap = false;
timer = new Timer(10);
timer.addEventListener(TimerEvent.TIMER, onTimer);
this.width += 1;
timer.start();
}
}
private function onTimer(e:TimerEvent):void
{
this.width -= 1;
trace("timer");
timer.removeEventListener(TimerEvent.TIMER, onTimer);
timer.stop();
}
}
}