Exceptions on graph rendering

11 posts, 0 answers
  1. Giorgio
    Giorgio avatar
    24 posts
    Member since:
    Jun 2017

    Posted 25 Oct Link to this post

    Hi, I moved from the telerik-ui-pro package, to the pro-ui package. but

    and I get exceptions on both versions stable and @next.

    I attached a demo project, please remove the png extension to get zip file, and try It.

    On iOS the exception start when I navigate to the page with the graph  (on the demo on start page tap to button to go the the graph page): in the graph I have a dynamic legendTitle with a translation that generate the exception. Only if the I navigate to the page with dynamic [legendTitle] I get the exception, if you enter immediately on the graph page there is no exception ( try to change the default routing on app.routing.ts from "start" to "graph") 

    On Android the exception begin when on the graph page I play with the day-month-year segmentbar ( this exception had already been reported but is still unresolved)

    Giorgio B.

     

  2. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    316 posts

    Posted 25 Oct Link to this post

    Hello Giorgio,

    The file attached in the post is only providing the package.json, tsconfig.json and references.d.ts files but the whole app folder along with the application logic are not present in the archive. If possible, please resent the sample project so we could debug and investigate it locally. You can also send us the error logs which is thrown when the app crashes on iOS and on Android.

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

    Posted 25 Oct in reply to Nikolay Iliev Link to this post

    Hi

    The size of the complete file is more than 2MB, so you an download from the link from drive:

    https://drive.google.com/file/d/0B9lbzuNE97tKdFluLWtOSkdsOUU/view?usp=sharing

    I also add the fact that the iOS exception is tedious because it make invalid all other pages where I have the graphs. On my real app I have 3 pages with graphs and when this exception occur I can't navigate to the other pages

  4. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    316 posts

    Posted 26 Oct Link to this post

    Hello Giorgio,

    After the initial investigation, it seems that the issue is caused by a mismatch of nativescript-angular and the Angular dependencies + the used version of nativescript-pro-ui.
    Using the latest official version of nativescript-pro-ui along with the latest versions of nativescript-angular and tns-core-modules resolved the issue on my side.

    Here is the package.json configuration I have used.
    {
      "description": "NativeScript Application",
      "license": "SEE LICENSE IN <your-license-filename>",
      "readme": "NativeScript Application",
      "repository": "<fill-your-repository-here>",
      "nativescript": {
        "id": "org.nativescript.graphdemo",
        "tns-android": {
          "version": "3.2.0"
        },
        "tns-ios": {
          "version": "3.2.0"
        }
      },
      "dependencies": {
        "@angular/animations": "~4.4.1",
        "@angular/common": "~4.4.1",
        "@angular/compiler": "~4.4.1",
        "@angular/core": "~4.4.1",
        "@angular/forms": "~4.4.1",
        "@angular/http": "~4.4.1",
        "@angular/platform-browser": "~4.4.1",
        "@angular/router": "~4.4.1",
        "@ngx-translate/core": "^7.0.0",
        "@ngx-translate/http-loader": "^0.1.0",
        "nativescript-angular": "~4.4.1",
        "nativescript-pro-ui": "3.1.4",
        "nativescript-theme-core": "~1.0.2",
        "reflect-metadata": "~0.1.8",
        "rxjs": "~5.3.0",
        "tns-core-modules": "^3.2.0",
        "zone.js": "~0.8.2"
      },
      "devDependencies": {
        "babel-traverse": "6.25.0",
        "babel-types": "6.25.0",
        "babylon": "6.17.4",
        "lazy": "1.0.11",
        "nativescript-dev-typescript": "~0.4.0",
        "typescript": "~2.2.1"
      }
    }

    With the above changes, please remove node_modules and platforms folders and rebuild your application and the charts and the legend should work as expected.

    Please notice that the next version of nativescript-pro-ui is under development and some issue will be fixed before going live as an official release (including an issue with setting dynamically legendTitle which you have hit when using next).

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

    Posted 26 Oct in reply to Nikolay Iliev Link to this post

    Hi Nikolay,

    thanks for your suggestions, I will try it.

    I would like to know if the translate plugin "@ngx-translate/core": "^7.0.0",

    could be also updated without issue, because there is a new version 8.0.0 but it require angular >= 4.3, as explained on npm description page.

    I would like to ask you which is the better method to update @angular on a ns project

    regards

     

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

    Posted 26 Oct Link to this post

    Hi Nikolay

    I tried my project with the new angular modules version on package.json:

    For the iOS exception is enough to install the plugin nativescript-pro-ui at the stable version 3.1.4

    For Android I have an exception, that give me the output below when I play with tab buttons month-year-month-day:

     ERROR: Unsupported value type for annotation
    JS: ERROR Error: java.lang.NullPointerException: Attempt to invoke virtual method 'void com.telerik.widget.chart.visualization.common.ChartElementPresenter.setCollectionIndex(int)' on a null object reference
    JS:     com.telerik.widget.chart.visualization.common.PresenterCollection.add(PresenterCollection.java:66)
    JS:     com.tns.Runtime.callJSMethodNative(Native Method)
    JS:     com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1084)
    JS:     com.tns.Runtime.callJSMethodImpl(Runtime.java:966)
    JS:     com.tns.Runtime.callJSMethod(Runtime.java:953)
    JS:     com.tns.Runtime.callJSMethod(Runtime.java:937)
    JS:     com.tns.Runtime.callJSMethod(Runtime.java:929)
    JS:     com.tns.gen.java.lang.Object_frnal_ts_helpers_l58_c38__TabChangeListenerImpl.onTabChanged(Object_frnal_ts_helpers_l58_c38__TabChangeListenerImpl.java:12)
    JS:     android.widget.TabHost.invokeOnTabChangeListener(TabHost.java:421)
    JS:     android.widget.TabHost.setCurrentTab(TabHost.java:406)
    JS:     android.widget.TabHost$2.onTabSelectionChanged(TabHost.java:158)
    JS:     android.widget.TabWidget$TabClickListener.onClick(TabWidget.java:532)
    JS:     android.view.View.performClick(View.java:5637)
    JS:     android.view.View$PerformClick.run(View.java:22429)
    JS:     android.os.Handler.handleCallback(Handler.java:751)
    JS:     android.os.Handler.dispatchMessage(Handler.java:95)
    JS:     android.os.Looper.loop(Looper.java:154)
    JS:     android.app.ActivityThread.main(ActivityThread.java:6119)
    JS:     java.lang.reflect.Method.invoke(Native Method)
    JS:     com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:886)
    JS:     com.android.internal.os.ZygoteInit.main(ZygoteInit.java:776)
    JS: ERROR CONTEXT [object Object]

  7. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    316 posts

    Posted 26 Oct Link to this post

    Hello Giorgio,

    Regarding the usage of the lastest version of ngx-translate/core

    I have made some test while using version 8.0.0 of ngx-translate/core and it seems that you can use the newest version but in combination with the
    old ngx-translate/http-loader (ver. 0.1.0).

    pacjage.json dependencies
    "@ngx-translate/core": "^8.0.0",
    "@ngx-translate/http-loader": "^0.1.0",

    The latest version of ngx-translate/http-loader is using HttpClient which is not supported at this very moment in NativeScript. Our developers are working on implementing the support for HttpClient and once the implementation is incldued in nativescript-angular, we will make additional test to verify that it can be used with the latest ngx-trasnlate/http-loader version.
    As a basic recommendation I would advice to use version 7.0.0 of ngx-translate/core but you can experiment and test if ver.8.0.0 is stable when using the old HTTP module.

    Regarding update steps for all Angular dependencies

    We have provided a automated script to easily update all Angular dependencies in your project to the latest official supported combs.
    To do that follow these steps:
    npm i nativescript-angular@latest
    npm install
    cd node_modules/nativescript-angular/bin
    ./update-app-ng-deps
    cd ../../../
    npm install
    rm -rf platforms hooks
    tns run ios

    The above steps will install the latest official version of nativescript-angular plugin. Then after navigating to its bind directory, we are executin the update script with ./update-appng-deps.
    This script will update all Angular related dependencies in your package.json file. Once the package.json is update we should run once again npm install to get the updated versions.
    After all this is done you can rebuild your project.

    FYI: The same workflow can be appllied to nativescript-dev-webpack to update all webpack related dependences (in the navigate step go to node_modules/nativescript-dev-webpack/bin and execute ./update-ns-webpack script).

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

    Posted 26 Oct in reply to Nikolay Iliev Link to this post

    Hi Nikolay

    thanks very very much,

    For now I need to make more stable my app, so for translations I leave actual version , and also for angular.

    So what about the Android exception I wrote before? It causes the graph to fail for the first passage "year-month" or "year-day" and at the next passage "day-month" or "month-day" the graph is visible but without the annotation bar

    Regards

  9. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    316 posts

    Posted 27 Oct Link to this post

    Hi Giorgio,

    After some additional investigation on the Android issue, it appears that the problem is caused by a bug when using Angular structural directive with RadChart.
    The bug is logged here. Our developers are currently investigating the issue and will post any related information in the linked thread.


    Solution

    As a workaround, we can wrap the code platform specific code and execute different logic for iOS (where we can use ngIf to show/hide the charts) and for Android (where the same effect can be achieved by using visibility).

    For example here is how I have resolved the issue using your sample application. With the snippet below the charts are working as expected for both iOS and Android.

    chart-series-line.component.html
    <GridLayout *ngIf="!androidApp" height="300" rows="auto, *">
        <RadCartesianChart *ngIf="section!='year'" 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" [legendTitle]="'SHARED.leg1' | translate" categoryProperty="date"
                valueProperty="amount"></LineSeries>
            <LineSeries tkCartesianSeries [items]="categoricalSource" [legendTitle]="'SHARED.leg2' | translate" categoryProperty="date"
                valueProperty="past"></LineSeries>
            <ChartGridLineAnnotation tkCartesianAnnotations axisId="hAxis" hidden="false" zPosition="BelowSeries" strokeWidth="4" [value]="getAnnotation"
                strokeColor="#EB916580">
            </ChartGridLineAnnotation>
            <RadLegendView tkCartesianLegend position="Top" title="Series type" height="150" enableSelection="true"></RadLegendView>
        </RadCartesianChart>
     
        <RadCartesianChart *ngIf="section=='year'" height="250" row="1" tkExampleTitle tkToggleNavButton>
            <LinearAxis tkCartesianVerticalAxis></LinearAxis>
            <DateTimeCategoricalAxis tkCartesianHorizontalAxis dateFormat="yyyy"></DateTimeCategoricalAxis>
            <BarSeries tkCartesianSeries [items]="categoricalSource2" categoryProperty="date" valueProperty="amount"></BarSeries>
        </RadCartesianChart>
    </GridLayout>
     
    <GridLayout *ngIf="androidApp" height="300" rows="auto, *">
        <RadCartesianChart [visibility]="section!='year' ? 'visible' : 'collapsed'" 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" [legendTitle]="'SHARED.leg1' | translate" categoryProperty="date"
                valueProperty="amount"></LineSeries>
            <LineSeries tkCartesianSeries [items]="categoricalSource" [legendTitle]="'SHARED.leg2' | translate" categoryProperty="date"
                valueProperty="past"></LineSeries>
            <ChartGridLineAnnotation tkCartesianAnnotations axisId="hAxis" hidden="false" zPosition="BelowSeries" strokeWidth="4" [value]="getAnnotation"
                strokeColor="#EB916580">
            </ChartGridLineAnnotation>
            <RadLegendView tkCartesianLegend position="Top" title="Series type" height="150" enableSelection="true"></RadLegendView>
        </RadCartesianChart>
     
        <RadCartesianChart [visibility]="section=='year' ? 'visible' : 'collapsed'" height="250" row="1" tkExampleTitle tkToggleNavButton>
            <LinearAxis tkCartesianVerticalAxis></LinearAxis>
            <DateTimeCategoricalAxis tkCartesianHorizontalAxis dateFormat="yyyy"></DateTimeCategoricalAxis>
            <BarSeries tkCartesianSeries [items]="categoricalSource2" categoryProperty="date" valueProperty="amount"></BarSeries>
        </RadCartesianChart>
    </GridLayout>

    graph.component.ts
    import { isAndroid } from "platform";
     
    export class GraphComponent implements OnInit {
     
       public androidApp: boolean = isAndroid;
     
       // more code follows here
    }


    Notice that with the above solution we have two almost identical GridLayouts each of the providing two RadCharts. We are using *ngIf to load the respective code for Android or iOS.
    The difference is that we are using visibility to hide/show the charts on Android and in the same time using ngIf to hide/show the charts on iOS.

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

    Posted 27 Oct in reply to Nikolay Iliev Link to this post

    Thanks very very much

    Your solution is the one I came to, and I delayed implementing it to see if this bug was solved in the @next development versions of the plugin pro-ui. That's why you found the @next version in my demo app.
    This evening we publish version 1.0 of the app, so I've corrected the html code with the charts according to what you suggested, to avoid exceptions.

    Best regards

    Giorgio

  11. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    316 posts

    Posted 30 Oct Link to this post

    Hello Giorgio,

    Indeed the bug is not fixed at this very moment.
    Keep track on the linked issues where the information will be updated once a stable solution is found and implemented.

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