jQuery UI Widgets Forums Angular Problem unbinding click event in jqxChart in angular

This topic contains 1 reply, has 2 voices, and was last updated by  Hristo 5 years, 3 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author

  • miuser
    Participant

    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>


    Hristo
    Participant

    Hello miuser,

    There is no such feature.
    You could use hideSerie method (and the opposite one – showSerie) to show and hide one series.
    On the other side, you could use the onToggle event to get information about the checked or unchecked legend’s label.
    Also, if you have an Angular project you have the seriesGroups 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 Hristov

    jQWidgets team
    https://www.jqwidgets.com

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.