Calling accumulationcharts "again" wont work

[Laurens Albers]

Hi,

I have a dashboard with different panels, Maps, AccumulationChart and Charts (all angular packages btw -> @syncfusion/ej-angular-xxxx)

But for creating the "content" in the panels, i'm creating a new class referring to the id, based upon the "javascript&TypeScript" variant.

 let chart1 = new Chart( etc....

let chart2 = new Maps( etc...

let chart3 etc..

This works fine, but when calling new AccumulationChart a second time(same code) this wont "generate/appear". The other components work fine.

calling this twice

//put the following  it under some button and call it twice, first time it will generate just fine, after that it wont.

TS

    let chart2 = new AccumulationChart({

      series: [

        {

          innerRadius: "0%",

          radius: "100%",

          dataSource: this.pieData,

          xName: 'x',

          yName: 'y',

          dataLabel: { visible: false }

        }

      ],

    },

      '#element2');

pieData: object[] = [

    { x: 'Jan', y: 15, text: 'Jan: 3' }, { x: 'Feb', y: 20, text: 'Feb: 3.5' },

    { x: 'Mar', y: 15, text: 'Mar: 7' }, { x: 'Apr', y: 13.5, text: 'Apr: 13.5' },

    { x: 'May', y: 19, text: 'May: 19' }, { x: 'Jun', y: 23.5, text: 'Jun: 23.5' },

    { x: 'Jul', y: 26, text: 'Jul: 26' }, { x: 'Aug', y: 25, text: 'Aug: 25' },

    { x: 'Sep', y: 21, text: 'Sep: 21' }, { x: 'Oct', y: 15, text: 'Oct: 15' },

    { x: 'Nov', y: 15, text: 'Nov: 9' }, { x: 'Dec', y: 17, text: 'Dec: 35' }

  ];

HTML

  <ejs-dashboardlayout id='dashboardLayout' #dashLayout [cellSpacing]='cellSpacing'

                           [columns]="6"

                           [cellAspectRatio]='aspectRatio'

                           [panels]="panels">

        <e-panels>

          <e-panel [sizeX]="2" [sizeY]="2" [row]="0" [col]="2">

            <ng-template #header>

              <div style="float: left">{{panel2}}</div>

              <div style="float: right">

                <button style="margin-right: -10px; margin-top: -20px" class="mat-settings-button" mat-icon-button (click)="openDialog(1)">

                  <mat-icon>settings</mat-icon>

                </button>

                <button style="margin-right: -20px; margin-top: -20px" class="mat-settings-button" mat-icon-button (click)="remove('Panel1')">

                  <mat-icon>clear</mat-icon>

                </button>

              </div>

            </ng-template>

            <ng-template #content>

              <div class="setBody" id="element2"></div>

            </ng-template>

          </e-panel>

The question: Any idea why this is/could be happening??

My goal is replacing the contents of the panels depending on the users settings, which means i could/will call accumulationcharts more than once.

code like the following work just fine repeatedly.

TS

    let chart1 = new Chart({

      primaryXAxis: this.primaryXAxis,

      series: [

        {

          type: 'Line',

          dataSource: this.chartData,

          xName: 'month',

HTML

          <e-panel [sizeX]="2" [sizeY]="2" [row]="0" [col]="0">

            <ng-template #header>

              <div style="float: left">{{panel1}}</div>

              <div style="float: right">

                <button style="margin-right: -10px; margin-top: -20px" class="mat-settings-button" mat-icon-button (click)="openDialog(1)">

                  <mat-icon>settings</mat-icon>

                </button>

                <button style="margin-right: -20px; margin-top: -20px" class="mat-settings-button" mat-icon-button (click)="remove('Panel1')">

                  <mat-icon>clear</mat-icon>

                </button>

              </div>

            </ng-template>

            <ng-template #content>

              <div class="setBody" id="element1"></div>

            </ng-template>

          </e-panel>

          yName: 'sales',

          name: 'Sales'

        }

      ],

    },

      '#element1');

Using:

TypeScript 3+, Angular 7+, Angular Material

    "@syncfusion/ej2-angular-charts": "^17.1.50",

[Christopher Issac Sunder K]

Hi Laurens, 

We checked your reported query – “Calling accumulation charts again not working”. You can resolve this issue by any of the below methods, 

Method – 1: “Chart’s refresh method” 

 

After re-rendering the accumulation chart call its refresh method, 

renderPieChart() { 

    let chart2 = new AccumulationChart({ 

        series: [ 

            { 

                innerRadius: "0%", 

                radius: "100%", 

                dataSource: this.pieData, 

                xName: 'x', 

                yName: 'y', 

                dataLabel: { visible: false } 

            } 

        ], 

    }, 

        '#element2'); 

    chart2.refresh(); 

} 

We have prepared a sample based on this for your reference. Please find it below, 

Sample: https://stackblitz.com/edit/angular-1zsxrm-vmsasj 

Method – 2: “Remove the chart container element before re-rendering it” 

 

Remove the accumulation chart container element and then re-render it, 

renderPieChart() { 

    document.getElementById('element2').innerHTML = ''; 

    let chart2 = new AccumulationChart({ 

        series: [ 

            { 

                innerRadius: "0%", 

                radius: "100%", 

                dataSource: this.pieData, 

                xName: 'x', 

                yName: 'y', 

                dataLabel: { visible: false } 

            } 

        ], 

    }, 

        '#element2'); 

} 

We have prepared a sample based on this for your reference. Please find it below, 

Sample: https://stackblitz.com/edit/angular-1zsxrm-vrzuyk 

Let us know if you have any concerns. 

Thanks,
Christo