ejs-chart doesn't update on changes to binded data

[Ryan]

Hello, 

       I've used ej-angular-charts ver 17.3.30 in my project. I've made a tab-group to show different charts at the same time in tabs which the user can navigate. I've also allowed the user to drag and change the tabs position. After changing the position of the tabs I also have to rearrange the binded data in that selected position. However, here the charts show blank sometimes. Is the chart failing to detect changes? I printed the data in console and it's rearranged properly. I've added a video showing the exact problem I have. Below is my code 

The div with id="my-boundary " is the substitute for the inbuilt angular tabs which we can't drag and move around. 

            <div id="my-boundary" class="example-list" cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="drop($event)">

                <div class="example-box" *ngFor="let tab of tabs;let i=index" (click)="selectTab(tabGroup,tab)" cdkDragBoundary="#my-boundary" cdkDragLockAxis="x" cdkDrag>{{tab.name}}</div>

            </div>

        <mat-tab-group #tabGroup [@.disabled]="true" [selectedIndex]="selectedTab" mat-stretch-tabs class="widget-tabs" style="height: inherit;"> 

            <mat-tab *ngFor="let tab of tabs; let index = index" [label]="tab.name"> 

                <ng-template style="height: inherit;" matTabContent>

                    <ejs-chart class="analyticsGraph" id="analyticsGraph{{chartId}}" #analyticsGraph *ngIf="loaded == true && noData[selectedTab] == false" height='90%' [primaryXAxis]='decideLabel()' [primaryYAxis]='primaryYAxis'

                        [chartArea]='chartArea' [zoomSettings]='zoom' [tooltip]="chartTooltip" [series]="series[selectedTab]" [crosshair]="crosshair" [renderingMode]='renderingMode' [size.width]="width" [margin]="margin" [legendSettings]='legendSettings' (axisLabelRender)="axisLabelRender($event)"

                        (tooltipRender)='tooltipRender($event)' (chartMouseClick)="legendClick($event)">

                    </ejs-chart>

                </ng-template>

            </mat-tab>

        </mat-tab-group>

.ts file

drop(event: CdkDragDrop<string[]>) {

        if(event.previousIndex!=event.currentIndex){

            let currentTab=this.tabs[this.selectedTab];

            moveItemInArray(this.tabs, event.previousIndex, event.currentIndex);

            moveItemInArray(this.data_array, event.previousIndex, event.currentIndex);

            

            this.loading=true;

            this.loaded=false;

            let newTabIndex=this.tabs.findIndex(tab=>{return tab.no==currentTab.no});

            console.log("NEW TAB INDEX --> "+newTabIndex);

            if(newTabIndex!=this.selectedTab)

                this.selectedTab=newTabIndex;

            this.rearrangeData();

            

            this.api_input.parameters=this.tabs.map(tab=>{return tab.no});

            this.inputData.parameters=this.api_input.parameters.slice();

            this.input_Change.emit({data:this.inputData,id:this.chartId});

            this.openSaveModel()

            setTimeout(()=>{

                this.loading=false;

                this.loaded=true;

            },50)

        }

    }

rearrangeData(){

        this.tabs.forEach((tab,index) => {

            console.log(tab.name+" --> "+tab.no);

            // this.data_array[index] = this.data_array[tab.no];

            if(this.data_array[index] == undefined || this.data_array[index].data.length == 0){

                this.noData[index] = true;

            }

            else{

                this.noData[index]=false;

                this.series[index] = []

                this.data_array[index].data.forEach((data,index2) => {

                    this.series[index][index2] = {

                        dataSource: data.values,

                        fill: this.series_color[index2],

                        width:2,

                        opacity: 1,

                        type: 'Line',

                        xName: 'x',

                        yName: 'y', 

                        name: data.name,

                        legendShape: 'Circle'

                    }

                }); 

            

            }

        }); 

        

        let name = this.tabs[this.selectedTab].name;

        console.log(this.data_array)

        console.log(this.selectedTab)

        if(this.data_array.length>0 && this.data_array[this.selectedTab]!=undefined){

            let unit = this.data_array[this.selectedTab].unit;

            this.chartTooltip = {

                headerText: '',

                enable: true,

                header: '',

                textStyle: {

                    color: 'black'

                },

                fill: 'white',

                opacity: 10,

                border: {

                    width: 1,

                    color: 'grey'

                },

                fadeOutDuration: 100,

                shared: true, 

                format: '${series.name} : ${point.x} : <b>${point.y} '+unit+'</b>'

            };

    

            if(unit!=undefined){

                this.primaryYAxis.title = name +' ( '+unit+' )'

                this.chartTooltip.format = '${series.name} : ${point.x} : <b>${point.y} '+unit+'</b>'

            }

            else{

                this.primaryYAxis.title = name

                this.chartTooltip.format = '${series.name} : ${point.x} : <b>${point.y}</b>'

            }

        }

        // Set minimum to first value received in response

        if(this.non_zero_axis.indexOf(name) != -1){

            if(this.data_array[this.selectedTab].data != undefined && this.data_array[this.selectedTab].data[0] != undefined

            && this.data_array[this.selectedTab].data[0].values != undefined && this.data_array[this.selectedTab].data[0].values.length != 0)

            this.primaryYAxis.minimum = parseFloat(this.data_array[this.selectedTab].data[0].values[0].y)

            //console.log(this.data_array[this.selectedTab].data[0].values[0].y)

        }

        else if(this.zero_axis.indexOf(name) != -1){

            this.primaryYAxis.minimum = 0

        }

    }

Attachment: changedetectionBug_3225d5d5.zip

[Srihari Muthukaruppan]

Hi Ryan, 

 

We have analysed your query. From that, we suspect the reported scenario may occur due to the same chart id provided for multiple contents in the tab. Unfortunately, we are unable to reproduce the reported scenario. Hence if you still face this issue. kindly revert us with the following information which will be more helpful for further analysis and provide you the solution sooner.      

1. Please share the runnable project.
2. Share the details if you have done any other customization in your sample.

Regards,   

Srihari M  

[Ryan]

Hello,

       These problems started occurring after I migrated from angular 7 to 9, so maybe that's the reason behind the flaw. I'll check that out. Thank you for taking interest and spending your time to try to solve my query.

Regards,

Ryan D'Mello

[Srihari Muthukaruppan]

Hi Ryan,  

 

Most welcome. Kindly get in touch with us, if you requires further assistance. We are always happy in assisting you.   

   

Thanks,   

Srihari M