Swipe event

[Raúl]

Hello.
I tried to add a swipe event to a chart, but it does not work, I attached the event in RadCartesianChart.

I need to know the direction of the swipe because I added some graphs into a Carousel, I'm using this plugin, in android works fine but if in IOS the user does a swipe over the graph the event is not triggered

                                    <RadCartesianChart
                                        (swipe)         = "onSwipe($event)"
                                        row             = "0"
                                        height          = "150px"
                                        backgroundColor = "transparent"
                                        class           = "center-graph android-heat"
                                        showLabels      = "false">
                                        <SplineAreaSeries
                                            tkCartesianSeries
                                            selectionMode    = "None"
                                            seriesName       = "Area"
                                            [items]          = "stats.heatHours[0]"
                                            categoryProperty = "hour"
                                            valueProperty    = "popular"
                                            stackMode        = "None">
                                        </SplineAreaSeries>
                                        <RadCartesianChartGrid
                                            tkCartesianGrid
                                            horizontalLinesVisible      = "false"
                                            horizontalStripLinesVisible = "false"
                                            horizontalStrokeWidth       = "1"
                                            horizontalStrokeColor       = "#000"
                                            verticalLinesVisible        = "true"
                                            verticalStripLinesVisible   = "false"
                                            verticalStrokeColor         = "#a0a0a0" 
                                            verticalStrokeWidth         = "1">
                                        </RadCartesianChartGrid>
                                        <CategoricalAxis
                                            tkCartesianHorizontalAxis
                                            labelTextColor = "#000"
                                            labelSize      = "10"
                                            lineThickness  = "1"
                                            lineColor      = "#a0a0a0">
                                        </CategoricalAxis>
                                        <LinearAxis
                                            tkCartesianVerticalAxis
                                            lineThickness      = "1"
                                            hidden             = "true"
                                            horizontalLocation = "Right"
                                            lineHidden         = "false">
                                        </LinearAxis>
                                        <Palette
                                            tkCartesianPalette
                                            showLabels = "false"
                                            seriesName = "Area">
                                            <PaletteEntry
                                                tkCartesianPaletteEntry
                                                fillColor   = "#FF007F"
                                                strokeColor = "#FF0049">
                                            </PaletteEntry>
                                        </Palette>
                                    </RadCartesianChart>

[Nikolay Tsonev]

Hi,
Thank you for your interest in NativeScript.

I reviewed your case, however, at the moment the NativeScript gestures have not been supported by  UI for NativeScript Chart component. Regarding that, you could log a new feature request, where you could describe your use case and the need for such a feature.

In regard to "-carousel" plugin, I tested it on my side and was able to reproduce an issue with the swipe between the different Carousel items on iOS, while setting Charts inside of them. This behavior has been related to the plugin. You could contact the plugin's author for further help and for a possible workaround of the problem.
For your convenience, I am also attaching the sample project, which I use for testing. 
Regards,
nikolay.tsonev
Telerik by Progress

[Nedim]

Hi there, plugin author here :)

I know we have some issues with the plugin when it comes to Angular support, but I don't see that this is one of those cases (could be wrong). The swipe does work in the demo app provided here, but only on certain areas.

When you swipe where the labels are located it works, if you swipe when directly over the chart, it does not. I've attached an image to indicate the area that works (white). 

If I knew what the problems was here, I would fix it. But for now I have no leads on what to look for. The plugin is just a wrapper for a Pod written in ObjC.

Ned

[Nikolay Tsonev]

Hello,
In our further research, we found that this issue is related to UI for NativeScirpt and the fact that the SubView in the Charts will consume the gesture, which will prevent from making a swipe while using "nativescript-carousel" plugin and its functionality.

For you convenience, I logged new issue here, where this problem is described. We will investigate, how we could fix this behavior, which will be available for some of the next "nativescirpt---pro" versions.

As a temporary solution, you could access the native property of the component on a loaded event to disable userInteraction.  For example:

Regards,
nikolay.tsonev
Telerik by Progress

[Raúl]

Hi.

Thank you so much for your answer.

I'm not able to see the example.

