Swipe event

Thread is closed for posting
8 posts, 2 answers
  1. Raúl
    Raúl avatar
    7 posts
    Member since:
    Jan 2017

    Posted 30 Mar 2017 Link to this post

    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>

  2. Answer
    Nikolay Tsonev
    Admin
    Nikolay Tsonev avatar
    340 posts

    Posted 31 Mar 2017 Link to this post

    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 "nativescript-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
    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. Nedim
    Nedim avatar
    6 posts
    Member since:
    Feb 2015

    Posted 31 Mar 2017 in reply to Nikolay Tsonev Link to this post

    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

  4. Nikolay Tsonev
    Admin
    Nikolay Tsonev avatar
    340 posts

    Posted 05 Apr 2017 Link to this post

    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-telerik-ui-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
    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. Raúl
    Raúl avatar
    7 posts
    Member since:
    Jan 2017

    Posted 05 Apr 2017 in reply to Nikolay Tsonev Link to this post

    Hi.

    Thank you so much for your answer.

    I'm not able to see the example.

    Regards.

  6. Answer
    Nikolay Tsonev
    Admin
    Nikolay Tsonev avatar
    340 posts

    Posted 05 Apr 2017 Link to this post

    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
    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. Raúl
    Raúl avatar
    7 posts
    Member since:
    Jan 2017

    Posted 05 Apr 2017 in reply to Nikolay Tsonev Link to this post

    Thank you so much.

    It works as expected.

    Regards.

  8. Nikolay Tsonev
    Admin
    Nikolay Tsonev avatar
    340 posts

    Posted 26 Apr 2017 Link to this post

    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
    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.
Back to Top