#4 Flex Hack – Add charts to Datagrid without Data Visualization Framework

Posted by Igor Costa on December 2, 2008 – 9:30 pm
Filed under Flex, Flex 3, Flex Beyound basic, Flex Components, Flex Data Visualization Framework, Flex Hacks, Sample Application

By far Flex is great, you pick up an idea and after that becomes a solution. One of the things I really enjoy in Flex is playing with Charts. People here in Brazil always stay shocked with power of Charts and its simplicity to make.

Anyway, Bringing Charts in Flex are such power and looks your App really awesome. This hack today is regarding that thing, simplicity without the Data Visualization Framework aka(Flex Charts).

Also by meaning the real name for that is Gantt Chart like wikipedia says. Which a great colleague of field Andrew Trice dide a good example on how to handle that.[Update] Actually the Dusty explain on the comments that this hack is more micro chart(SparkLine chart) than Gantt Chart.

What is necessary to it?
– Flex 3.0.x SDK or Flex 2.0.x SDK
– Imagination

Anyway, here’s the result of what this hack can do:

How is it done?

Same as Andrew did, but a little simple, I explored the resources of Flex DisplayObject class has and UIComponent has, like draw easy.

Here’s the code for the Hack:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.collections.ArrayCollection;
 
			[Bindable]private var productCollection:ArrayCollection = new ArrayCollection();
			[Bindable]private var product:Object;
 
			private function addProduct():void {
				if(pName.text != '' && pPrice.text != '' && pSold.text != ''){
					product = new Object();
					product.Name = pName.text;
					product.Price = pPrice.text;
					product.Sold = pSold.text;
					productCollection.addItem(product);
				}else{
					Alert.show('Fill out all fields!','Error');
				}
			}
		]]>
	</mx:Script>
 
	<mx:DataGrid  dataProvider="{productCollection}" x="30" y="33" width="486" height="306">
		<mx:columns>
			<mx:DataGridColumn headerText="Product Name" dataField="Name"/>
			<mx:DataGridColumn headerText="Price" dataField="Price"/>
			<mx:DataGridColumn headerText="Sold Itens" dataField="Sold">
					<mx:itemRenderer>
						<mx:Component>
								<mx:HBox horizontalScrollPolicy="off" verticalScrollPolicy="off" width="100%" height="100%">
									<mx:HBox verticalScrollPolicy="off" horizontalScrollPolicy="off" backgroundColor="#a604e9"
										 width="{Number(data.Sold)*0.01}" height="100%"/>
									<mx:Label text="{String(Number(data.Sold)*0.01)}%"/>
								</mx:HBox>
						</mx:Component>
					</mx:itemRenderer>
			</mx:DataGridColumn>
		</mx:columns>
	</mx:DataGrid>
	<mx:Form defaultButton="{addProductBtn}" x="545" y="24">
		<mx:FormItem label="Product Name">
			<mx:TextInput id="pName"/>
		</mx:FormItem>
		<mx:FormItem label="Price">
			<mx:TextInput restrict="[0-9]" id="pPrice"/>
		</mx:FormItem>
		<mx:FormItem label="Sold Itens">
			<mx:TextInput id="pSold" restrict="[0-9]"/>
		</mx:FormItem>
	</mx:Form>
	<mx:Button id="addProductBtn" x="736" y="142" label="Add Product" click="addProduct()"/>
 
</mx:Application>

As you see you can reproduce any kind of hack like that, because the power of itemRender mechanism in Flex is very powerful for data representation. By at the end you see that is not a big deal doing that with your project, and the final result looks awesome.

Playing Effects Too

