jQuery UI Widgets › Forums › Angular › Problem unbinding click event in jqxChart in angular
Tagged: Angular 6, jqxChart, pie chart click, unbind chart click event
This topic contains 1 reply, has 2 voices, and was last updated by Hristo 5 years, 8 months ago.
-
Author
-
We are using jqxchart and jquery with angular 6. The pie chart we are using shows the count per category. It has a custom legend like ‘ABC- 25’, ‘DEF – 42’, etc. We want to be able to override the default click behavior of the legend so that it does not remove that section from the pie and also we want to get the text of the legend that was clicked so we can parse it. We are tapping into the chart’s click event and are able to get to the list of all legends but are unable to unbind the default click event. Inspecting each of the elements of the ‘legends’ list, we could not find something that told us it was the clicked element. How do we determine which legend was clicked? In the code below, the console within the for loop never gets printed. How can we unbind and rebind the click event?
mychart-component.ts
Click(e)
{
var legends = $(‘.chartContainer .jqx-chart-legend-text’);
console.log(legends);
for (var i = 0; i < legends.length; i++) {
$(‘.chartContainer .jqx-chart-legend-text’).eq(i).parent().off( ‘click’ );
$(‘.chartContainer .jqx-chart-legend-text’).eq(i).parent().on(‘click’, function (event) {
var category = event.currentTarget.textContent.split(” – “)[0];
console.log(category);
});
}
}mychart-component.htm
<div style=”text-align: center”><span>By Category</span></div>
<jqxChart #myChart
[height]=”300″
[title]=”‘Total by Category'”
[description]=”””
(onClick)=”Click($event)”
[showLegend]=”true” [enableAnimations]=”true” [padding]=”padding”
[titlePadding]=”titlePadding” [source]=”dataAdapter” [showBorderLine]=”false”
[seriesGroups]=”seriesGroups” [colorScheme]=”‘scheme01′” [legendLayout]=”legendLayout”>
</jqxChart>
</div>Hello miuser,
There is no such feature.
You could usehideSerie
method (and the opposite one –showSerie
) to show and hide one series.
On the other side, you could use theonToggle
event to get information about the checked or unchecked legend’s label.
Also, if you have an Angular project you have theseriesGroups
as an object and you could renew it and set it again to the chart with a new series.
Maybe you will need to use the “refresh” method after that.Best Regards,
Hristo HristovjQWidgets team
https://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.