Simple graph run on android but crash on ios

20 posts, 0 answers
  1. Giorgio
    Giorgio avatar
    18 posts
    Member since:
    Jun 2017

    Posted 27 Jun Link to this post

    A simple line graph crash on ios simulator but run on android emulator, below the angular description of the graph:

    the categoryProperty is a string with the values like "2017-05-23" 

    <RadCartesianChart row="1" tkExampleTitle tkToggleNavButton>
    <LinearAxis tkCartesianVerticalAxis></LinearAxis>
    <DateTimeCategoricalAxis tkCartesianHorizontalAxis dateFormat="MMM-dd" labelFitMode="Rotate" labelRotationAngle="1.2"></DateTimeCategoricalAxis>
    <LineSeries tkCartesianSeries [items]="graphData" categoryProperty="date" valueProperty="amount"></LineSeries>
    </RadCartesianChart>

     

    What can I do?

  2. Deyan
    Admin
    Deyan avatar
    2147 posts

    Posted 28 Jun Link to this post

    Hi Giorgio,

    Thanks for writing.

    To be able to better assist you we will need some more information about your setup. For example, can you share some more code:

    - the source you are using to populate the Chart with data
    - the stack trace at the point of the exception

    The best way for us to assist would be to directly take a look at a project that crashes and see what goes wrong.

    Regards,
    Deyan
    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. Giorgio
    Giorgio avatar
    18 posts
    Member since:
    Jun 2017

    Posted 28 Jun in reply to Deyan Link to this post

    Hi, thanks for answer

    I'm learning your ui, so I've copied the logic of your graph example about datetimecategoricalaxis, on the Getting Started section on getting-started

    I've only changed the data like this:

    [{"date":"2017-05-18","amount":0,"label":"05-18","timestamp":1495065600000},{"date":"2017-05-11","amount":206.7,"label":"05-11","timestamp":1494460800000},{"date":"2017-05-13","amount":1102.3,"label":"05-13","timestamp":1494633600000},{"date":"2017-05-09","amount":282.6,"label":"05-09","timestamp":1494288000000},{"date":"2017-05-15","amount":610.8,"label":"05-15","timestamp":1494806400000},{"date":"2017-05-21","amount":0,"label":"05-21","timestamp":1495324800000},{"date":"2017-05-10","amount":478.9,"label":"05-10","timestamp":1494374400000},{"date":"2017-05-19","amount":0,"label":"05-19","timestamp":1495152000000},{"date":"2017-05-12","amount":421.6,"label":"05-12","timestamp":1494547200000},{"date":"2017-05-08","amount":724.5,"label":"05-08","timestamp":1494201600000},{"date":"2017-05-14","amount":346.2,"label":"05-14","timestamp":1494720000000},{"date":"2017-05-20","amount":0,"label":"05-20","timestamp":1495238400000}]

    With that data I can show the graph on iOS simulator with the following description

    <RadCartesianChart row="1" tkExampleTitle tkToggleNavButton><LinearAxis tkCartesianVerticalAxis></LinearAxis><DateTimeContinuousAxis tkCartesianHorizontalAxis  minimum="01/05/2017" maximum="31/05/2017" majorStep="Day" dateFormat="dd" labelFitMode="Rotate" labelRotationAngle="1.2"></DateTimeContinuousAxis>                <LineSeries tkCartesianSeries [items]="graphData" categoryProperty="timestamp" valueProperty="amount"></LineSeries></RadCartesianChart>

     

    But this kind of chart crash on Android emulator (!!) with the message

    Cannot read property 'android' of undefined.

     

  4. Giorgio
    Giorgio avatar
    18 posts
    Member since:
    Jun 2017

    Posted 28 Jun in reply to Giorgio Link to this post

    I' would like to add some interesting error message from a new demo I've build with your Getting started code and with the DatetimeCategoricalAxis kind of graph:  this on IOS simulator

    [Graphics] UIColor created with component values far outside the expected range. Set a breakpoint on UIColorBreakForOutOfRangeC
    olorComponents to debug. This message will only be logged once.

    the demo work on android,

     

    In my demo I've changed the kind of graph to DateTimeContinuousAxis

    and so in IOs I've the same error,

    but work in android, but the points value are not ordered by timestamp but with array index

    I attach a zip with my demo

  5. Giorgio
    Giorgio avatar
    18 posts
    Member since:
    Jun 2017

    Posted 28 Jun in reply to Giorgio Link to this post

    <DateTimeContinuousAxis tkCartesianHorizontalAxis minimum="01/05/2017" maximum="31/05/2017" majorStep="Day"></DateTimeContinuousAxis>

     

    this is the correct description of the graph, so i can run it on iOS, but the data are not sorted by timestamp

  6. Giorgio
    Giorgio avatar
    18 posts
    Member since:
    Jun 2017

    Posted 28 Jun in reply to Giorgio Link to this post

    I would like to add a simple annotation on my graph, so I put this code on graph description

     

    <RadCartesianChart row="1" >

    <LinearAxis tkCartesianVerticalAxis></LinearAxis>
    <!--CategoricalAxis tkCartesianHorizontalAxis></CategoricalAxis-->


    <DateTimeContinuousAxis tkCartesianHorizontalAxis minimum="01/05/2017" maximum="31/05/2017" majorStep="Day" dateFormat="dd" labelFitMode="Rotate" labelRotationAngle="1.2"></DateTimeContinuousAxis>
    <LineSeries tkCartesianSeries [items]="graphData" categoryProperty="timestamp" valueProperty="amount"></LineSeries>


    <!--
    <DateTimeCategoricalAxis tkCartesianHorizontalAxis dateFormat="MMM-dd" labelFitMode="Rotate" labelRotationAngle="1.2"></DateTimeCategoricalAxis>
    <LineSeries tkCartesianSeries [items]="graphData" categoryProperty="date" valueProperty="amount"></LineSeries>
    -->

    <!--LineSeries tkCartesianSeries [items]="prepare_data_day_graph()" categoryProperty="date" valueProperty="amount"></LineSeries-->
    <ChartGridLineAnnotation tkCartesianAnnotations axisId="hAxis" hidden="false" value="5"
    zPosition="BelowSeries" strokeWidth="4"
    strokeColor="#EB916580"></ChartGridLineAnnotation>
    </RadCartesianChart>

    And this cause the error on android emulator and not in iOS simulator

  7. Deyan
    Admin
    Deyan avatar
    2147 posts

    Posted 28 Jun Link to this post

    Hi Giorgio,

    Thanks for writing back and for the provided details.

    1. Setting the minimum and maximum properties is obligatory for the DateTimeContinuousAxis to work. I agree that this is not straightforward and I have already logged a TODO item to improve this behavior and better describe it in the documentation.

    2. You also have to specify the id property of the axis and reference it by using axisId on the annotation. In other words, you should put id="hAxis" on your axis for which the annotation is and then put axisId="hAxis" on the annotation.


    I hope this helps.

    Regards,
    Deyan
    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.
  8. Giorgio
    Giorgio avatar
    18 posts
    Member since:
    Jun 2017

    Posted 29 Jun in reply to Deyan Link to this post

    Hi, thanks for suggested me to assign the id to axis : the graph show with annotation now , but only on iOS !!!!!

    With DateTimeContinuosAxis as in my example, with categoryProperty="timestamp" as my example data, on android it tell me that the value timestamp is"incompatible with the axis selected" !

    I attach the pictures of the graph on iOS and the error on android emulator

    my graph description that work only on iOS:

    <RadCartesianChart row="1" tkExampleTitle tkToggleNavButton>
    <LinearAxis tkCartesianVerticalAxis></LinearAxis>
    <!--
    <DateTimeCategoricalAxis tkCartesianHorizontalAxis></DateTimeCategoricalAxis>
    <LineSeries tkCartesianSeries [items]="categoricalSource" categoryProperty="date" valueProperty="amount"></LineSeries>
    -->
    <DateTimeContinuousAxis tkCartesianHorizontalAxis id="hAxis" minimum="01/05/2017" maximum="31/05/2017" majorStep="Day" dateFormat="dd" labelFitMode="Rotate" labelRotationAngle="1.2"></DateTimeContinuousAxis>
    <LineSeries tkCartesianSeries [items]="categoricalSource" categoryProperty="timestamp" valueProperty="amount"></LineSeries>
    <ChartGridLineAnnotation tkCartesianAnnotations axisId="hAxis" hidden="false"
    zPosition="BelowSeries" strokeWidth="4" value="1494633600000"
    strokeColor="#EB916580">
    </ChartGridLineAnnotation>
    </RadCartesianChart>

  9. Deyan
    Admin
    Deyan avatar
    2147 posts

    Posted 03 Jul Link to this post

    Hi Giorgio,

    Thanks for writing back.

    I have investigated the case and have found the reason for the issue you are facing: there is a small bug in the way GridLineAnnotation interacts with the DateTimeContinuousAxis on Android. We are going to log this issue in our TODO system and fix it immediately for you. You will be able to access the fix using the @next tag of the plugin on npmjs.org. I will make sure to notify you as soon as the fix is ready (will be a matter of a day or two).

    Thanks for your understanding!

    Regards,
    Deyan
    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.
  10. Deyan
    Admin
    Deyan avatar
    2147 posts

    Posted 04 Jul Link to this post

    Hi Giorgio,

    You can now check out the nativescript-telerik-ui-pro@next version from npmjs.com for the fix discussed in this thread.

    Make sure you tns plugin remove nativescript-telerik-ui-pro and tns plugin add nativescript-telerik-ui-pro@next to install the internal version.

    Let us know how does it work for you?

    Regards,
    Deyan
    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.
  11. Giorgio
    Giorgio avatar
    18 posts
    Member since:
    Jun 2017

    Posted 05 Jul in reply to Deyan Link to this post

    Hi Deyan

    I removed and installed the new plugin and on android the graph now work well with the annotation, as you can see in the attached image !! 

    But, as you can see on the image, my array of data are not ordered by timestamp, and I would not want to be wrong, but I understand that with the continuous type the data is automatically sorted.

    For your information, I have checked for my first issue with DateTimeCategoricalAxis on iOS: it don't work now with the new plugin. 

    my test charts page have the below definition, the data values are the same I've posted, and I attached the image of android emulator that work well with the new plugin, and the initial text of tns run ios --log trace

    CONSOLE ERROR file:///app/tns_modules/@angular/core/./bundles/core.umd.js:1091:24: ERROR Error: Uncaught (in promise): ReferenceError: Meta
    data for "TelerikUI.TKChart" found but symbol not available at runtime.
            RadCartesianChart@file:///app/tns_modules/nativescript-telerik-ui-pro/chart/chart.js:375:29

    I hope this help

    thanks

    Giorgio

    <GridLayout  rows="auto,auto"><br><RadCartesianChart height="250" row="0" tkExampleTitle tkToggleNavButton><br>    <LinearAxis tkCartesianVerticalAxis></LinearAxis><br>    <!--<br>    <DateTimeCategoricalAxis tkCartesianHorizontalAxis></DateTimeCategoricalAxis><br>    <LineSeries tkCartesianSeries [items]="categoricalSource" categoryProperty="date" valueProperty="amount"></LineSeries><br>    --><br>    <DateTimeContinuousAxis tkCartesianHorizontalAxis id="hAxis" minimum="01/05/2017" maximum="31/05/2017" majorStep="Day" dateFormat="dd" labelFitMode="Rotate" labelRotationAngle="1.2"></DateTimeContinuousAxis><br>    <LineSeries tkCartesianSeries [items]="categoricalSource" categoryProperty="timestamp" valueProperty="amount"></LineSeries><br>    <ChartGridLineAnnotation tkCartesianAnnotations axisId="hAxis" hidden="false" <br>                            zPosition="BelowSeries" strokeWidth="4" value="1494633600000"<br>                            strokeColor="#EB916580"><br>    </ChartGridLineAnnotation><br><br></RadCartesianChart><br><RadCartesianChart height="250" row="1" tkExampleTitle tkToggleNavButton><br>    <LinearAxis tkCartesianVerticalAxis></LinearAxis><br>    <DateTimeCategoricalAxis tkCartesianHorizontalAxis dateFormat="MMM-dd" labelFitMode="Rotate" labelRotationAngle="1.2"></DateTimeCategoricalAxis><br>    <LineSeries tkCartesianSeries [items]="categoricalSource" categoryProperty="date" valueProperty="amount"></LineSeries><br>    <!--<br>    <DateTimeContinuousAxis tkCartesianHorizontalAxis id="hAxis" minimum="01/05/2017" maximum="31/05/2017" majorStep="Day" dateFormat="dd" labelFitMode="Rotate" labelRotationAngle="1.2"></DateTimeContinuousAxis<br>    <LineSeries tkCartesianSeries [items]="categoricalSource" categoryProperty="timestamp" valueProperty="amount"></LineSeries><br>    <ChartGridLineAnnotation tkCartesianAnnotations axisId="hAxis" hidden="false" <br>                            zPosition="BelowSeries" strokeWidth="4" value="1494633600000"<br>                            strokeColor="#EB916580"><br>    </ChartGridLineAnnotation><br>    --><br><br></RadCartesianChart><br></GridLayout>
  12. Deyan
    Admin
    Deyan avatar
    2147 posts

    Posted 05 Jul Link to this post

    Hello Giorgio,

    Thanks for writing back. Happy to hear that the problem with the annotation is now resolved.

    1. To use DateTimeCategoricalAxis you need to change the type of the Category value to Date:

    import { Injectable } from "@angular/core";
     
    export class DataGraph {
        constructor(public date: Date,
            public amount: number, public label: string, public timestamp: number) { }
    }
     
     
    @Injectable()
    export class DataService {
        getCategoricalSource(): DataGraph[] {
            return [
                { date: new Date("2017-05-08"), amount: 724.5, label: "05-08", timestamp: 1494201600000 },
                { date: new Date("2017-05-09"), amount: 282.6, label: "05-09", timestamp: 1494288000000 },
                { date: new Date("2017-05-10"), amount: 478.9, label: "05-10", timestamp: 1494374400000 },
                { date: new Date("2017-05-11"), amount: 206.7, label: "05-11", timestamp: 1494460800000 },
                { date: new Date("2017-05-12"), amount: 421.6, label: "05-12", timestamp: 1494547200000 },
                { date: new Date("2017-05-13"), amount: 1102.3, label: "05-13", timestamp: 1494633600000 },
                { date: new Date("2017-05-14"), amount: 346.2, label: "05-14", timestamp: 1494720000000 },
                { date: new Date("2017-05-15"), amount: 610.8, label: "05-15", timestamp: 1494806400000 },
                { date: new Date("2017-05-18"), amount: 0, label: "05-18", timestamp: 1495065600000 },
                { date: new Date("2017-05-19"), amount: 0, label: "05-19", timestamp: 1495152000000 },
                { date: new Date("2017-05-20"), amount: 0, label: "05-20", timestamp: 1495238400000 },
                { date: new Date("2017-05-21"), amount: 0, label: "05-21", timestamp: 1495324800000 }
            ];
        }
    }

    I have still logged an issue regarding the discrepancy in the behaviour of DateTimeCategoricalAxis on Android and iOS as it works with strings on Android but with Dates only on iOS.

    2. The DateTimeContinuousAxis does not sort the values by default. You will have to sort them as per your requirements. You can also log a feature-request to implement sorting here: github.com/telerik/nativescript-ui-feedback and we will make sure to escalate its priority. 

    Regards,
    Deyan
    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.
  13. Giorgio
    Giorgio avatar
    18 posts
    Member since:
    Jun 2017

    Posted 06 Jul in reply to Deyan Link to this post

    Hi Deyan

    I'm continuing my project and I have a new problem with the graphs:

    As you can see on the attached picture, the h-axe labels are "overwritten" on the begin of the axe. 

    I tried modifying my demo app where I use your @next version on ui, and 

    you find attached my graphdemo app which reply the problem on iOS only, try to play with the top button "change data".

    On android the app show the initial graph, but you can't get new graph playing with the button (error involve the minimum...)

    regards

    Giorgio

     

  14. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    294 posts

    Posted 07 Jul Link to this post

    Hello Giorgio,

    In your last post, for some reason, instead of an archive with the project,  we received an image called archive-zip.png.

    Would it be possible to resend the sample project (via an archive file or link to GitHub repository)?

    Thank you in advance for your cooperation!

    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.
  15. Giorgio
    Giorgio avatar
    18 posts
    Member since:
    Jun 2017

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

    Hi, Nikolay

    simply try to rename the zip.png, omitting the .png.

    I've added the .png to upload the file! This trick work because your upload procedure check only for file type !

    regards

  16. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    287 posts

    Posted 10 Jul Link to this post

    Hi Giorgio,
    Thank you for the provided sample and indeed changing the file type, allows us to review your project.

    If I understand you correctly the problem you have an issue with displaying properly the axes label on iOS.
    I was able to reproduce this behavior on my side and indeed the labels will not be rendered properly, while the majorStep has been changed runtime.

    For your convenience, I logged new issue here and for further info, you could keep track on the issue.

    In the mean time, you could setup manually majorTickIntervalUnit from code behind, which will allow you to workaround this behavior. For example:

    HTML
    <RadCartesianChart id="chartid" height="250" row="0" tkExampleTitle tkToggleNavButton>
        <LinearAxis tkCartesianVerticalAxis></LinearAxis>
     
        <DateTimeContinuousAxis #myDateTimeContinuousAxis tkCartesianHorizontalAxis id="hAxis" [minimum]="minimum" [maximum]="maximum" [majorStep]="majorStep" [dateFormat]="dateFormat" labelFitMode="Rotate" labelRotationAngle="0.9"></DateTimeContinuousAxis>
        <LineSeries tkCartesianSeries [items]="categoricalSource" categoryProperty="timestamp" valueProperty="amount"></LineSeries>
        <ChartGridLineAnnotation tkCartesianAnnotations axisId="hAxis" hidden="false"
                                zPosition="BelowSeries" strokeWidth="4" value="1494633600000"
                                strokeColor="#EB916580">
        </ChartGridLineAnnotation>
         
    </RadCartesianChart>

    TypeScript
    import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
    import { DataService } from './data.service';
    import { DataGraph } from './data.service';
    import { ObservableArray } from "tns-core-modules/data/observable-array";
    import {RadChartBase} from "nativescript-telerik-ui-pro/chart"
    import {Page} from "ui/page"
    @Component({
        moduleId: module.id,
        selector: 'tk-chart-series-line',
        providers: [DataService],
        templateUrl: 'chart-series-line.component.html'
    })
    export class GraphComponent implements OnInit {
        private _categoricalSource: ObservableArray<DataGraph>;
         
        base_choice = false;
        minimum:any;
        maximum:any;
        dateFormat:string;
        majorStep:string = "Week";
        constructor(private _dataService: DataService, private page:Page) { }
        get categoricalSource(): ObservableArray<DataGraph> {
            //return this._categoricalSource;
            return this._categoricalSource;
        }
        @ViewChild("myChart") myChart: ElementRef;
        @ViewChild("myDateTimeContinuousAxis") myAxis: ElementRef;
        ngOnInit() {
            this.set_for_months();
            this._categoricalSource = new ObservableArray(this._dataService.getCategoricalMonthSource());
        }
        change_data() {
            if (this.base_choice) {
                console.log("Change to months");
                this.set_for_months();
                this._categoricalSource = new ObservableArray(this._dataService.getCategoricalMonthSource());
            } else {
                console.log("Change to days");
                this.set_for_days();
                this._categoricalSource = new ObservableArray(this._dataService.getCategoricalSource());
            }
            this.base_choice = !this.base_choice;
            // console.log("this.minimum"+this.minimum);
            // console.log("this.maximum"+this.maximum);
         
        }
        change_tick_day() {
            this.majorStep = "Day";
        }
         change_tick_month() {
            this.majorStep = "Month";
        }
         change_tick_week() {
            this.majorStep = "Week";
        }
        set_for_days() {
            //this.minimum = new Date("01/05/2017");
            //this.maximum = new Date("31/05/2017");
            this.minimum = new Date("2017-05-01");
            this.maximum = new Date("2017-05-31");
            this.dateFormat = "EE dd"  ;
            this.majorStep = "Day";
        }
        set_for_months() {
            this.minimum = new Date("2017-01-01");
            this.maximum = new Date("2017-12-01");
            this.dateFormat = "MMMM";
            this.majorStep = "Month";
            this.myAxis.nativeElement.ios.majorTickIntervalUnit = 5;
            this.myAxis.nativeElement.ios.minorTickIntervalUnit = 5;
        }
    }


    Also, this problem is fixed with the following commit and it would soon be available in @next version of the plugin.

    Please let me know, whether I could assist you further.

    Regards,
    nikolay.tsonev
    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.
  17. Giorgio
    Giorgio avatar
    18 posts
    Member since:
    Jun 2017

    Posted 11 Jul in reply to nikolay.tsonev Link to this post

    Hi Nikolay

    thanks for answer. I just tried your code, but as you can see on attached image when I switch back to "month" data, the graph shrink to one element. If I comment the lines below, the graph become as before

    this.myAxis.nativeElement.ios.majorTickIntervalUnit = 5;
    this.myAxis.nativeElement.ios.minorTickIntervalUnit = 5;

     

    I would like to remember to you that my example, provided before, don't run on android emulator

     

    regards

    G.

     

  18. Giorgio
    Giorgio avatar
    18 posts
    Member since:
    Jun 2017

    Posted 11 Jul in reply to Giorgio Link to this post

    Hi Nikolay

    I followed the link to the github page, and found the @next version of the plugin: I've installed and tried it, and the demo now run perfectly. There is still a little issue : on iOS there is an extra label at the end of the h axe. 

    example on month view, my last date is december 01 2017, but the last label is january 2018 !

    On android emulator, the demo display the first graph but I get errors when I play with the top button (see attached image)

    ragards

    G.

     

  19. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    287 posts

    Posted 12 Jul Link to this post

    Hi Giorgio,

    I tested the described issues and indeed they are valid.
    The problem in the Android, which is causing the following error
    Cannot convert object to Ljava/util/Calendar; at index 0
    has been related to a problem with parsing the Date and setting it to for the minimum and maximum values for the Chart. 
    The developer team already resolved this issue and now it should be available in @next version, Could you reinstall nativescript-telerik-ui-pro and verify, whether the problem is resolved on your side:

    Steps:

    tns plugin remove nativescript-telerik-ui-pro

    tns plugin add nativescript-telerik-ui-pro@next


    About the problem with showing one extra month at the end of the axes. This bug is logged here and fix could be expected for some of the next versions.

    Regards,
    nikolay.tsonev
    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.
  20. Giorgio
    Giorgio avatar
    18 posts
    Member since:
    Jun 2017

    Posted 12 Jul in reply to nikolay.tsonev Link to this post

    HI Nikolay

    I've updated the plugin to the @next version, and tested it with the demo app and confirm that the graphs look good both in ios and in android

    The next step will be to upgrade my main project

    thanks

    regards

    Giorgio

     

Back to Top