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
------------------------------
Original Message:
Sent: 12-16-2019 11:31 AM
From: Zachary Lee
Subject: Pie Chart Events
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>', }, }, };
Original Message:
Sent: 12-13-2019 11:58 AM
From: Nik Antonelli
Subject: Pie Chart Events
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
Original Message:
Sent: 12-12-2019 04:17 PM
From: Zachary Lee
Subject: Pie Chart Events
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