This is a migrated thread and some comments may be shown as answers.

Simple graph run on android but crash on ios

19 Answers 174 Views

Chart

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

19 Answers, 1 is accepted

answered on 28 Jun 2017, 09:36 AM

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.

answered on 28 Jun 2017, 10:19 AM

archivio-zip.png

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

answered on 28 Jun 2017, 10:26 AM

schermata-2017-06-28-alle-12-25-35.png

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

answered on 28 Jun 2017, 10:55 AM

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

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

answered on 28 Jun 2017, 03:58 PM

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.

answered on 29 Jun 2017, 08:35 AM

schermata-2017-06-29-alle-10-16-09.png

schermata-2017-06-29-alle-10-16-25.png

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:

answered on 03 Jul 2017, 12:25 PM

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

answered on 05 Jul 2017, 09:21 AM

schermata-2017-07-05-alle-10-48-57.png

schermata-2017-07-05-alle-11-12-28.png

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"> <RadCartesianChart height="250" row="0" tkExampleTitle tkToggleNavButton> <LinearAxis tkCartesianVerticalAxis></LinearAxis> 

<!--<br>    <DateTimeCategoricalAxis tkCartesianHorizontalAxis></DateTimeCategoricalAxis><br>    <LineSeries tkCartesianSeries [items]="categoricalSource" categoryProperty="date" valueProperty="amount"></LineSeries><br>    -->

 <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"

<br>                            zPosition="BelowSeries" strokeWidth="4" value="1494633600000"<

br> strokeColor="#EB916580"> </ChartGridLineAnnotation> </RadCartesianChart> <RadCartesianChart height="250" row="1" tkExampleTitle tkToggleNavButton> <LinearAxis tkCartesianVerticalAxis></LinearAxis> <DateTimeCategoricalAxis tkCartesianHorizontalAxis dateFormat="MMM-dd" labelFitMode="Rotate" labelRotationAngle="1.2"></DateTimeCategoricalAxis> <LineSeries tkCartesianSeries [items]="categoricalSource" categoryProperty="date" valueProperty="amount"></LineSeries> 

<!--<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>    -->

 </RadCartesianChart> </GridLayout>

answered on 05 Jul 2017, 10:28 AM

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

answered on 06 Jul 2017, 04:37 PM

schermata-2017-07-06-alle-18-14-56.png

archivio-zip.png

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

answered on 10 Jul 2017, 02:56 PM

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 version of the plugin.

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

Regards,
nikolay.tsonev
Progress Telerik

answered on 11 Jul 2017, 08:29 AM

schermata-2017-07-11-alle-10-17-14.png

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

answered on 11 Jul 2017, 09:02 AM

schermata-2017-07-11-alle-11-00-32.png

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

answered on 12 Jul 2017, 07:19 AM

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 --- 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

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Simple graph run on android but crash on ios

19 Answers, 1 is accepted