Well, the answer is you [...]]]> 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.