Flex Doc Team

All users have access to the Flex 3 SDK source code. You can view the ActionScript source files for classes like Button and DataGrid. The source code is in the frameworks\projects\framework\src directory of your Flex installation. The source code for the data visualization projects does not come pre-installed, however. If you have a Flex Builder Professional license key, you can extract the data visualization source code, which include the charting controls, the AdvancedDataGrid classes, the OLAP classes, and the automation classes. To view your Flex Builder license key, select Manage Flex Licenses from the Help menu.

To extract the data visualization source code, you use the DMV-source.jar file. This file is located in the SDK's lib directory. If you are using Flex Builder, the lib directory is located at {Flex Builder 3}\sdks\3.0.0\lib.

The syntax to extract the data visualization source code is as follows:

> java -jar DMV-source.jar {license-file-location} {output-location}

The first argument is the location of the license.properties file. This file must contain a valid Flex Builder 3 Professional license key. The second parameter is the location that you want the data visualization source code to be extracted to.

If you installed Flex Builder 3 Professional, then the license.properties file is located at the following locations, depending on your operating system:

• Windows: C:\Documents and Settings\All Users\Application Data\Adobe\Flex\
• Mac OS: /Library/Application Support/Adobe/Flex/
• Linux: ~/.adobe/Flex/

The following example extracts the data visualization source code to the c:\temp\dataviz_source directory on Windows:

java -jar c:\Flex Builder 3\sdks\3.0.0\lib\DMV-source.jar 
     "C:\Documents and Settings\All Users\Application Data\Adobe\Flex\" 
     c:\temp\dataviz_source

If you have a valid Flex Builder 3 Professional license key but did not install Flex Builder, then you can create a license.properties file anywhere, and point to it when you use the DMV-source.jar file. The syntax of the license.properties file is as follows:

flexbuilder3={license_key}

Posted by Matthew J. Horn at 01:42 PM | Permalink | Comments (3)

Here's a new example in the charting doc. It shows how someone might use some or all of an HTML page they load via an HTTPService tag as a data provider for their charting component. It includes logic to extract just the data from the target page.

The benefit to this is that if you have a wiki or blog that you can edit via a browser, you can build and update a data page without having to hit a database. The code extracts specially-tagged data from the HTML page, so even if it's part of a larger block of HTML, you can still extract just the data.

One thing to note: The target domain in this example works because it has a crossdomain.xml file. If you want to load a page from your own target domain, you must be sure that your target domain has a crossdomain.xml file in place, and that that policy file lets the domain on which the Flex app is running request data from it.

Here's the running example:

Here's the data page that drives this chart:
http://examples.adobe.com/flex3/exchangingdata/html/dataPage.html

You can download the source MXML file here:
HTMLDataProvider.zip (1KB)

The exact location of the data page is passed into the application as a flashVars property. To change the data page, you only have to edit the HTML wrapper for the SWF file.

In the HTML wrapper, we pass the target HTML page as a param in the <object> tag:

<param name="flashVars" value="dataPage=http://examples.adobe.com/flex3/exchangingdata/html/dataPage.html" />

And again as an attribute of the <embed> tag:

flashVars="dataPage=http://www.shallowpondestates.com/misc/dataPage.html"

Note that you can view the source of this blog entry page to see the complete object/embed tags.

In the Flex app, the data page is read from the Application's application.parameters property:

dataPage = Application.application.parameters.dataPage;

To initially get the page's contents into the Flex app, we use an HTTPService object:

<mx:HTTPService id="serviceInput" 

        resultFormat="text" 

        url="{dataPage}"

    />

To get the HTML in a single string we get the lastResult property of the HTTPService in the ResultEvent handler:

var htmlBlob:String = serviceInput.lastResult.toString();

And to extract just the portion of the data page that we need (the part between the "data starts here" and "data ends here" comments), we use the slice() method:

htmlBlob = htmlBlob.slice( htmlBlob.indexOf("<!-- data starts here -->", 0) + 25, htmlBlob.length );

htmlBlob = htmlBlob.slice( 0, htmlBlob.indexOf("<!-- data ends here -->", 0) );

We then do a couple more passes on the remaining HTML string to replace HTML entities with angle brackets, so that we will end up with well-formed XML:

var tagPattern:RegExp = /<[^<>]*>/g;  

htmlBlob = htmlBlob.replace(tagPattern, "");

			

var ltPattern:RegExp = /&lt;/g;

htmlBlob = htmlBlob.replace(ltPattern, "<");

			

var gtPattern:RegExp = /&gt;/g;

htmlBlob = htmlBlob.replace(gtPattern, ">");

At this point, we just need to pass the XML to the XMLList constructor so that it can be used as a data provider in the chart:

chartData = new XMLList(htmlBlob);

That's it. If you compile and deploy this app, you can use the provided data page, or create your own. If your data page is on the same domain as the application, then you do not need a crossdomain.xml file.

Posted by Matthew J. Horn at 12:19 PM | Permalink | Comments (3)

The Flex 3 beta went out before the charting documentation included the new features. So here is a PDF with all the charting chapters, including the new feature documentation.

Download file (1 MB)

The entire set of charting chapters is included here in one PDF because the organization has changed so much. I added a new chapter and consolidated some sections from other chapters.

New sections:
CHAPTER: Displaying Data and Labels
"Using data labels"
"Using per-item fills"
"Omitting days on a DateTimeAxis" (aka, work-week axis)

--------------------------------------------------
CHAPTER: Formatting Charts
"Positioning the axes"

--------------------------------------------------
CHAPTER: Using Events and Effects in Charts
"Selecting chart items"
"Drawing on chart controls"
"Drilling down into data" (new since 2.0.1, but previously blogged about here)
--------------------------------------------------

The following sections existed before, but have been completely rewritten based on feature changes:

CHAPTER: Chart Types
"Using multiple axes"
"Using multiple data series"

--------------------------------------------------

As always, feedback is welcome.

Posted by Matthew J. Horn at 03:29 PM | Permalink | Comments (3)

One thing the chart documentation lacks is examples of drilling down into data. This is critical for making charts that are interesting and fun to interact with. This blog entry includes two examples of drilling down into data.

---

Example #1

Here's an example that uses the Event object to get a reference to the clicked ColumnSeries. It then drills down into the single ColumnSeries by replacing the chart’s series Array with the single ColumnSeries in the chart. When you click a column again, the chart returns to its original configuration with all ColumnSeries.

---

Example #2

The following example is similar to the previous example in that it drills down into the assets of a fictional person’s net worth. In this case, though, it shows the value of the asset classes for the clicked-on month in the drill-down view rather than the change over time of a particular asset class.

This example uses the HitData object’s item property to access the values of the current data provider. By building an Array of objects with the newly-discovered data, the chart is able to drill down into the series without making calls to any external services.

---

More Info

You can download the documentation
and the source code for these examples.

Of course, these examples are nearly as exciting as what is going on over at Quietly Scheming, but hopefully they will get you started.

Posted by Matthew J. Horn at 10:26 AM | Permalink | Comments (4)