Issue on refreshing cartesian with annotation

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

    Posted 19 Sep Link to this post

    Hi, also with the new version of the plugin:  "nativescript-telerik-ui-pro": "^3.1.1-2017-9-14-3",

    I have an exception during refresh of graph with dynamic annotation. 

    I attach my demo app that produce the exception if I play with tabs: Day->Month->Year->Month (exception) ->Day (graph without annotation)..

    rename the file omitting the .png extension and get a zip file!!

     

    Giorgio B.

     

  2. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    290 posts

    Posted 19 Sep Link to this post

    Hello,
    Thank you for reporting this issue.

    I investigated this problem and was able to reproduce it only for Android. This behavior is caused by the ngIf directive and the fact that the component will not hide properly. For your convenience, I logged new issue here, where you could keep track on the problem for further info.

    As a workaround, you could use the visibility property instead of ngIf. For example:
    <GridLayout 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" categoryProperty="date" valueProperty="amount"></LineSeries>
        <ChartGridLineAnnotation tkCartesianAnnotations axisId="hAxis" hidden="false"
                                zPosition="BelowSeries" strokeWidth="4" [value]="getAnnotation"
                                strokeColor="#EB916580">
        </ChartGridLineAnnotation>
         
         
    </RadCartesianChart>
     
     
    <RadCartesianChart [visibility]="section=='year' ? 'visible' : 'collapsed'" height="250" row="1" tkExampleTitle tkToggleNavButton>
        <LinearAxis tkCartesianVerticalAxis></LinearAxis>
        <DateTimeCategoricalAxis tkCartesianHorizontalAxis dateFormat="yyyy" ></DateTimeCategoricalAxis>
        <BarSeries tkCartesianSeries [items]="categoricalSource" categoryProperty="date" valueProperty="amount"></BarSeries>
     
    </RadCartesianChart>
    </GridLayout>

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

    Posted 20 Sep in reply to nikolay.tsonev Link to this post

    Hi Nikolay

    thanks for answer and for the workaround

    But this workaround broke the ios simulation of the demo, with Segmentation Fault error,

    also after updating the dev environment to the 3.2.1 versione of nativescript

    Giorgio B.

     

  4. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    290 posts

    Posted 25 Sep Link to this post

    Hello Giorgio,

    After a research, we made about the crash in iOS, we found this is another issue. The problem is related to the fact that when we change the 'items' source of BarSeries at runtime while using 'DateTimeCategoricalAxis' the application will throw the exception, which will lead to the below-mentioned problem.

    We logged this behavior in another issue, which could be found here and you also could keep track on it for further info.

    As a temporary solution at this time, you could remove the line which reloads the data for the BarSeries:
    Example:

    segment(args) {
            let segmetedBar = <SegmentedBar>args.object;
            console.log( "Item " + (segmetedBar.selectedIndex + 1));
            switch ( segmetedBar.selectedIndex) {
                case 0: {
                    this.showyear=false;
                this.set_for_days();
                this._categoricalSource = new ObservableArray(this._dataService.getCategoricalSource());
                break;
                }
            case 1: {
                this.showyear=false;
                this.set_for_months();
                this._categoricalSource = new ObservableArray(this._dataService.getCategoricalMonthSource());
                break;
            }
            case 2: {
                this.showyear=true;
                this.set_for_years();
                break;
            }
            }
        }


    Let me know whether this is applicable to your case or if 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.
  5. Giorgio
    Giorgio avatar
    18 posts
    Member since:
    Jun 2017

    Posted 25 Sep in reply to nikolay.tsonev Link to this post

    Hi Nikolay

    thanks for answer

    I trie your suggestion, but removing the year categoricalsource definition it makes me get an incorrect graph: the Horiz axe depends on what page I visited before.

    I tried also changing the data variable for the year graph, with a new "_categoricalSource2": so I isolated the bargraph with specific data, but on ios the exception is the same

    So for now i leave the *ngIf directive, since it does not crash the app.

    I'll follow the feedback issue you created to know when they will be resolved

    Bye

    Giorgio

     

  6. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    290 posts

    Posted 25 Sep Link to this post

    Hi,

    Indeed changing the data variable for the year graph, with a new "_categoricalSource2", will not resolve the issue, because of the fact that the issue is recreated, when you try to change the items source for this specific series type.  
    Another temporary solution could be to replace the BarSeries with some of the other available options. For example LineSeries or SplineSeries.

    Hope this could help.

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