diff --git a/src/app/pages/dashboard/dashboard.component.ts b/src/app/pages/dashboard/dashboard.component.ts
index eba077b7..57275cd4 100644
--- a/src/app/pages/dashboard/dashboard.component.ts
+++ b/src/app/pages/dashboard/dashboard.component.ts
@@ -4,12 +4,13 @@ import {PopularApp} from './popularApp';
import {PieChart} from './pieChart';
import {TrafficChart} from './trafficChart';
import {UsersMap} from './usersMap';
+import {LineChart} from './lineChart';
import {BaCard} from '../../theme/components';
@Component({
selector: 'dashboard',
pipes: [],
- directives: [PopularApp, PieChart, TrafficChart, UsersMap, BaCard],
+ directives: [PopularApp, PieChart, TrafficChart, UsersMap, LineChart, BaCard],
encapsulation: ViewEncapsulation.None,
styles: [require('./dashboard.scss')],
template: require('./dashboard.html')
diff --git a/src/app/pages/dashboard/dashboard.html b/src/app/pages/dashboard/dashboard.html
index c1a225d6..5759744c 100644
--- a/src/app/pages/dashboard/dashboard.html
+++ b/src/app/pages/dashboard/dashboard.html
@@ -19,10 +19,28 @@
+
+
diff --git a/src/app/pages/dashboard/lineChart/index.ts b/src/app/pages/dashboard/lineChart/index.ts
new file mode 100644
index 00000000..ca8ca455
--- /dev/null
+++ b/src/app/pages/dashboard/lineChart/index.ts
@@ -0,0 +1 @@
+export * from './lineChart.component';
diff --git a/src/app/pages/dashboard/lineChart/lineChart.component.ts b/src/app/pages/dashboard/lineChart/lineChart.component.ts
new file mode 100644
index 00000000..bc721d94
--- /dev/null
+++ b/src/app/pages/dashboard/lineChart/lineChart.component.ts
@@ -0,0 +1,36 @@
+import {Component, ViewEncapsulation} from 'angular2/core';
+
+import './lineChart.loader.ts';
+import {LineChartService} from './lineChart.service';
+
+@Component({
+ selector: 'line-chart',
+ encapsulation: ViewEncapsulation.None,
+ providers: [LineChartService],
+ styles: [require('./lineChart.scss')],
+ template: require('./lineChart.html')
+})
+export class LineChart {
+
+ constructor(private _lineChartService:LineChartService) {
+ }
+
+ ngAfterViewInit() {
+ this._loadLineChart();
+ }
+
+ // TODO: load proper AmCharts theme
+ private _loadLineChart() {
+ let chart = AmCharts.makeChart('amchart', this._lineChartService.getData());
+
+ let zoomChart = () => {
+ chart.zoomToDates(new Date(2013, 3), new Date(2014, 0));
+ };
+
+ chart.addListener('rendered', zoomChart);
+
+ if (chart.zoomChart) {
+ chart.zoomChart();
+ }
+ }
+}
diff --git a/src/app/pages/dashboard/lineChart/lineChart.html b/src/app/pages/dashboard/lineChart/lineChart.html
new file mode 100644
index 00000000..0ba3a7a0
--- /dev/null
+++ b/src/app/pages/dashboard/lineChart/lineChart.html
@@ -0,0 +1 @@
+
diff --git a/src/app/pages/dashboard/lineChart/lineChart.loader.ts b/src/app/pages/dashboard/lineChart/lineChart.loader.ts
new file mode 100644
index 00000000..79d0e834
--- /dev/null
+++ b/src/app/pages/dashboard/lineChart/lineChart.loader.ts
@@ -0,0 +1,2 @@
+require('amcharts3');
+require('amcharts3/amcharts/serial.js');
diff --git a/src/app/pages/dashboard/lineChart/lineChart.scss b/src/app/pages/dashboard/lineChart/lineChart.scss
new file mode 100644
index 00000000..e63e4b15
--- /dev/null
+++ b/src/app/pages/dashboard/lineChart/lineChart.scss
@@ -0,0 +1,5 @@
+#amchart {
+ width: 100%;
+ height: 350px;
+ margin-top: -20px;
+}
diff --git a/src/app/pages/dashboard/lineChart/lineChart.service.ts b/src/app/pages/dashboard/lineChart/lineChart.service.ts
new file mode 100644
index 00000000..7cf5e296
--- /dev/null
+++ b/src/app/pages/dashboard/lineChart/lineChart.service.ts
@@ -0,0 +1,110 @@
+import {Injectable} from 'angular2/core';
+import {layoutColors, layoutPaths} from '../../../theme';
+
+@Injectable()
+export class LineChartService {
+
+ private _data = {
+ type: 'serial',
+ theme: 'blur',
+ marginTop: 15,
+ marginRight: 15,
+ dataProvider: [
+ { date: new Date(2012, 11), value: 0, value0: 0 },
+ { date: new Date(2013, 0), value: 15000, value0: 19000},
+ { date: new Date(2013, 1), value: 30000, value0: 20000},
+
+
+ { date: new Date(2013, 2), value: 25000, value0: 22000},
+ { date: new Date(2013, 3), value: 21000, value0: 25000},
+ { date: new Date(2013, 4), value: 24000, value0: 29000},
+ { date: new Date(2013, 5), value: 31000, value0: 26000},
+ { date: new Date(2013, 6), value: 40000, value0: 25000},
+ { date: new Date(2013, 7), value: 37000, value0: 20000},
+ { date: new Date(2013, 8), value: 18000, value0: 22000},
+ { date: new Date(2013, 9), value: 5000, value0: 26000},
+ { date: new Date(2013, 10), value: 40000, value0: 30000},
+ { date: new Date(2013, 11), value: 20000, value0: 25000},
+ { date: new Date(2014, 0), value: 5000, value0: 13000},
+
+ { date: new Date(2014, 1), value: 3000, value0: 13000},
+ { date: new Date(2014, 2), value: 1800, value0: 13000},
+ { date: new Date(2014, 3), value: 10400, value0: 13000},
+ { date: new Date(2014, 4), value: 25500, value0: 13000},
+ { date: new Date(2014, 5), value: 2100, value0: 13000},
+ { date: new Date(2014, 6), value: 6500, value0: 13000},
+ { date: new Date(2014, 7), value: 1100, value0: 13000},
+ { date: new Date(2014, 8), value: 17200, value0: 13000},
+ { date: new Date(2014, 9), value: 26900, value0: 13000},
+ { date: new Date(2014, 10), value: 14100, value0: 13000},
+ { date: new Date(2014, 11), value: 35300, value0: 13000},
+ { date: new Date(2015, 0), value: 54800, value0: 13000},
+ { date: new Date(2015, 1), value: 49800, value0: 13000}
+ ],
+ categoryField: 'date',
+ categoryAxis: {
+ parseDates: true,
+ gridAlpha: 0,
+ color: '#FFFFFF',
+ axisColor: '#FFFFFF'
+ },
+ valueAxes: [
+ {
+ minVerticalGap: 50,
+ gridAlpha: 0,
+ color: '#FFFFFF',
+ axisColor: '#FFFFFF'
+ }
+ ],
+ graphs: [
+ {
+ id: 'g0',
+ bullet: 'none',
+ useLineColorForBulletBorder: true,
+ lineColor: 'rgba(0,0,0,0.3)',
+ lineThickness: 1,
+ negativeLineColor: layoutColors.danger,
+ type: 'smoothedLine',
+ valueField: 'value0',
+ fillAlphas: 1,
+ fillColorsField: 'lineColor'
+ },
+ {
+ id: 'g1',
+ bullet: 'none',
+ useLineColorForBulletBorder: true,
+ lineColor: 'rgba(0,0,0,0.4)',
+ lineThickness: 1,
+ negativeLineColor: layoutColors.danger,
+ type: 'smoothedLine',
+ valueField: 'value',
+ fillAlphas: 1,
+ fillColorsField: 'lineColor'
+ }
+ ],
+ chartCursor: {
+ categoryBalloonDateFormat: 'MM YYYY',
+ categoryBalloonColor: '#4285F4',
+ categoryBalloonAlpha: 0.7,
+ cursorAlpha: 0,
+ valueLineEnabled: true,
+ valueLineBalloonEnabled: true,
+ valueLineAlpha: 0.5
+ },
+ dataDateFormat: 'MM YYYY',
+ export: {
+ enabled: true
+ },
+ creditsPosition: 'bottom-right',
+ zoomOutButton: {
+ backgroundColor: '#fff',
+ backgroundAlpha: 0
+ },
+ zoomOutText: '',
+ pathToImages: layoutPaths.images.amChart
+ };
+
+ getData() {
+ return this._data;
+ }
+}