Regards.

[Nikolay Tsonev]

Hi Raúl,

Excuse me for this mistake. I have missed to attached the below-mentioned sample code:
HTML

<ActionBar title="My App" class="action-bar">
</ActionBar>
<GridLayout>

    <NativescriptCarousel height="250" (pageChanged)="myChangeEvent($event)">
        <NativescriptCarouselItem>
            <RadCartesianChart (loaded)="rcloaded($event)" height="250">
                <CategoricalAxis tkCartesianHorizontalAxis></CategoricalAxis>
                <LinearAxis tkCartesianVerticalAxis></LinearAxis>

                <BarSeries tkCartesianSeries [items]="categoricalSource" categoryProperty="Country" valueProperty="Amount"></BarSeries>
                <RadCartesianChartGrid tkCartesianGrid horizontalLinesVisible="true" verticalLinesVisible="true" horizontalStripLinesVisible="true"
                    verticalStripLinesVisible="true" verticalStrokeColor="#804d0026" horizontalStrokeColor="#ffffcc80" horizontalStrokeWidth="2"
                    verticalStrokeWidth="3" horizontalStripLineColor="#8059005c, #804d0026"></RadCartesianChartGrid>

            </RadCartesianChart>
        </NativescriptCarouselItem>
        <NativescriptCarouselItem>
            <RadCartesianChart height="250">
                <CategoricalAxis tkCartesianHorizontalAxis></CategoricalAxis>
                <LinearAxis tkCartesianVerticalAxis></LinearAxis>

                <BarSeries tkCartesianSeries [items]="categoricalSource" categoryProperty="Country" valueProperty="Amount"></BarSeries>
                <RadCartesianChartGrid tkCartesianGrid horizontalLinesVisible="true" verticalLinesVisible="true" horizontalStripLinesVisible="true"
                    verticalStripLinesVisible="true" verticalStrokeColor="#804d0026" horizontalStrokeColor="#ffffcc80" horizontalStrokeWidth="2"
                    verticalStrokeWidth="3" horizontalStripLineColor="#8059005c, #804d0026"></RadCartesianChartGrid>

            </RadCartesianChart>
        </NativescriptCarouselItem>
    </NativescriptCarousel>
</GridLayout>

TypeScript

import { Component, OnInit } from "@angular/core";
import {RadCartesianChart} from "nativescript-telerik-ui-pro/chart"

import { Item } from "./item";
import { ItemService } from "./item.service";

@Component({
    selector: "ns-items",
    moduleId: module.id,
    templateUrl: "./items.component.html",
})
export class ItemsComponent{
    items: Item[];

    public categoricalSource=[ { Country: "Germany", Amount: 15, SecondVal: 14, ThirdVal: 24, Impact: 0, Year: 0 },
            { Country: "France", Amount: 13, SecondVal: 23, ThirdVal: 25, Impact: 0, Year: 0 },
            { Country: "Bulgaria", Amount: 24, SecondVal: 17, ThirdVal: 23, Impact: 0, Year: 0 },
            { Country: "Spain", Amount: 11, SecondVal: 19, ThirdVal: 24, Impact: 0, Year: 0 },
            { Country: "USA", Amount: 18, SecondVal: 8, ThirdVal: 21, Impact: 0, Year: 0 }]

    constructor(private itemService: ItemService) { }



    public onSwipe(args){
        console.log("Swipe Direction: " + args.direction);
    }
    public myChangeEvent(args){
         var changeEventText = "Page changed to index: " + args.index;
        console.log(changeEventText);
    }


    rcloaded(args){
        var chart:RadCartesianChart =<RadCartesianChart>args.object;
        console.log("chart");
        chart.ios.userInteractionEnabled = false;
    }
}

Hope this helps.

Regards,
nikolay.tsonev
Telerik by Progress

[Raúl]

Thank you so much.

It works as expected.

Regards.

[Nikolay Tsonev]

Hello,
Just for your information,  UI for NativeScript team fixed issue #146 and it will be available in the upcoming release.
Regards,
nikolay.tsonev
Telerik by Progress