You are hereBlogs / rahul's blog / ExtJs 4 -Vertically stacked side-by-side multiple charts

ExtJs 4 -Vertically stacked side-by-side multiple charts


rahul's picture

By rahul - Posted on 28 April 2011

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

 

AttachmentSize
extjs4-vertically-stacked-column-chart.html6.38 KB

See my post here about a possible hack that would give you the hex code for the color you are clicking on as well as the bar name from the store so you could determine what bar you are on that way.

a.attr = This will return the attributes of the bar that you clicked on, one way to differentiate the actual bar in an example like the one above id to get the color as it is a constant, but this would require a sloppy bit of code that would equate a color in hex code to a category. This is definitely not a best practice!

http://www.learnsomethings.com/2011/05/12/look-ma-no-flash-extjs-4-0-cha...

rahul's picture

Hi Joshua, thanks for sharing this. One approach is value comparison as in the blog post above. But I am sure there must be a better way like something based on mouse hit-test or monitoring mouse events for individual series on the chart. I am not just getting enough time to figure out a better approach for this that is not hackish.

Hi Rahul,

Do you mean the new Ext JS 4 charting function is a good replacement of HighCharts? or it is still has some flaw, so still need to use HighCharts?

I am looking for a good enough javascript library to draw charts.

Sincerely,
Micky

rahul's picture

Hi Micky, yes I mean that the native Charting in ExtJs 4 is good and you should no longer need to use HighCharts if you are using ExtJs 4. But outside of ExtJs 4 (meaning if you are not using ExtJs 4), HighCharts continues to be a very good and powerful charting solution.

You might be interested in my comparison of Charting libraries available here:
http://www.rahulsingla.com/blog/2010/09/a-quick-comparison-of-web-based-charting-libraries-for-data-visualization 

Thanks for your reply! Smile I think I will try Ext JS 4 first!

Hi Rahul ,

Did you get any solution for the issue you mentioned above in the orignial post(Not able to identify which bar is clicked).

Also you are using itemmousedown event, i found itemclick event is yet not supported. itmemousedown means mouse click on any button, do you have any solution for it as well.

Thanks
Lalit

rahul's picture

Hi Lalit, I haven't got time to look into the issue. The current approach based on value comparisons works fine for me for now.

I dont think I am using any type of mouse event in the sample code for this blog post. Check the source for the sample, you wont find any listener for itemmousedown (or for that matter, any mouse event listener at all).

If you meant you want to find which mouse button was pressed in itemmousedown event, use the "button" property in the event object that gets passed to your listener. I don't think its documented but ExtJs EventObject has a button property that tells you the mouse button that was pressed. You can detect this in raw onmousedown event of javascript also. The following page might be helpful:
http://www.javascripter.net/faq/leftvsrightmousebutton.htm 

I have had time to implement a solution, it appears that the only way to do this is to use this method. I have posted detailed instructions on my blog here:


http://www.learnsomethings.com/2011/05/23/getting-the-bar-series-segment-as-well-as-category-and-value-in-an-extjs-4-stacked-bar-chart/


 

Thank you for taking the time to put this together and for sharing it.  God bless you.

Hi Rahul,

  Is it same thing is possible in ExtJS 3.4? If yes please share any example link.

rahul's picture

Nopes, this is strictly for Ext 4 (Ext 3's charting support is completely different from Ext 4).

I have stacked column chart where I have used code for label in display as "insideEnd",

label: {

                display: 'insideEnd',

                'text-anchor': 'middle',

                renderer: Ext.util.Format.numberRenderer('0'),

                orientation: 'vertical',

                fill: '#fff'

            }

 

but with this I want total of full bar(all stacks togather) to be shown outside of bar chart along with the stacks showing their own total inside the stacks? 

Any suggestion or solution for this or I need to customize or calculate total differently....???

Post new comment

The content of this field is kept private and will not be shown publicly.
Type the characters you see in this picture. (verify using audio)
Type the characters you see in the picture above; if you can't read them, submit the form and a new image will be generated. Not case sensitive.

Recent comments