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