Here’s same example but now using Effects.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.collections.ArrayCollection;
			import mx.effects.easing.Elastic;
 
			[Bindable]private var productCollection:ArrayCollection = new ArrayCollection();
			[Bindable]private var product:Object;
 
			private function addProduct():void {
				if(pName.text != '' && pPrice.text != '' && pSold.text != ''){
					product = new Object();
					product.Name = pName.text;
					product.Price = pPrice.text;
					product.Sold = pSold.text;
					productCollection.addItem(product);
				}else{
					Alert.show('Fill out all fields!','Error');
				}
			}
		]]>
	</mx:Script>
 
	<mx:DataGrid  dataProvider="{productCollection}" x="30" y="33" width="486" height="306">
		<mx:columns>
			<mx:DataGridColumn headerText="Product Name" dataField="Name"/>
			<mx:DataGridColumn headerText="Price" dataField="Price"/>
			<mx:DataGridColumn headerText="Sold Itens" dataField="Sold">
					<mx:itemRenderer>
						<mx:Component>
								<mx:HBox horizontalScrollPolicy="off" verticalScrollPolicy="off" width="100%" height="100%">
									<mx:Resize duration="1500" target="{_grchart}" id="_eff" widthTo="{Number(data.Sold)*0.01}"/>
									<mx:Script>
										<![CDATA[
											import mx.effects.easing.Back;
										]]>
									</mx:Script>
									<mx:HBox  id="_grchart" creationComplete="_eff.play()" verticalScrollPolicy="off" horizontalScrollPolicy="off" backgroundColor="#a604e9"
										 width="0" height="100%"/>
									<mx:Label text="{String(int(data.Sold)*0.01)}%"/>
								</mx:HBox>
						</mx:Component>
					</mx:itemRenderer>
			</mx:DataGridColumn>
		</mx:columns>
	</mx:DataGrid>
	<mx:Form defaultButton="{addProductBtn}" x="545" y="24">
		<mx:FormItem label="Product Name">
			<mx:TextInput id="pName"/>
		</mx:FormItem>
		<mx:FormItem label="Price">
			<mx:TextInput restrict="[0-9]" id="pPrice"/>
		</mx:FormItem>
		<mx:FormItem label="Sold Itens">
			<mx:TextInput maxChars="4" id="pSold" restrict="[0-9]" width="162"/>
		</mx:FormItem>
	</mx:Form>
	<mx:Button id="addProductBtn" x="736" y="142" label="Add Product" click="addProduct()"/>
</mx:Application>

Permalink|Comments RSS Feed - Post a comment|Trackback URL.

4 Comments

  1. Rafael Nami
    Posted December 2, 2008 at 9:35 pm | Permalink

    Great hack Igor. I didn’t know that you can create powerful data visualization using just DataGrid and HBox :)

    Thanks for sharing this to the community

  2. Dusty
    Posted December 2, 2008 at 10:08 pm | Permalink

    I wouldn’t call your example a Gantt Chart, but rather more in line of a SparkLine/MicroChart… check out these examples, which would fit perfectly in your graph!

    http://19nates.com/2008/11/flex-sparkline-graph/

    http://www.brightpointinc.com/flexdemos/360flex/MicroChartsSample.html

  3. Lee.JoonHa
    Posted December 2, 2008 at 11:45 pm | Permalink

    typo at

  4. Andrew Trice
    Posted December 3, 2008 at 12:13 pm | Permalink

    Thanks for the shout out! :)

    I’ve also got some similar examples that go a few steps further than that gantt example.

    Drawing API-based Chart Renderers (includes gauges, bar charts, etc…):
    http://www.cynergysystems.com/blogs/page/andrewtrice?entry=thinking_outside_of_the_grid

    Degrafa-based Bar Chart Renderers (similar to your post here):
    http://www.insideria.com/2008/03/degrafa-datagrids-visual-displ.html

    Degrafa-based Sparkline Renderers:
    http://www.insideria.com/2008/04/degrafa-data-part-2-the-sparkl.html

2 Trackbacks

  1. By World Of Warcraft сервер RaptoR on March 16, 2009 at 9:12 am

    Все о World Of Warcraft…

    Форум. Все о WoW, бесплатный сервер World of Warcraft: Wrath of the Lich King. UA-IX Играть …

  2. By Просмотр фильмов онлайн, скачать фильмы on March 16, 2009 at 1:19 pm

    Скачать фильмы, смотреть онлайн…

    Просмотр фильмов онлайн, скачать фильмы смотреть онлайн …

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*