ExtJs 4 was released yesterday and the reason I am pretty excited about this new ExtJs version is Charting. I have been using HighCharts with ExtJs till now. Although HighCharts work and look great, there isn’t a standard adapter/bridge provided by either ExtJs or HighCharts team to make them work together seamlessly.

An ExtJs user going by the handle buz had earlier posted HighCharts Adapter and plugin for ExtJs 3 (here), that I subsequentaly adpated to work with HighCharts 2.x (available here). Although this worked, I was never too satisfied with the solution as the integration was not perfect (things like re-sizing containers disoriented the charts) and subsequent ExtJs and HighCharts releases needed regular tweaks and changes to the adapter.

So, a native ExtJs Charting solution finally meant no more fiddling around with diverse frameworks trying to make them work together.

And yesterday, I released my first ExtJs 4 based chart to a client for evaluation. It was for financial performance monitoring with multiple side-by-side charts demonstrating financial data from different periods. And I had a brief hell-of-a-time to make the Charts work the way I wanted them to. There were 2 main areas I was having problems with:

1. I needed vertically stacked charts.
2. I needed multiple side-by-side charts.

Before discussing further, you can see a simplified version of the Charts I needed below (Click here to open the example in a new window):

ExtJs 4 docs are nowhere near perfect nor complete. There are so many config options and utility methods that I have came across over the last 2 weeks that are not there in the API docs yet for ExtJs 4. For the present scenario, the docs do not mention anything about Stacked charts, but ExtJs 4 examples present one particular sample of a Stacked Bar chart.

I used that as a guide, and it took over an hour for me to finally realize that the “stacked: true” config option is also supported for Column charts.

So, a single chart was ready now and displaying nicely. The next challenge was to have multiple side-by-side charts. I tought it should be pretty easy to accompolish this with a Column layout for a panel and 3 charts being equal width children of the panel (Remember, an ExtJs 4 Chart is a regular ExtJs component, so it shouldn’t be an issue housing it in any ExtJs container with any layout available. This in fact is one of the most highlighted features of ExtJs 4 charts).

However doing so, none of the charts rendered. I checked the Developer Tools to notice that although the Charts were rendering in the browser, their height was virtually 0. So, it must be some issue with the layout. I played around with Column Layout, HBox layout and others but Charts never rendered with their full height.

This continued until I realized that the layoutConfig option is no longer supported for ExtJs 4 containers, rather the layout configuration has to be specified with the layout option itself. Having found this, it became simple now to configure the parent with a HBox layout and align set to stretch and the Charts rendered perfectly.

Now one last issue was exact determination of the stacked component for displaying an appropriate tooltip when mouse is hovered over the vertical columns (try moving mouse over the green and blue portions of the charts above). You would notice that it correctly displayes the stacked column portion as belonging to “grossAmount” or “commission” store field. However the charts themselves do not help you in determining this. I have used value comparisons in the code to detect the stacked column portion (please see the attached code below for details). But this is not perfect and would fail if grossAmount and commission for a record happen to have the same values. I will try to figure out a better solution for this issue and post it in a separate blog entry (I haven’t found anything in the docs or a example which shows determining the portion of the stacked chart the mouse is hovering over).