Charting in Flex Builder 3 (public beta 1 edition) at Flex Examples

Aug

Charting in Flex Builder 3 (public beta 1 edition)

By peterd

Categories: Charting Tags: Charting, charts.swc, datavisualization.swc.

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.

View MXML

<?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&amp;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.

17 Responses to “Charting in Flex Builder 3 (public beta 1 edition)”

Feed for this Entry View blog reactions

1 sm Sep 21st, 2007 at 7:09 am

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!
2 sm Sep 21st, 2007 at 7:13 am

Oops!!it dint pick up my code snippets!How do I add that
3 peterd Sep 21st, 2007 at 7:20 am

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
4 sm Sep 21st, 2007 at 8:10 am

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]
5 peterd Sep 21st, 2007 at 8:14 am

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.
6 sm Sep 21st, 2007 at 9:20 am

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!
7 Juan Jan 8th, 2008 at 4:14 pm

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.
8 jnorton Feb 25th, 2008 at 9:14 pm

I am attempting to get your example running, but there is an error int the mxml file: “Problem finding external XML:adbe.xml”.
9 peterd Feb 25th, 2008 at 11:13 pm

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
10 Nguyen Sinh Thanh Feb 25th, 2008 at 11:30 pm

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
11 Jean Alexandre Apr 11th, 2008 at 11:21 am

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,
12 Joshua Jul 17th, 2008 at 10:45 am

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
13 peterd Jul 17th, 2008 at 11:12 am

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
14 Joshua Jul 18th, 2008 at 8:41 am

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!
15 annoymous Jul 19th, 2008 at 5:53 am

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
16 all2easy Aug 18th, 2008 at 9:33 am

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
17 peterd Aug 18th, 2008 at 10:04 am

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