by Evan DeLodder | 
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.
Current Highest Rated Post
- Video: Show Chart Values without Hovering
(5.00 out of 5) - Pictures from the Xcelsius Community Event at GBN 2009 (5.00 out of 5)
Subscribe
Search
Our Contributors
Sponsors
Recent Videos
Consulting & Training
Twitter
Blog Roll
Other places you can find us
Categories
Tags
About Us
An hour to create a bar chart? There’s definitely a disconnect between functionality & real-life applicability. I created about 10 graphs on an iPhone in about 10 minutes with Roambi.com. How I wish Xcelsius was this intuitive. Just venting, sorry.
Thanks for your comment, HD.
I think that the difference you’re seeing in this particular post, is that to build an Xcelsius custom component, you need to build it using actual code that runs against the Xcelsius SDK as opposed to being able to leverage a WYSIWYG-type drag and drop interface for extending already-existent charts.
However, with that said, using the pre-packaged Xcelsius charts in the Xcelsius designer to connect to data and alter the behavior and appearance of any given chart, lends itself to the exact kind of rapid setup and flexibility that you allude to.
Roambi is a superb application, but I think we would be hard pressed to draw any kind of reasonable comparison between the respective platforms. Apples and oranges : Mobile and Desktop .
-Evan
Hi Evan,
I have been trying to build up a component today myself. I imported the project and rebuilt it but when I got to the Xcelsius add-on packager I got an error.
I thought I would try this again, this time just rebuilding the xlx from the package downloaded. I changed the paths to my local paths and rebuilt. I got the same error, see below
Is there any paths etc that I need to set before packaging.
Regards
Alan
System.BadImageFormatException: An attempt was made to load a program with an incorrect format. (Exception from HRESULT: 0×8007000B)
at Packager.Util.OpenArchive(String filename, Int32 mode)
at Packager.Package.generateXLX(String filename)
at Packager.MainForm.buildToolStripButton_Click(Object sender, EventArgs e)
at System.Windows.Forms.ToolStripItem.RaiseEvent(Object key, EventArgs e)
at System.Windows.Forms.ToolStripItem.HandleClick(EventArgs e)
at System.Windows.Forms.ToolStripItem.HandleMouseUp(MouseEventArgs e)
at System.Windows.Forms.ToolStrip.OnMouseUp(MouseEventArgs mea)
at System.Windows.Forms.Control.WmMouseUp(Message& m, MouseButtons button, Int32 clicks)
at System.Windows.Forms.Control.WndProc(Message& m)
at System.Windows.Forms.ToolStrip.WndProc(Message& m)
at System.Windows.Forms.Control.ControlNativeWindow.WndProc(Message& m)
at System.Windows.Forms.NativeWindow.Callback(IntPtr hWnd, Int32 msg, IntPtr wparam, IntPtr lparam)
Hello Alan,
Thanks for your post.
What Operating System are you running? The reason I ask is that I’m on Vista 64 bit and unfortunately get the exact same error, which forces me to build my packages on another 32 bit/compatible system. The packager application apparently only supports 32 bit Operating Systems at this point.
-Evan
Hi Evan,
Thats for the response. I am on XP x64. I have just got it working on a 32 bit VMware
Alan
Hello,
I’m really new in xcelsius but I need to create some flex object and after install into xcelsius, I downloaded your project but I don’t have instructions to say what is the structure in flex project, and how to put the swf object into the xcelsius packager.
Please tell me if you had some pdf’s that explain that.
My email is [Email Removed]
Thanks so much
Hello Jose,
The documentation and guide pdf documents contained in the SDK directory, provided by SAP, should get you going in the right direction. Usually they are located in a path similar to (assuming you downloaded and installed the SDK): C:\Program Files\Business Objects\Xcelsius\SDK\documentation.
They’re fairly short but contain essential guidance. I’d suggest reading through them all before getting started.
Best Regards,
Evan
Thanks Evan,
After Post, I continued researching and I have the theory of how to create the project, but SAP examples didn’t work, I tried to make the same examples but for example in the first sample BasicHorizontalSliderwithStyling I couldn’t make the property sheet with just the defined properties in the project. When I built the project I got a diferent swf result (with diferent size), and the flex project is diferent with the traditional flex 3 projects, then I tried installing flex 2 but the project is too diferent.
Do you have a basic example working with defined properties?.
Thanks so much again.
Jose Caro M.
Chile
I created a map using illistrator, and then imported it into flex. I want it to have the same map functions as the map components. What else should I need to be able to do?
Hello Jason,
After purposing your Illustrator map component for Flex, one of the most straight forward ways to begin adding and testing features will be to set a Flex image component’s source to the Flex component you created in Illustrator. From there, you should be able to capture mouse events and trigger drill-down behaviors, style exposed objects in your map, and subsequently wire up the desired Xcelsius functionality through a custom property sheet. I’d recommend establishing a Flex test container when you’re getting started so you can step through the debugger and inspect/test the properties you’ve created in the map component.
Best Regards,
Evan
Hi Evan,
I went through the Xcelsius SDK Documentation but i don’t know the step-by-step on what to do in Xcelcius SDK once i need to build the .xlx file. Tried to find documentation on using Xcelsius SDK but still haven’t found any.
Sorry Evan, don’t mind my previous remarks…
i’m studying the files right now thoroughly.
Hi Lutfi,
No problem, please feel free to ask about anything you’d like, that’s what we’re here for! Good luck and definitely reach out if you have any questions moving forward.
Best Regards,
Evan