Issue on refreshing cartesian with annotation

[Giorgio]

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.

 

[Nikolay Tsonev]

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

[Giorgio]

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.

 

[Nikolay Tsonev]

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

[Giorgio]

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

 

[Nikolay Tsonev]

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