Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-16 23:40:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

not really animated bar and radar charts

Browse source
This commit is contained in:
nixa 2016-05-03 17:10:49 +03:00
parent b252145bb0
commit e4d31c1cc8
2 changed files with 40 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

21
src/app/pages/charts/components/chartJs/chartJs.component.ts
View file

@ -17,8 +17,14 @@ import {chartColors} from "../../../../theme/theme.constants";
})
export class ChartJs {
public labels = ["Sleeping", "Designing", "Coding", "Cycling"];
public data = [20, 40, 5, 35];
public labels = {
one: ["Sleeping", "Designing", "Coding", "Cycling"],
two: ["April", "May", "June", "Jule", "August", "September", "October", "November", "December"]
};
public data = {
one: [20, 40, 5, 35],
two: [[1, 9, 3, 4, 5, 6, 7, 8, 2].map((e) => {return Math.sin(e) * 25 + 25})]
};
public colours = chartColors;
public options = {
scaleShowLabelBackdrop : false,
@ -32,6 +38,17 @@ export class ChartJs {
constructor(private _chartJsService:ChartJsService) {
}
ngOnInit() {
// var self = this;
// setInterval(() => {
//
// var temp = [...this.data.two];
// temp[0].unshift(temp[0].pop());
// this.data.two = temp;
//
// }, 300);
}
chartType(type) {
return type;
}

25
src/app/pages/charts/components/chartJs/chartJs.html
View file

@ -2,7 +2,7 @@
<div class="col-md-4">
<ba-card title="Pie" baCardClass="medium-card">
<base-chart class="chart chart-pie"
[legend]="true" [colours]="colours" [options]="options" [data]="data" [chartType]="chartType('Pie')" [labels]="labels" (chartClick)="changeData($event)">
[legend]="true" [colours]="colours" [options]="options" [data]="data.one" [chartType]="chartType('Pie')" [labels]="labels.one" (chartClick)="changeData($event)">
</base-chart>
</ba-card>
</div>
@ -10,7 +10,7 @@
<div class="col-md-4">
<ba-card title="Doughnut" baCardClass="medium-card">
<base-chart class="doughnut chart-doughnut"
[legend]="true" [colours]="colours" [options]="options" [data]="data" [chartType]="chartType('Doughnut')" [labels]="labels" (chartClick)="changeData($event)">
[legend]="true" [colours]="colours" [options]="options" [data]="data.one" [chartType]="chartType('Doughnut')" [labels]="labels.one" (chartClick)="changeData($event)">
</base-chart>
</ba-card>
</div>
@ -18,8 +18,25 @@
<div class="col-md-4">
<ba-card title="Polar" baCardClass="medium-card">
<base-chart class="polar chart-polar"
[legend]="true" [colours]="colours" [options]="options" [data]="data" [chartType]="chartType('PolarArea')" [labels]="labels" (chartClick)="changeData($event)">
[legend]="true" [colours]="colours" [options]="options" [data]="data.one" [chartType]="chartType('PolarArea')" [labels]="labels.one" (chartClick)="changeData($event)">
</base-chart>
</ba-card>
</ba-card>
</div>
</div>
<div class="row ">
<div class="col-md-6">
<ba-card title="Animated Radar" baCardClass="with-scroll col-eq-height">
<base-chart class="waveLine chart-waveLine"
[legend]="false" [colours]="colours" [options]="options" [data]="data.two" [chartType]="chartType('Radar')" [labels]="labels.two" (chartClick)="changeData($event)">
</base-chart>
</ba-card>
</div>
<div class="col-md-6">
<ba-card title="Animated Bars" baCardClass="with-scroll col-eq-height">
<base-chart class="waveBars chart-waveBars"
[legend]="false" [colours]="colours" [options]="options" [data]="data.two" [chartType]="chartType('Bar')" [labels]="labels.two" (chartClick)="changeData($event)">
</base-chart>
</ba-card>
</div>
</div>