As part of a small series that works through building a custom component, from demonstrating very basic functionality to more advanced and detailed property sheet integrations, I wanted to start with a very familiar and simple component concept to get started: A custom Flex-based column chart.

We’ll start by setting up the Flex component, its charting data provider, a few basic styles, and a very basic custom property sheet integration. You can find all of the (xlx, xlp, Flex source) source code here…

We’re working with an MXML-based component to illustrate a rapid way to construct custom charts and also because I prefer markup to pure ActionScript coding for readability and ease of use. I also think that a lot of attendees learning about the SDK for the first time at the BOBJ conference in October looked rightfully frightened seeing pure AS components and 1000’s of lines of code for 1 simple component. Here, we’ve used <100 lines of code for our chart, mostly markup, and we have achieved an impressively rapid custom column chart as the result. Creating this entire project (chart, property sheet, Xcelsius Packager) took under an hour.

We’ll keep posting updated source code as this component evolves through the series, including in-line source code comments. Please note* Use the code however you’d like. However, it will be up to you to ensure its stability and is not recommended for a production environment, more as a jump start to inspire confidence and ideas for injecting easy and free custom charts into your Xcelsius projects.

To use the component in Xcelsius, bind the data property to a single row of data, as we only have 1 series at this stage. Then, select your fill type and you’re all set.

**I took the property sheet directly from the BOBJ SDK examples and quickly modified it to meet these requirements. Try it for yourself and see what else you can add on if you’d like.

**Also, remember to set up this project using the SDK fundamentals (i.e. setting the compiler to 2.0.1 HF3, referencing the Xcelsius SDK swc, etc.)

**If anyone has a custom chart they’d like to see, please feel free to comment.

Next, we’ll look at adding multiple series, custom tooltips, number formatting and some additional styling controls.

I often receive the question “I want to do xyz with a Flex custom component integration in Xcelsius 2008, is that possible?”. Nearly every time, my answer is yes – as long as you’re developing using the proper version of Flex, you can pretty much do anything you want with the following general guidelines in mind.

General component plausibility checklist:

• You’re using the proper version of the Flex SDK, which currently happens to be 2.0.1 for Xcelsius 2008
• You’re not trying to reference, modify, or inherit from Xcelsius objects in any way
• You’re not trying to reference, modify or inherit any Xcelsius styling or themes
• You’re familiar with Flex and Flash security and your component doesn’t violate security measures (must follow standard security considerations) that are in place in either one of those layers.
• Always check with known issues and the latest SDK documentation

If you follow the general rules above and the guidelines that the Xcelsius SDK has set forth, you should be clear for takeoff and can start exploring options, like the following examples.
(more…)