Tap event on telerik charts not working

[Mathan]

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 ?

[Nick Iliev]

Hello ,

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

[Mathan]

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

[Nick Iliev]

Hi ,

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

[Mathan]

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

[Nick Iliev]

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

[Mathan]

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

[Gustavo]

Good morning Nikolay, this post was useful to me to understand how to use the events to manipulate the chart.

I would like to see with you if it is possible to show the label according to the graphic that was clicked.

Here's an example I'm working on: https://github.com/gustavost26/test-chart

At first the label comes bogus, I'm trying to make it true only the label of the column of the chart that was clicked.

[Nick Iliev]

Hello Mathan,

In the provided GitHub project you are using pointSelected to select a single point, but still, the property showLabels will show/hide all of your labels for the whole series.
However, using the pointSelected event provides you with a pointIndex which you can reuse the grab the actual value you want to display and create a custom label using visibility or other UI technique.


After renaming the callback to the more descriptive onPOintSelected

<RadCartesianChart tkExampleTitle tkToggleNavButton pointSelectionMode="Single" (pointSelected)="onPointSelected($event)">

In onPointSelected callback

let index = args.pointIndex;

console.log("Index: " + index);
// show the value in a custom label using modal page, dialog or visible/hidden layout with  [visibility]="isItemVisible ? 'visible' : 'collapsed'

console.log(this.chartResult[index].value); // the value to diplay in you custom label

Regards,
Nikolay Iliev
Progress Telerik

[Gustavo]

But have some way to access the showLabels property to change from false to true.

For example this.chartResult [index] .showLabels = true for the clicked label to appear. Accessing the attribute and placing the value of false or true can do the logic to show and not show.

[Nikolay Tsonev]

Hi Gustavo,

In case you need to change the value for the showLabels you could bind the property and change its value on some of the RadCartesianChart events. For example to show the label on the pointSelected event and to hide it on . For example:
HTML

<RadCartesianChart tkExampleTitle tkToggleNavButton pointSelectionMode="Single" (pointDeselected)="delectedSeries($event)" (pointSelected)="onSeriesSelected($event)">
                <CategoricalAxis tkCartesianHorizontalAxis></CategoricalAxis>
                <LinearAxis tkCartesianVerticalAxis></LinearAxis>

                <BarSeries tkCartesianSeries [items]="chartResult" selectionMode="DataPoint" categoryProperty="hour" valueProperty="value" [showLabels]="showLabelProperty" >
                    <PointLabelStyle tkBarLabelStyle margin="10" fontStyle="Bold" fillColor="#60B3FC" textSize="10" textColor="White"></PointLabelStyle>
                </BarSeries>
            </RadCartesianChart>

TypeScript

@Component({
    moduleId: module.id,
    templateUrl: 'app.component.html'
})
export class AppComponent implements OnInit {
    chartResult: any[] = [];
    showLabelProperty: boolean = false;

    ........
    onSeriesSelected(args) {
        console.log("onSeriesSelected");
        let index = args.pointIndex;

        this.showLabelProperty = true;

       .....
    }

    delectedSeries(args){
        console.log("deselted");
        this.showLabelProperty = false;
    }
}

Let me know whether this helps.
Regards,
nikolay.tsonev
Progress Telerik

[Gustavo]

I select a column from the chart and the label is enabled for all columns: https://github.com/gustavost26/test-chart

I'm trying to make the label's functionality look similar to this example: https://youtu.be/JNOWdZZQa1g

[Gustavo]

Showing one label at a time as you click.

[Nikolay Tsonev]

Hi Gustavo,


First of all, thank you for the sample video and the project.
I reviewed the video and in my opinion, you are looking for the ThrackBall functionality, which allows showing a label while specific series is selected. 
More about this functionality could be found in the documentation. Also, you could review the example in our sample application here.


Please let me know, whether this helps or if I could assist you further.

Regards,
nikolay.tsonev
Progress Telerik

[Gustavo]

Thanks Nikolay, that was the solution I was looking for.
I applied it to the project and it worked perfectly.

[Nikolay Tsonev]

Hi Gustavo,

I would like to let you know that we are closing UI for NativeScript Forum section in Telerik Admin in favor of NativeScript forum. 
Since UI for NativeScript is free for using we consider that the best place for discussions and for questions will be the official NativeScript forum.

Thank you in advance for cooperation.

Regards,
nikolay.tsonev
Progress Telerik