Mar
11

Dynamic Combo Chart and Source Code

I apologize to my Flexcelsius readers for the lack of posts recently. I have been in high delivery mode and I’m finally back down with some time to create some fun and useful add-ons.

My previous post regarding add-ons was based on a very simple column chart that I indicated we would be extending on in subsequent posts. As a long time Flex dashboard developer, I really missed a few things in watching people create Xcelsius dashboards that I considered to be foundational in dashboard charting. To start, namely:

  • Dynamic series colors:  i.e. switching between series colors on-the-fly at runtime
  • Dynamic series types:  i.e. switching between series types on-the-fly at runtime
  • Dynamic series addition and removal at runtime
  • Dynamic series position at runtime
  • Dynamic series alpha at runtime
  • Dynamic HTML tooltips

Custom Xcelsius Combo Chart

These small but powerful features can significantly reduce the amount of objects needed to traditionally compensate for the absence of these abilities in the Xcelsius environment.

I wanted to create a simple yet powerful representation of these concepts that would show people that are new to Flex charting how exactly they may go about coding up quick charts to fill feature gaps and enhance their Xcelsius design-time productivity. I created a Line/Area/Column type combo chart that fulfills the requirements called out in the list above and have included the full source code, including a functional Xcelsius XLF model to serve as a functional example here:

The property sheet is really simple and if you look at the example XLF, you’ll see how the data needs to be structured for the series and the chart data.

A few notes regarding this chart’s functionality:

  1. You can switch series types at runtime
  2. You can add or remove series at runtime by blanking out a given series type cell value
  3. You can add and remove data dynamically at runtime
  4. You can change the order that series appear at runtime i.e. bringing to front or sending to back
  5. You can set the chart’s font color through a color picker in the property sheet
  6. Chart series are added in the order specified, so if you put an area series on last, it will render in front of the other series present on the chart, etc.
  7. All of the chart’s functionality barring colors, is completely data driven
  8. HTML tooltips only support basic tags and do not support images or other more advanced features…yet.
  9. Data and tooltips share cells separated by a :  See XLF for an example
  10. Please refer to the XLF on how to properly structure your data for this chart

In my next post, we will further extend this chart, adding in very useful features such as drilling down in-place, without any Xcelsius logic.

Best Regards,

Evan DeLodder

Tags: , , ,

12 Responses to “Dynamic Combo Chart and Source Code”

  1. Waqas says:

    Hi Evan…
    this is exactly what i was looking for., but unfortunate ly its not working properly. When I open the ComboChartExample.xlf file the chart gets populated with data and works fine but as soon as I hit preview button the text boxes down there and the chart itself doest get populated with data and nothing shows up :(

    Can you please advise mein this regard…?

    Many thanks in advance.

    Kind Regards,

    Waqas

  2. Hi Waqas,

    Great to hear that it’s on target for some of your needs. Thanks for trying it out.

    Have you made modifications to the xlf and if so could you send me the modified example? The data in the model is hardcoded so it should be showing up, especially through the text boxes. As a side note I this model was built on SP2.

    Best,
    Evan

  3. HD says:

    Waqas,
    I’m running SP3. I installed the XCComboChart add-on and opened the XLF file. I see a grey screen and preview doesn’t show any data. What am I missing? Thanks for your patience!

    _hd

  4. Waqas says:

    Hi Evan

    I didn’t change anything in xlf file, I just opened it up and hit preview button. I am using Xcelsius SP3 I think may be its not compatible with SP3.

    If you want to have a look, how can I send you? can I have your email ID?

    Many thanks

    Regards,

    Waqas

  5. Good catch, Waqas. This does unfortunately appear to be a behavioral difference between SP2 and SP3 which theoretically shouldn’t happen :) If you run the model in preview mode and change the “area” text input value to “line”, the chart should redraw itself. So basically it looks like a binding issue between the 2 versions and the data in the SP3 model needs to be updated at runtime to trigger a chart rebuild/redraw. I’ll test the next version in both SP2 and 3 and hopefully I’ll get a chance to post an updated build with the fix next week as I bet it’s something really simple. I’ll post a comment here when updated. Please let me know if that workaround is helpful in SP3 in the mean time.

    Thanks,
    Evan

  6. Waqas and other SP3 users,

    The updated source code and XLX that are SP3-compatible can be found here:

    http://everythingxcelsius.com/wp-content/uploads/EverythingXcelsiusComboChart_SP3.zip

    Please let me know how you get along with the new component in SP3.

    Best,
    Evan

  7. Waqas says:

    Evan,

    Thank you so much for your reply. I was on a week long training due to this didnt get chance to check the updated source code. Hopefully will check it out by tomorrow and will let you know.

    Btw I just got to know that SP3 fixpack has solved the compatibility issue b/w SP2 and SP3 so I am sure it will now work.

    will update you soon.

    Regards,

    Waqas

  8. Sagar says:

    Hi,

    I had a chance to implement Dynamic Binding in recent Dash board.It is working fine with the static data. But iam getting data from database.here the problem comes.i have requirement like this. There are 5 values like AA,BB,CC,DD,EE. For AA i have to give Red color,For BB Blue,CC — Yellow,DD –green,And for EE — white.iam hard coded the colors for all records. from database am getting data sometimes like AA,CC,DD or AA,BB,EE.like this.Iam using a vlookup for the matching the Values in result set and taking the respective color code. And binding this color code. Here am getting total series like Black color only,not showing the actual colors as per vlookup result.Here Iam using Pie,Stacked Bar&column charts.could you please help on this?

    Regards,
    Sagar

  9. Stefan says:

    Hello

    very interesting, but where i can get the files?

    The link go to Centigon, but here i get finally files for another plugin : XCGRID

  10. SK says:

    I downloaded the XCFrid zip file.
    Opened the test.xlf din’t load the component because the versions.
    I have Dashboard design Version 6.0.0.0, and build 14.0.2.364

    Please let me know what needs to be done to do the area and line chart together.

  11. Evan says:

    @SK – Thanks for letting us know. I think the wrong version is being downloaded. We will get the right version up and post back.

Leave a Reply