Tap event on telerik charts not working

7 posts, 1 answers
  1. Mathan
    Mathan avatar
    4 posts
    Member since:
    Jun 2017

    Posted 04 Jul Link to this post

    I'm building an application using nativescript/angular2 & "nativescript-telerik-ui-pro/chart" plugin where I'll show a grid of charts which on tap will show the individual chart in a new activity. However, I'm not able to getting tap event on the chart.

    <StackLayout (tap)="navigate(1)">
          <Label text="Line Chart"></Label>
          <tk-chart-series-line></tk-chart-series-line>
    </StackLayout>

    However when I'm clicking the label, the event is generated. I have tried giving (tap) event for "tk-chart-series-line" selector which is also not working. Where I'm missing the trick here ?

  2. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    294 posts

    Posted 04 Jul Link to this post

    Hello Mathan,

    You will not be able to set custom tap event as the charts are actually consuming these tap events.
    However, we have exposed a functionality called selection so that our users can add more interactive logic to their charts. The option allows you to make your charts selectable and to use the events to trigger additional logic (in your case to navigate to another chart).
    With the exposed events like seriesSelected, you can now implement your custom logic and make your application navigate when the user selects specific part of your global chart. Demonstration example on how to use the different selection options can be found here.

    I hope you will find this functionality applicable for your scenario - let us know if you need further assistance!

    Regards,
    Nikolay Iliev
    Progress Telerik
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  3. Mathan
    Mathan avatar
    4 posts
    Member since:
    Jun 2017

    Posted 06 Jul Link to this post

    Hi Nikolay,

    Thanks a lot for your reply. I'm able to consume seriesSelectionMode property (the series line getting selected) whereas,  I couldn't handle seriesSelected event and also I couldn't find examples that handle seriesSelected event. I have tried by consuming by both (seriesSelected)="navigate()" and seriesSelected="navigate()"..How should I consume the seriesSelected event here ?

    PS: Is there any event like chartSelected so that I could listen for selection in RadCartesianChart rather than selection in LineSeries ?

    Thanks,

    Mathan

  4. Answer
    Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    294 posts

    Posted 07 Jul Link to this post

    Hi Mathan,

    To enable the seriesSelected event in our projects, we will need to set seriesSelectionMode on our RdCartesianChart or on RadPieChart which accepts values of None, Single and Multiple. Then we would need to set the selectionMode to our series. Now we can access the seriesSelected event by creating the callback for our RadCartesianChart (or RadPieChart).

    For example:

    Let's assume that we are working with this example.
    Here are the changes that we need to make to access the event
    <!-- setting seriesSelectionMode and providing the callback for seriesSelected event -->
    <RadCartesianChart tkExampleTitle tkToggleNavButton seriesSelectionMode="Multiple" (seriesSelected)="onSeriesSelected($event)">
     
        <LinearAxis tkCartesianVerticalAxis horizontalLocation="Right" allowPan="true"></LinearAxis>
        <CategoricalAxis tkCartesianHorizontalAxis allowPan="true" allowZoom="true"></CategoricalAxis>
     
        <!-- setting selectionMode -->
        <BarSeries tkCartesianSeries selectionMode="Series"  seriesName="Bar" [items]="bubbleCategoricalSource" stackMode="Stack" categoryProperty="Country"
            valueProperty="Impact"></BarSeries>
     
        <!-- setting selectionMode -->
        <LineSeries tkCartesianSeries selectionMode="Series" showLabels="true" seriesName="Line" [items]="categoricalSource" stackMode="Stack"
            categoryProperty="Country" valueProperty="Amount"></LineSeries>
     
    </RadCartesianChart>

    Then in our component file
    onSeriesSelected(args) {
        console.log("onSeriesSelected");
         
        for (var key in args) {
            if (args.hasOwnProperty(key)) {
                var element = args[key];
                console.log(key + ": " + element);
            }
        }
    }

    The same principle can be applied to all the exposed events like seriesSelected, seriesDeselected, pointSelected and pointDeselected but you will need to use either selectionMode set to Series or set to DataPoint so simultaneously to catch both series and points events are not supported.


    Regards,
    Nikolay Iliev
    Progress Telerik
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  5. Mathan
    Mathan avatar
    4 posts
    Member since:
    Jun 2017

    Posted 07 Jul in reply to Nikolay Iliev Link to this post

    Hi Nikolay,

    Thanks a lot.. Above snippet works like a charm! That solves part of my problem.. In series like LineSeries & ScatterBubbleSeries, it has a lot of white areas when compared to series area and probability of user clicking the series line or bubble is less.. Is there anyway to listen tap event on those white areas too?

    Regards,

    Mathan

  6. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    294 posts

    Posted 07 Jul Link to this post

    Hello Mathan,

    As far as I understand you would want to handle user taps on the blank areas (outside of any series or data point). However, this is not a feature implemented in the RadChart due to some limitations when working with event propagation on iOS and Android.

    In the standard case, we can attach a tap event on our RadChart just like on any other element like Label or GridLayout. The reason why this won't work is that the nativescript-ui charts are complicated controls with many inside components which are also listening for tap events (for selection for example). So this if you create a tap listener for iOS on your RadChart it will trigger when the user taps on blank space, but the problem is that due to the way that iOS works, it will also consume any other "inner" taps and will be triggered no matter where the users taps, if it is inside the RadChart meaning that the selection will no longer work.
    The same scenario in Android is exactly the opposite - the "inner" taps will be respected, but the outer one won't be triggered due to the Android events propagation design.

    All that said this is the reason why we have not exposed global tap event for the RadChart and why we can not handle the blank spaces around our data points or series (as that blank space is, in fact, a layout container that will either consume or emit the event depending on the platform).

    Regards,
    Nikolay Iliev
    Progress Telerik
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  7. Mathan
    Mathan avatar
    4 posts
    Member since:
    Jun 2017

    Posted 07 Jul in reply to Nikolay Iliev Link to this post

    Thanks for the detailed explanation Nikolay! That makes the things pretty clear :)
Back to Top