Nov
9

Start Creating Your Own Custom Xcelsius Charts: Column Chart

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.

LineChart

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.

Tags: , , ,

18 Responses to “Start Creating Your Own Custom Xcelsius Charts: Column Chart”

  1. HD says:

    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.

  2. Evan DeLodder says:

    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

  3. Alan McClean says:

    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: 0x8007000B)
    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)

  4. Evan DeLodder says:

    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

  5. Alan McClean says:

    Hi Evan,

    Thats for the response. I am on XP x64. I have just got it working on a 32 bit VMware

    Alan

  6. Jose says:

    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

  7. 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

  8. Jose says:

    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

  9. Jason S. says:

    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?

  10. 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

  11. Lutfi H. says:

    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.

  12. Lutfi H. says:

    Sorry Evan, don’t mind my previous remarks…
    i’m studying the files right now thoroughly.
    :)

  13. 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

  14. kedar says:

    hi evan ,
    I crated the component from the source code provided ,its working fine . After i tried to create component myself with same source code as yours ,just changed the references .The component was created without any error but when i drag and drop this on xcelsius it just shows a blank square and nothing else ,bars and columns are not visible . I even copied entrire propertysheet code from the original source code ,but its not working though the same code works well on the original sample

  15. Sekhar says:

    Hi Evan,

    In your component the datas for the chart changes dynamically . But when I tried the logic to develope a custom filter component the array meant for filter criteria is not refreshed with the new values. What I suspect is that the array is not at all sensed the changes made in the values at run time.. Kindly suggest any method how to do this..

    Thanks..

  16. Flexer says:

    Hi all,
    i have a question about the Column Chart:
    Is it possible to see the source code of the Column Chart?

    i hope somebody can answer my question

    Best Regards!

  17. Mico Yuk says:

    No, the code is not available for any of the out of box components.

    Mico

  18. Jonas says:

    Hi,

    Is it possible to re-use a standard propertysheet
    For example :
    C:\Program Files\SAP BusinessObjects\Xcelsius 4.0\assets\propertySheets\CombinationChartPropertySheet.swf

    I want to create my own chart based on this propertysheet. How can I find out which property names are being used so I can create the correct setters and getters.

    Kind regards,
    Jonas

Leave a Reply