Calling accumulationcharts "again" wont work

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",






1 Reply

CI Christopher Issac Sunder K Syncfusion Team June 21, 2019 12:45 PM UTC

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, 


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, 


Let us know if you have any concerns. 

Thanks,
Christo 


Loader.
Up arrow icon