View Full Version : Remote & Sustained Pie Highlighting

14 May 2012, 1:56 PM
Quick Question:
Is there a way to tell a PIE Series, move the slice related to item (x) out, like if you did mouse highlight click? I need it to be independent of mouse clicking, and it also has to be able to remove the highlight effect in response to an independent event.

So basically Programmatically highlight/unhighlight a slice without needing a mouse to click on it, and the highlight has to say active without a mouse being over it.

Long Drawn out Explanation:
I'm currently trying to force Ext JS 4.1 pie charts to dynamically highlight in response to other activities occurring on the page. The idea was to take an existing search page, stick charts onto it, and allow the charts to work as secondary filters, so if you click on a pie chart slice, the results will also include the constraints from the chart. I've already fought with the BAR chart and have an uneasy truce with it, since it kinda works, a bit messy, but it works. Now my problem with PIE charts is it seems impossible to actually highlight a PIE slice from JavaScript and make it stick out.

For example, say I had a pie chart of sales by county, I want to move my mouse over a slice, click it and have that slice remain highlighted until it receives a clear action from the page's search controller.

For my BAR chart, when I switch back to the corresponding tab, I send my chart wrapper a highlight action, which will re-enable the highlight. You may ask, why I need to tell the chart to re-highlight, when I switch tabs, since it would already have a highlight. Its a long story, but during development, charts were beginning to show high amounts of graphical corruption, when I used my search method to update existing charts data stores. Apparently ExtJS4 doesn't like it when you change the amount of data in a store. All of the sample's keep the amount of data the same, and just change the values, but in my case the number of rows may very search by search. If you want an example, I have a BAR chart of user activity, which has User's on the Y axis and "action count" on the X axis. If I initially load the page, the chart's are fine, but if I change my search criteria and restrict to a single user, then my chart will show a single bar, as it should and still have the previous labels on it. My solution for this was to, sad as it sounds, destroy my chart instance and re-build it again, so the Y-Axis labels will be correct, before this I tried to surface.remove all/redraw thingy, which was semi successful, but didn't give the appropriate results.

I would post code, but its not just the charts, its an entire system to creating tabs, pages, containers and charts, so everything is integrated.

15 May 2012, 6:43 AM
I think I may have solved my own issues through searching the API some more. I added a afterlayout listener to my panel, and forced it to do a highlight check. So now everything seems to work. Yeah, reading ~o)

afterlayout: function() {
// Try to get the row's index, custom method
var rowIndex = ref.getSelectedRow();
// Sanity check
if (rowIndex >= 0) {
// Custom method