Flex Examples
I’ve seen this come up on a few lists, and it is something I’ve struggled with, so I thought I’d do a brief post on it. Curious Flexers ask “How do I create charts in Flex 3?” (or “How do I use the AdvancedDataGrid in Flex 3?” also comes up).
Well, the answer is you have to download the public Flex Builder beta from http://labs.adobe.com/ and manually add the appropriate SWC to the compiler arguments. In earlier versions of Flex Builder, the charting components were in a file named “charts.swc” (see “C:\Program Files\Adobe\Flex Builder 3\sdks\2.0.1\frameworks\libs\”, for example) but in Flex Builder 3 the file is now named “datavisualization.swc” and it lives in “C:\Program Files\Adobe\Flex Builder 3\sdks\moxie\frameworks\libs\” (as of the Adobe Labs public beta 1, this path may change in future releases).
Anyways, long story short, the easiest way I’ve found to create a Flex 3 application that uses charts is to create a new Flex 3 project, set the compiler to “Flex Moxie M2″ (the default that came with the Adobe Labs Flex Builder public beta 1 — it seems my newer nightly build has some conflicts), and then add the “datavisualization.swc” into the Flex project’s library path. How do you do that, you may be asking yourself? Well, right-click on your project in Flex Builder and select “Properties” from the context menu. Next, select the “Flex Build Path” item from the list on the left, then click on the “Library path” tab. Click the “Add SWC” button, and navigate to “C:/Program Files/Adobe/Flex Builder 3/sdks/moxie/frameworks/libs/datavisualization.swc” and click “Open”, then “OK”. Click OK again to dismiss the project properties dialog box and return to the Flex Builder workspace. Now, you should be fine to create a charting or AdvancedDataGrid component application. Whew!
And just to prove that this little “Flexperiment” works, the following example creates a simple HLOC chart (High Low Open Close) which plots the historical Adobe stock price for the month of August 2007.
Full code after the jump.
<?xml version="1.0"?>
<!-- http://blog.flexexamples.com/2007/08/27/charting-in-flex-builder-3-public-beta-1-edition/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
[Bindable]
[Embed(source='assets/money.png')]
private var MoneyIcon:Class;
]]>
</mx:Script>
<mx:XML id="quotesXML" source="adbe.xml" format="e4x" />
<mx:XMLListCollection id="adbe" source="{quotesXML.quote}" />
<mx:String id="ADBE_YAHOO">http://finance.yahoo.com/q?d=t&s=ADBE</mx:String>
<mx:ApplicationControlBar dock="true">
<mx:LinkButton icon="{MoneyIcon}"
label="ADBE"
click="navigateToURL(new URLRequest(ADBE_YAHOO))"
fontSize="14"
fontWeight="bold" />
</mx:ApplicationControlBar>
<mx:VBox backgroundColor="white" width="100%" height="100%">
<mx:HLOCChart id="hlocChart"
showDataTips="true"
dataProvider="{adbe}"
width="100%"
height="100%">
<!-- vertical axis -->
<mx:verticalAxis>
<mx:LinearAxis baseAtZero="false" />
</mx:verticalAxis>
<!-- horizontal axis -->
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="@date" title="Date"/>
</mx:horizontalAxis>
<!-- series -->
<mx:series>
<mx:HLOCSeries id="series1"
highField="@high"
lowField="@low"
openField="@open"
closeField="@close"/>
</mx:series>
</mx:HLOCChart>
</mx:VBox>
</mx:Application>
View source is enabled in the following example.
Note that the “datavisualization.swc” file is currently only available in the Adobe Flex Builder 3 public beta, and not in the nightly SDK builds. For more information, see the “Latest datavisualization.swc?” thread in the Adobe Flex Builder 3 Labs Forums.
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
I am trying to create a page with some charts and the page layout is like this:
VBOX->4 HDividedBoxes
each Hdividedbox conatins two panels each containing a chart. The seems to be an option to rotate labels by using an option ‘rotation’ in
but this seems to work when I have a single chart on a page but with my page layout it doesn’t work!
Also, I am trying to add a label to my vertical axis and it seems that some font embeddign needs to be done to be able to do that but again its not working in my page layout.
Code snippet for one of my charts is as follows:
Any help is greatly appreciated!
Oops!!it dint pick up my code snippets!How do I add that
sm,
you may have to replace all the < characters with < before you post. Or maybe just switch the “<” with a “[” character. Or, you can try adding a <pre /> block around the code.
Sorry, it can be a pretty weird blog template at times.
Peter
Thanks..this is my code snippet: The ‘rotation’ attribute doesnt seem to work here:
[mx:LineChart id="chart1"
dataProvider="{srv1.lastResult.data}" height="100%" showDataTips="true" width="100%" fontFamily="Verdana" fontSize="13"]
[mx:horizontalAxis]
[mx:CategoryAxis categoryField="time" title="Time"/]
[/mx:horizontalAxis]
[mx:backgroundElements]
[mx:GridLines direction="both"]
[/mx:GridLines]
[/mx:backgroundElements]
[mx:horizontalAxisRenderer]
[mx:AxisRenderer useHandCursor="true" fontSize="10" rotation="90"/]
[/mx:horizontalAxisRenderer]
[mx:verticalAxisRenderer]
[mx:AxisRenderer useHandCursor="true" fontSize="10"/]
[/mx:verticalAxisRenderer]
[mx:series]
[mx:LineSeries yField="number" displayName="Number" name="Name"]
[mx:lineStroke]
[mx:Stroke
color="#000000" weight="1" joints="bevel" /]
[/mx:lineStroke]
[/mx:LineSeries]
[/mx:series]
[/mx:LineChart]
I haven’t played with charts too much, but is the font embedded? You can only rotate text/labels if you are using an embedded font.
I figured out what was causing the problem. I was embedding the font but overriding it by specifying fontFamily=”verdana” in the code above in the [mx:Linechart] tag. I removed it and labels are gtting rotated but I still don’t know how to add the vertical axis title!
Hi Peter:
I’m a newbie to flex and having major trouble in figuring how to implement a horizontal scroll bar in the candlestick chart (pretty want to scroll in line and plot chart as i want o overlay it over the candlestick chart). I have followed a tutorial to in using external interface to get data from javascript.
Without the scroll and (maybe autoscroll) the graphs clutters up.
Help is greatly appreciated.
I am attempting to get your example running, but there is an error int the mxml file: “Problem finding external XML:adbe.xml”.
jnorton,
Ah, you’ll need to right-click the SWF and choose “View source” and then get the XML file from there. Just save it to the same directory as the MXML and you should be good to go.
Peter
Hi all.
I have some problems while using Flex Builder 3 with LiveCycle Data Service ES 251.
I want to use tag in my a mxml file. So I added datavisualization.swc lib in %FLEX_BUILDER_3_HOME%\sdks\3.0.0\frameworks\libs to %LCDS_HOME%\jrun4\servers\default\MyProject\WEB-INF\flex\libs.
I had some errors following:
————-
!ENTRY com.adobe.flexbuilder.project 4 43 2008-02-26 14:14:32.656
!MESSAGE Uncaught exception in compiler
!STACK 0
java.lang.NoSuchMethodError: flex.license.License.(Ljava/util/Map;Ljava/lang/String;Lflex/license/Logger;)V
at flex2.tools.oem.Application.recompile(Application.java:688)
at flex2.tools.oem.Application.compile(Application.java:530)
at flex2.tools.flexbuilder.BuilderApplication.compile(BuilderApplication.java:224)
at com.adobe.flexbuilder.multisdk.compiler.internal.ASApplicationBuilder$MyBuilder.compileOnly(ASApplicationBuilder.java:241)
at com.adobe.flexbuilder.multisdk.compiler.internal.ASApplicationBuilder.build(ASApplicationBuilder.java:140)
at com.adobe.flexbuilder.multisdk.compiler.internal.ASBuilder.build(ASBuilder.java:135)
at com.adobe.flexbuilder.multisdk.compiler.internal.ASItemBuilder.build(ASItemBuilder.java:70)
at com.adobe.flexbuilder.project.compiler.internal.FlexProjectBuilder.buildItem(FlexProjectBuilder.java:336)
at com.adobe.flexbuilder.project.compiler.internal.FlexProjectBuilder.build(FlexProjectBuilder.java:178)
at com.adobe.flexbuilder.project.compiler.internal.FlexIncrementalBuilder.build(FlexIncrementalBuilder.java:117)
at org.eclipse.core.internal.events.BuildManager$2.run(BuildManager.java:624)
at org.eclipse.core.runtime.SafeRunner.run(SafeRunner.java:37)
at org.eclipse.core.internal.events.BuildManager.basicBuild(BuildManager.java:166)
at org.eclipse.core.internal.events.BuildManager.basicBuild(BuildManager.java:197)
at org.eclipse.core.internal.events.BuildManager$1.run(BuildManager.java:246)
at org.eclipse.core.runtime.SafeRunner.run(SafeRunner.java:37)
at org.eclipse.core.internal.events.BuildManager.basicBuild(BuildManager.java:249)
at org.eclipse.core.internal.events.BuildManager.basicBuildLoop(BuildManager.java:308)
at org.eclipse.core.internal.events.BuildManager.build(BuildManager.java:334)
at org.eclipse.core.internal.events.AutoBuildJob.doBuild(AutoBuildJob.java:137)
at org.eclipse.core.internal.events.AutoBuildJob.run(AutoBuildJob.java:235)
at org.eclipse.core.internal.jobs.Worker.run(Worker.java:55)
Please help me. Thank you very much
I got one for you, I just posted this over at Perer Ent’s blog as well.
Can I select a cell in an advanceddatagrid control on roll-over? I haven’t been able to find a way to get the row and column indices of a cell without actually selecting it.
What I’m trying to achieve is multiple selections in the ADG by just clicking and dragging a selection. Any help would be appreciated. I’m using a item renderer now but can’t get those damn indices.
Thanks a lot,
One more question (I tried to find the most related post, but this is the best I could come up with).
When I use an Advanced Data Grid inside a repeater and try to do grouping, but gives me the error:
“Unable to generate initialization code within Repeater, due to id or data binding on a component that is not a visual child.”
How can I do this so that is works?
If you need a code sample, I’d be happy to come up with it for you!
Thanks again!
.:Joshua
Joshua,
Unfortunately I haven’t played with the AdvancedDataGrid control yet. Would you mind filing a bug for that (attach reproducible test case, if possible) at http://bugs.adobe.com/flex/ ?
Also, if you post the bug number here, a few of us can vote/subscribe to the issue.
Thanks,
Peter
Okay, I posted it!
Feel free to vote/subscribe. Thanks so much Peter!
https://bugs.adobe.com/jira/browse/FLEXDMV-1813
Also, did you see my other question about styling Accordion headers in a Repeater at:
http://blog.flexexamples.com/2007/10/30/setting-styles-on-individual-flex-accordion-headers/#comment-14207
Thanks again!
Hello.. can anyone help me with the codes, when i click on the button, it will bring me to a blank new page? thanks alot
Hei guys.
Im having a problem with the rotation of labels in my chart. I can choose to put the horizontal axis on the bottom or top of the chart. When i put it on top of the chart and aplly a rotation to the labels the axis title goes inside the chart under the axis. I want it to stay on top of the chart. Does anyone know how to fix this?
thanks
all2easy,
Can you please file a bug at http://bugs.adobe.com/flex/ and post the bug number here so a few of us can vote/subscribe to the issue. Also, if you could attach a code snippet to the bug that would help out a lot.
Thanks,
Peter
Hi,
First of all thank you a lot for this example, but I would like to know how to specify colors depending on the value? for example if I have number 5 I would like color the area representing this number with red.
thank you again :).
Hi All
I am new to Flex and am trying to implement scroll bar on X axis of my line series chart…. I have googled for hours but of no use….
Please tell me how to achieve this or send some tutorial links if possible.
Thanks in advance
Shikha
Hi All,
Hi All,
Hi All, Oops! I see that my posts have been submitted without any data! Anyways i have the same issue like Shikha. I need to put horizontal scrollbars in my linechart. It is populated dynamically based on time, so the labels start getting squeezed after some point of time. If anyone has worked on this please share the code. I could find some codes for achieving the same with barcharts and column charts, but no luck with linechart.
Thanks in advance
Zalak
Hi all!
I see that everyone is posing questions regarding the the scrollbar instead of the horizontal axis. Did anyone seek luck on using scroll bars ? can anyone kindly post me the code??
Thanks in advance!
Bhagyesh