last three charts for chart.js

This commit is contained in:
nixa 2016-05-03 18:32:59 +03:00
parent e4d31c1cc8
commit 252726d759
2 changed files with 32 additions and 2 deletions

View file

@ -19,12 +19,18 @@ export class ChartJs {
public labels = {
one: ["Sleeping", "Designing", "Coding", "Cycling"],
two: ["April", "May", "June", "Jule", "August", "September", "October", "November", "December"]
two: ["April", "May", "June", "Jule", "August", "September", "October", "November", "December"],
three: ["May", "June", "Jule", "August", "September", "October", "November"]
};
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})]
two: [[1, 9, 3, 4, 5, 6, 7, 8, 2].map((e) => {return Math.sin(e) * 25 + 25})],
three: [
[65, 59, 90, 81, 56, 55, 40],
[28, 48, 40, 19, 88, 27, 45]
]
};
public series = ['Product A', 'Product B'];
public colours = chartColors;
public options = {
scaleShowLabelBackdrop : false,

View file

@ -40,3 +40,27 @@
</ba-card>
</div>
</div>
<div class="row ">
<div class="col-lg-4 col-md-6">
<ba-card title="Radar" baCardClass="with-scroll ">
<base-chart id="radar" class="chart chart-radar"
[legend]="false" [series]="series" [colours]="colours" [options]="options" [data]="data.three" [chartType]="chartType('Radar')" [labels]="labels.three" (chartClick)="changeData($event)">
</base-chart>
</ba-card>
</div>
<div class="col-lg-4 col-md-6">
<ba-card title="Line" baCardClass="with-scroll ">
<base-chart id="line" class="chart chart-line"
[legend]="false" [series]="series" [colours]="colours" [options]="options" [data]="data.three" [chartType]="chartType('Line')" [labels]="labels.two" (chartClick)="changeData($event)">
</base-chart>
</ba-card>
</div>
<div class="col-lg-4 col-md-12">
<ba-card title="Bars" baCardClass="with-scroll ">
<base-chart id="bar" class="chart chart-bar"
[legend]="false" [series]="series" [colours]="colours" [options]="options" [data]="data.three" [chartType]="chartType('Bar')" [labels]="labels.two" (chartClick)="changeData($event)">
</base-chart>
</ba-card>
</div>
</div>