Friday, September 28, 2007

Displaying charts in AdvancedDataGrid

Using charts as itemRenderers in DG and ADG is easy. Find the sample files here The sample uses a LineChart as itemRenderer for the third column and a PieChart in the child area. The column-spanning option available through RendererProviders is used to make the PieChart occupy the whole row. The sample shows use of HierarchicalData but even without that All chart types can be used as itemRenderes.

15 comments:

njpage said...

Very nice and thanks for posting. I've been looking for this for a while.

I'm working on a project though in which I would like a linkbutton renderer in one column and plain text in the other both on the same columnIndex. Thought I had it correct but I'm getting text showing in both columns, no linkButton. Any ideas by chance?

Sreenivas said...

Without seeing the actual code it is difficult to guess. If you have the itemRenderer properly it should just appear as required.

njpage said...

Thanks for replying Screenivas. Here's my code:

mx:Script
![CDATA[
import mx.collections.ArrayCollection;

[Bindable]
private var onlineEveningsData:ArrayCollection = new ArrayCollection([
{Type:"ONLINE PROGRAMS",
ProgramName:"Program 1", CareerFieldName:"Career Field 1"},
{Type:"ONLINE PROGRAMS",
ProgramName:"Program 2", CareerFieldName:"Career Field 2"},
{Type:"ONLINE PROGRAMS",
ProgramName:"Program 3", CareerFieldName:"Career Field 3"},
{Type:"ONLINE PROGRAMS",
ProgramName:"Program 4", CareerFieldName:"Career Field 4"},
{Type:"ONLINE PROGRAMS",
ProgramName:"Program 5", CareerFieldName:"Career Field 5"},
{Type:"ONLINE PROGRAMS",
ProgramName:"Program 6", CareerFieldName:"Career Field 6"},
{Type:"ONLINE PROGRAMS",
ProgramName:"Program 7", CareerFieldName:"Career Field 7"},
{Type:"ONLINE PROGRAMS",
ProgramName:"Program 8", CareerFieldName:"Career Field 8"},
{Type:"ONLINE PROGRAMS",
ProgramName:"Program 9", CareerFieldName:"Career Field 9"},
{Type:"ONLINE PROGRAMS",
ProgramName:"Program 10", CareerFieldName:"Career Field 10"}
]);

mx:AdvancedDataGrid
width="752"
height="373"
x="0"
y="93"
buttonMode="true"
initialize="groupCol.refresh()"
sortableColumns="false"
dragEnabled="false"
draggableColumns="false"

mx:dataProvider

mx:GroupingCollection
id="groupCol"
source="{onlineEveningsData}"

mx:grouping

mx:Grouping

mx:GroupingField
name="Type"

mx:Grouping

mx:grouping

mx:GroupingCollection

mx:dataProvider

mx:rendererProviders

mx:AdvancedDataGridRendererProvider
columnIndex="1"
renderer="com.scc.catalog.view.renderers.TextRenderer"
columnSpan="1"

mx:AdvancedDataGridRendererProvider
columnIndex="1"
renderer="com.scc.catalog.view.renderers.ProgramRenderer"
columnSpan="1"

mx:rendererProviders

mx:columns

mx:AdvancedDataGridColumn
dataField="ProgramName"
headerText="Progam Name"

mx:AdvancedDataGridColumn
dataField="CareerFieldName"
headerText="Career Field"

mx:columns

mx:AdvancedDataGrid

njpage said...

The ProgramRenderer is a LinkButton component and the TextRenderer is a Text component.

njpage said...

Nevermind Screenivas. Got it figured out. Thanks for your time.

DEVSACHIN said...

Hi sreeni sir,
How can i initialize a variable of custom item render/editor from outside(mxml or AS file)?
I want to set some values of an itemRenderer from my application.
Please let me know if it is posible

Thanks

Sreenivas said...

I can't imagine what you trying achieve by setting values on your itemRenderers from you application.

If they are one time values which are know by the time itemRenderers are created you can create a class which implements IFactory and pass it to the itemRenderer property.

Take a look at the help of IFactory and itemRenderer property of the control you are using for more information.

DEVSACHIN said...

Thx for quick reply,
Actually i refer sameer bhatts/s post http://techrays.wordpress.com/2008/04/07/advanced-datagrid-as-an-item-renderer-within-an-advanced-datagrid/#comment-1170 To use datagrid as an itemRenderer in datagrid..i am calling web services to create column and assign data to the GRID..so i need to initialize few values to call webservices from DataGridItemRenderer.

DEVSACHIN said...

It works now... :)
i found sample code at
http://livedocs.adobe.com/flex/2/langref/mx/core/ClassFactory.html

Thanks

DEVSACHIN said...

It is working perfectly..Thanks alot to u to give a perfect solution.
code is:-
var renderer1:ClassFactory = new ClassFactory(DetailGrid);
var input:Object= new Object();
input["interName"] = "Sreeni";
input["gridNm"] = "SCB";
renderer1.properties = input;
adgRendererProvider.renderer =

renderer1;

*interName and gridNm is public variable of DetailGrid(item renderer)

Olga said...

Hi,
I am trying to create an AdvancedDataGridItemRenderer which displays different UI components in the SAME column, depending on data type in the RUNTIME.
For example, a have a "value" column and the value can be either a date, or some text, or combobox, etc.., and all those values are in the same column. I receive all this data at runtime.
Thanks,
Ada

aditya said...

Hi Sreenivas I am trying to create an AdvancedDataGridItemRenderer which displays different UI components in the SAME column, depending on data type in the RUNTIME.
For example, I have a "type" attribute in the data and depending on the value it should render custom renderer or default renderer..I also want to drag and drop the items within the ADG, doing so my renderer display becomes improper.I am stuck with this for a long time, can you help me with this?

Sreenivas said...

Without seeing sample code with the problem I cannot help much.

Kaushal Shah said...

Srinivas, this blog is old but I hope you get this. How can I create the same application using database tables. I have two tables, patients and visits connected via 'patient_id'. I want patients to be the AdvancedDatagrid and visits to be in a datagrid inside the exandable section. I can't seem to figure out how to return the database call in the format required:

private var dp:Array= [
{ name:"Krishna", total:100, date:"01-Jan-2007",

children:[ { detail:[{amount:5},{amount:10},{amount:20},{amount:45}, {amount:30} ]} ] },


Thanks,

Paul Smith said...

Hi Sreenivas! Thanks for sharing! It is now working perfectly. Our custom essay writing service is here to help you with any issue pertaining to content writing! Best of luck to you!