Pie Chart Events

[Zachary Lee]

Hi,

I'm having trouble getting the itemclick event or any event really for a pie chart ('rallychart') to fire. I have tried multiple ways to add events to the component with no luck (see below):

Ex1

listeners: {
        itemclick: {
            element: "el"
            fn: (item, eOps) => {DoSomething;}
}​

Ex2

listeners: {
     itemclick: (item,eOps) => {DoSomething;}
}​

Ex3

.addListener('itemclick',funciton)

I have been able to add the load event to wsapi stores using Ex2 before.

Thanks,
~Zach

[Nik Antonelli]

The problem is that the chart library (highcharts) uses SVG not ExtJS, so the events don't get propogated. You need to use the highcharts way of doing it:

Ext.define('PieChart', {
    xtype: 'piechart',
    extend: 'Rally.ui.chart.Chart',
    requires: [
        'PieCalculator'
    ],

    config: {
        chartConfig: {
            chart: {
                type: 'pie',
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {text: ''},
            tooltip: {
                headerFormat: '',
                pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                        style: {
                            color: 'black'
                        }
                    }
                },
                series: {
                    point: {
                        events: {
                            click: function() { debugger;}
                        }
                    }
                }
            }
        },
        calculatorType: 'PieCalculator'
    },

    constructor: function(config) {
        config = config || {};
        this.mergeConfig(config);
        this.callParent([this.config]);
        
    },
});
​

------------------------------
Nik
Rally Sales Engineer
Rally Software
------------------------------

[Zachary Lee]

This is how I have my chart setup, in this configuration is it not possible to get events? Do I need to set it up like you described using highcharts?

xtype: 'rallychart',
			itemId: id,
			animate: true,
			width: w,
			height: h,
			chartData: {
				series:[{
					type: 'pie',
					name: "Name",
					showInLegend: true,
					data: values
				}]
			},
			chartConfig: {
				chart: {
					plotBackgroundColor: null,
					plotBorderWidth: null,
					plotShadow: false,
					type: 'pie'
				},
				xAxis: {},
				title: {
					text: title
				},
				tooltip: {
					pointFormat: '<b>{point.percentage:.1f}%</b>',
				},
			},
		};​

[Nik Antonelli]

Hi Zach,

I am not an expert in all this stuff, so I am giving you info based on my experience. So here's my understanding:

ExtJs can propagate events through it's hierarchy of containers and components. To do this, you need to use the this.add(component) type of command. When you get to the boundary into another technology (in this case ExtJs into SVG), it is up to the writer of the library to support the two sides of the divide. Even though you can see a segment in a Pie chart, it is rendered as an SVG element. The event gets passed to the element by the browser and you can then do stuff with the event in Javascript that manipulates elements in the SVG domain. 

The case of the rallychart is that an ExtJs container is set up and then passed over to the highcharts library. This is effectively the boundary of automatic ExtJs event propagation and you are reliant on the highcharts library from now on. Highcharts manipulates the ExtJs side of things to maintain sizing and scrolling depending on what it draws.

To hook onto an event that is created by clicking on the SVG domain element, you need to add the bit of plotOptions configuration to tell highcharts that you want to handle an event. In my example, I added a simple function that just calls the debugger. If I click on a pie segment, that code gets called.

The events that are available to you are listed here: https://api.highcharts.com/highcharts/series.item.events

If you want to do something based on a click on a pie segment, then you are going to have to think in highcharts and SVG terminology at the same time as ExtJs

You are into the wonderful world of confusion that I worked through with a number of my apps that are in the SVG domain in an ExtJs custom app.....

In this example (https://github.com/nikantonelli/PortfolioItemTimeLine) I define an ExtJs container, resize it to what I want and then just work in the SVG domain by using the d3 library. I can catch the events at the SVG element level or I can propogate them up to the ExtJs container. If I do that, then I need to decide what info to pass up within the event. and what event to generate (using fireEvent).
 

Hope that helps.

------------------------------
Nik
Rally Sales Engineer
Rally Software
------------------------------

[Zachary Lee]

So I thought I did this before but maybe I just had something wrong when I constructed the object. I just added a plotOptions to the js object and its working now.

chartConfig: {
				chart: {
					plotBackgroundColor: null,
					plotBorderWidth: null,
					plotShadow: false,
					type: 'pie'
				},
				xAxis: {},
				title: {
					text: title
				},
				tooltip: {
					pointFormat: '<b>{point.percentage:.1f}%</b>',
				},
				plotOptions : {
					pie: {
						allowPointSelect: true,
						cursor: 'pointer',
						point: {
							events: {
								click: (event) => {
									var options = this.options;
									console.log(options.name);
								}
							}
						},
					}
                }
			},​

Thanks for your help