import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<button (click)="addSeries()">Add series</button>
<kendo-chart>
<kendo-chart-series>
<kendo-chart-series-item [stack]="true" [data]="data"
categoryField="organization"
*ngFor="let series of model"
[name]="series.name"
[field]="series.field">
<kendo-chart-series-item-labels format="c0" background="none" background="none">
</kendo-chart-series-item-labels>
</kendo-chart-series-item>
</kendo-chart-series>
<kendo-chart-legend position="bottom" orientation="horizontal"></kendo-chart-legend>
</kendo-chart>
`
})
export class AppComponent {
public showSeries: boolean = false;
data: any = [
{
"organization": "Ditsch Lawn",
"gross": 400,
"net": 300
},
{
"organization": "Cleaning",
"gross": 500,
"net": 200
},
{
"organization": "Authority",
"gross": 100,
"net": 600
}
];
public model = [];
public labelContent(e: any): string {
return e.value;
}
public addSeries() {
let keys: any[] = Object.keys(this.data[0]);
keys = keys.filter(k => (k != "organization"));
keys.map(d => {
this.model.push({
name: d,
field: d
});
});
}
}
Comments
Post a Comment