diff --git a/ng2-components/ng2-activiti-analytics/README.md b/ng2-components/ng2-activiti-analytics/README.md
index ac208e5422..ad7db61552 100644
--- a/ng2-components/ng2-activiti-analytics/README.md
+++ b/ng2-components/ng2-activiti-analytics/README.md
@@ -23,6 +23,31 @@ Also make sure you include these dependencies in your `index.html` file:
     <script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script>
 ```
 
+#### Moment
+
+```sh
+npm install moment --save
+```
+
+Also make sure you include these dependencies in your `index.html` file:
+
+```html
+    <script src="node_modules/moment/min/moment.min.js"></script>
+```
+
+
+#### Material Design Date picker
+
+```sh
+npm install md-date-time-picker --save
+```
+
+Also make sure you include these dependencies in your `index.html` file:
+
+```html
+    <script src="node_modules/md-date-time-picker/dist/js/mdDateTimePicker.min.js"></script>
+```
+
 #### Material Design Lite
 
 The style of this component is based on [material design](https://getmdl.io/), so if you want to visualize it correctly you have to add the material
@@ -41,17 +66,34 @@ Also make sure you include these dependencies in your `index.html` file:
 <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
 ```
 
-## Basic usage example Activiti Analytics
-
+## Basic usage example Activiti Analytics List
+The component shows the list of all the available reports
 ```html
-<activiti-analytics></activiti-analytics>
+<analytics-report-list></analytics-report-list>
 ```
 
 #### Events
-
+**onSuccess**: The event is emitted when the report list are loaded<br />
+**onError**: The event is emitted when an error occur during the loading<br />
+**reportClick**: The event is emitted when the report in the list is selected<br />
 
 #### Options
+No options.
 
+## Basic usage example Activiti Analytics
+The component shows the charts related to the reportId passed as input
+```html
+<activiti-analytics [appId]="appId" [reportId]="reportId"></activiti-analytics>
+```
+
+#### Events
+**onSuccess**: The event is emitted when the report parameters are loaded<br />
+**onError**: The event is emitted when an error occur during the loading<br />
+
+#### Options
+**appId**: The application id<br />
+**reportId**: The report id<br />
+**debug**: Flag to enable or disable the Form values in the console log<br />
 
 ## Build from sources
 
diff --git a/ng2-components/ng2-activiti-analytics/demo/index.html b/ng2-components/ng2-activiti-analytics/demo/index.html
index 833362c08e..8d5e80fe31 100644
--- a/ng2-components/ng2-activiti-analytics/demo/index.html
+++ b/ng2-components/ng2-activiti-analytics/demo/index.html
@@ -2,13 +2,15 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Angular 2 Activiti Analitics - Demo</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Alfresco Angular 2 Activiti Analytics - Demo</title>
     <base href="./">
 
     <!-- Google Material Design Lite -->
     <link rel="stylesheet" href="node_modules/material-design-lite/material.min.css">
     <script src="node_modules/material-design-lite/material.min.js"></script>
     <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
+    <link rel="stylesheet" href="node_modules/md-date-time-picker/dist/css/mdDateTimePicker.css" media="all">
 
     <!-- 1. Load libraries -->
     <!-- 1. Load libraries -->
@@ -18,7 +20,13 @@
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
     <script src="node_modules/systemjs/dist/system.src.js"></script>
 
+    <script src="node_modules/moment/min/moment.min.js"></script>
     <script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script>
+    <script src="node_modules/alfresco-js-api/dist/alfresco-js-api.js"></script>
+    <script src="node_modules/raphael/raphael.min.js"></script>
+    <script src="node_modules/md-date-time-picker/dist/js/mdDateTimePicker.min.js"></script>
+    <script src="node_modules/md-date-time-picker/dist/js/draggabilly.pkgd.min.js"></script>
+    <script src="assets/Polyline.js"></script>
 
     <script src="systemjs.config.js"></script>
     <script>
diff --git a/ng2-components/ng2-activiti-analytics/demo/package.json b/ng2-components/ng2-activiti-analytics/demo/package.json
index 1fcff47fa3..2b61ee35e2 100644
--- a/ng2-components/ng2-activiti-analytics/demo/package.json
+++ b/ng2-components/ng2-activiti-analytics/demo/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "ng2-activiti-analytics-demo",
-  "description": "Alfresco Angular2 Analytics Component - Demo",
+  "name": "ng2-activiti-diagrams-demo",
+  "description": "Alfresco Angular2 Diagrams Component - Demo",
   "version": "0.1.0",
   "author": "Alfresco Software, Ltd.",
   "main": "index.js",
@@ -9,36 +9,54 @@
     "postinstall": "npm run build",
     "start": "npm run build && concurrently \"npm run tsc:w\" \"npm run server\" ",
     "server": "wsrv -o -s -l",
-    "build": "npm run tslint && rimraf dist && npm run tsc",
+    "build": "npm run tslint && rimraf dist && tsc",
+    "build:w": "npm run tslint && rimraf dist && tsc -w",
     "tsc": "tsc",
     "tsc:w": "tsc -w",
     "tslint": "tslint -c tslint.json *.ts && tslint -c tslint.json src/{,**/}**.ts"
   },
   "license": "Apache-2.0",
+  "contributors": [
+    {
+      "name": "Maurizio Vitale",
+      "email": "maurizio.vitale@alfresco.com"
+    }
+  ],
+  "keywords": [
+    "ng2",
+    "angular",
+    "angular2",
+    "activiti",
+    "activiti-diagrams"
+  ],
   "dependencies": {
-    "@angular/common": "2.0.0-rc.3",
-    "@angular/compiler": "2.0.0-rc.3",
-    "@angular/core": "2.0.0-rc.3",
-    "@angular/forms": "0.1.1",
-    "@angular/http": "2.0.0-rc.3",
-    "@angular/platform-browser": "2.0.0-rc.3",
-    "@angular/platform-browser-dynamic": "2.0.0-rc.3",
-    "@angular/router": "3.0.0-alpha.7",
-    "@angular/router-deprecated": "2.0.0-rc.2",
-    "@angular/upgrade": "2.0.0-rc.3",
+    "@angular/common": "2.0.0",
+    "@angular/compiler": "2.0.0",
+    "@angular/core": "2.0.0",
+    "@angular/forms": "2.0.0",
+    "@angular/http": "2.0.0",
+    "@angular/platform-browser": "2.0.0",
+    "@angular/platform-browser-dynamic": "2.0.0",
+    "@angular/router": "3.0.0",
+    "@angular/upgrade": "2.0.0",
+    "@types/node": "^6.0.42",
+    "core-js": "^2.4.1",
+    "reflect-metadata": "^0.1.3",
+    "rxjs": "5.0.0-beta.12",
     "systemjs": "0.19.27",
-    "core-js": "2.4.0",
-    "reflect-metadata": "0.1.3",
-    "rxjs": "5.0.0-beta.6",
-    "zone.js": "0.6.12",
-    "license-check": "1.1.5",
+    "zone.js": "^0.6.23",
+    "md-date-time-picker": "^2.2.0",
+    "raphael": "^2.2.6",
     "material-design-icons": "2.2.3",
-    "material-design-lite": "1.1.3",
-    "ng2-translate": "2.2.2",
+    "material-design-lite": "1.2.1",
+    "ng2-translate": "2.5.0",
     "alfresco-js-api": "^0.3.0",
     "ng2-alfresco-core": "^0.3.0",
+    "ng2-activiti-diagrams": "^0.3.0",
     "ng2-activiti-analytics": "^0.3.0",
     "chart.js": "^2.1.4",
+    "moment": "2.15.1",
+    "md-date-time-picker": "^2.2.0",
     "ng2-charts": "1.1.0"
   },
   "devDependencies": {
@@ -46,37 +64,8 @@
     "@types/jasmine": "^2.2.33",
     "concurrently": "^2.2.0",
     "rimraf": "2.5.2",
-    "tslint": "3.15.1",
-    "typescript": "^2.0.2",
+    "tslint": "^3.8.1",
+    "typescript": "^2.0.3",
     "wsrv": "^0.1.5"
-  },
-  "keywords": [
-    "angular2",
-    "typescript"
-  ],
-  "license-check-config": {
-    "src": [
-      "**/*.js",
-      "**/*.ts",
-      "!/**/coverage/**/*",
-      "!/**/demo/**/*",
-      "!/**/node_modules/**/*",
-      "!/**/typings/**/*",
-      "!*.js"
-    ],
-    "contributors": [
-      {
-        "name": "Maurizio Vitale",
-        "email": "maurizio.vitale84@gmail.com"
-      },
-      {
-        "name": "Eugenio Romano",
-        "email": "eugenio.romano@alfresco.com"
-      }
-    ],
-    "path": "assets/license_header.txt",
-    "blocking": true,
-    "logInfo": false,
-    "logError": true
   }
-}
+}
\ No newline at end of file
diff --git a/ng2-components/ng2-activiti-analytics/demo/src/main.ts b/ng2-components/ng2-activiti-analytics/demo/src/main.ts
index 18646719c7..9afbee493b 100644
--- a/ng2-components/ng2-activiti-analytics/demo/src/main.ts
+++ b/ng2-components/ng2-activiti-analytics/demo/src/main.ts
@@ -15,19 +15,49 @@
  * limitations under the License.
  */
 
-import { bootstrap } from '@angular/platform-browser-dynamic';
-import { Component } from '@angular/core';
-import { ALFRESCO_CORE_PROVIDERS } from 'ng2-alfresco-core';
-import { AnalyticsComponent } from 'ng2-activiti-analytics';
+import { NgModule, Component } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { CoreModule } from 'ng2-alfresco-core';
+import { AnalyticsModule } from 'ng2-activiti-analytics';
 
 @Component({
     selector: 'activiti-analytics-demo',
-    template: `<activiti-analytics></activiti-analytics>`,
-    directives: [AnalyticsComponent]
+    template: `
+    <div class="page-content">
+        <label for="appId"><b>Insert the appId:</b></label><br>
+        <input id="appId" size="10" type="text" [(ngModel)]="appId">
+        <div class="mdl-grid">
+            <div class="mdl-cell mdl-cell--4-col task-column mdl-shadow--2dp">
+                <analytics-report-list (reportClick)="onReportClick($event)"></analytics-report-list>
+            </div>
+            <div class="mdl-cell mdl-cell--8-col task-column mdl-shadow--2dp">
+                <activiti-analytics [appId]="appId" *ngIf="report" [reportId]="report.id"></activiti-analytics>
+            </div>
+        </div>
+    </div>`
 })
-class ActivitiAnalyticsDemo {
+
+export class AnalyticsDemoComponent {
+
+    appId: number;
+    report: any;
+
+    onReportClick(event: any) {
+        this.report = event;
+    }
 }
 
-bootstrap(ActivitiAnalyticsDemo, [
-    ALFRESCO_CORE_PROVIDERS]
-);
+@NgModule({
+    imports: [
+        BrowserModule,
+        CoreModule.forRoot(),
+        AnalyticsModule
+    ],
+    declarations: [ AnalyticsDemoComponent ],
+    bootstrap:    [ AnalyticsDemoComponent ]
+})
+export class AppModule { }
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/ng2-components/ng2-activiti-analytics/demo/systemjs.config.js b/ng2-components/ng2-activiti-analytics/demo/systemjs.config.js
index 9cb172062c..54b1de6634 100644
--- a/ng2-components/ng2-activiti-analytics/demo/systemjs.config.js
+++ b/ng2-components/ng2-activiti-analytics/demo/systemjs.config.js
@@ -2,56 +2,50 @@
  * System configuration for Angular 2 samples
  * Adjust as necessary for your application needs.
  */
-(function(global) {
-    // map tells the System loader where to look for things
-    var map = {
-        'app':                        'dist', // 'dist',
-        '@angular':                   'node_modules/@angular',
-        'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
-        'rxjs':                       'node_modules/rxjs',
-
-        'ng2-charts': 'node_modules/ng2-charts',
-        'ng2-translate': 'node_modules/ng2-translate',
-        'ng2-alfresco-core': 'node_modules/ng2-alfresco-core/dist',
-        'ng2-activiti-analytics': 'node_modules/ng2-activiti-analytics/dist'
-    };
-    // packages tells the System loader how to load when no filename and/or no extension
-    var packages = {
-        'app':                        { main: 'main.js',  defaultExtension: 'js' },
-        'rxjs':                       { defaultExtension: 'js' },
-        'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
-
-        'ng2-translate': { defaultExtension: 'js' },
-        'ng2-alfresco-core': { main: 'index.js', defaultExtension: 'js' },
-        'ng2-activiti-analytics': { main: 'index.js', defaultExtension: 'js' },
-        'ng2-charts': { main: 'ng2-charts.js', defaultExtension: 'js'}
-    };
-    var ngPackageNames = [
-        'common',
-        'compiler',
-        'core',
-        'http',
-        'platform-browser',
-        'platform-browser-dynamic',
-        'router',
-        'router-deprecated',
-        'upgrade'
-    ];
-    // Individual files (~300 requests):
-    function packIndex(pkgName) {
-        packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
-    }
-    // Bundled (~40 requests):
-    function packUmd(pkgName) {
-        packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
-    }
-    // Most environments should use UMD; some (Karma) need the individual index files
-    var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
-    // Add package entries for angular packages
-    ngPackageNames.forEach(setPackageConfig);
-    var config = {
-        map: map,
-        packages: packages
-    };
-    System.config(config);
+(function (global) {
+    System.config({
+        paths: {
+            // paths serve as alias
+            'npm:': 'node_modules/'
+        },
+        // map tells the System loader where to look for things
+        map: {
+            // our app is within the app folder
+            app: 'dist',
+            // angular bundles
+            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
+            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
+            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
+            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
+            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
+            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
+            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
+            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
+            // other libraries
+            'rxjs': 'npm:rxjs',
+            'moment': 'npm:moment/min/moment.min.js',
+            'ng2-charts': 'npm:ng2-charts',
+            'ng2-translate': 'npm:ng2-translate',
+            'alfresco-js-api': 'npm:alfresco-js-api/dist',
+            'ng2-alfresco-core': 'npm:ng2-alfresco-core/dist',
+            'ng2-activiti-diagrams': 'npm:ng2-activiti-diagrams/dist',
+            'ng2-activiti-analytics': 'npm:ng2-activiti-analytics/dist'
+        },
+        // packages tells the System loader how to load when no filename and/or no extension
+        packages: {
+            app: {
+                main: './main.js',
+                defaultExtension: 'js'
+            },
+            rxjs: {
+                defaultExtension: 'js'
+            },
+            'ng2-translate': { defaultExtension: 'js' },
+            'ng2-charts': { main: 'ng2-charts.js', defaultExtension: 'js'},
+            'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
+            'ng2-alfresco-core': { main: './index.js', defaultExtension: 'js'},
+            'ng2-activiti-diagrams': { main: './index.js', defaultExtension: 'js'},
+            'ng2-activiti-analytics': { main: './index.js', defaultExtension: 'js'}
+        }
+    });
 })(this);
diff --git a/ng2-components/ng2-activiti-analytics/demo/tslint.json b/ng2-components/ng2-activiti-analytics/demo/tslint.json
index 55c0f8a666..8c9703b9de 100644
--- a/ng2-components/ng2-activiti-analytics/demo/tslint.json
+++ b/ng2-components/ng2-activiti-analytics/demo/tslint.json
@@ -26,7 +26,7 @@
     "label-undefined": true,
     "max-line-length": [
       true,
-      140
+      180
     ],
     "member-ordering": [
       true,
diff --git a/ng2-components/ng2-activiti-analytics/package.json b/ng2-components/ng2-activiti-analytics/package.json
index 5fe5f2ba41..211d73bf08 100644
--- a/ng2-components/ng2-activiti-analytics/package.json
+++ b/ng2-components/ng2-activiti-analytics/package.json
@@ -52,6 +52,7 @@
     "@angular/upgrade": "2.0.0",
     "@types/node": "^6.0.42",
     "alfresco-js-api": "^0.3.0",
+    "moment": "2.15.1",
     "chart.js": "^2.1.4",
     "core-js": "^2.4.1",
     "md-date-time-picker": "^2.2.0",
diff --git a/ng2-components/ng2-activiti-analytics/src/components/analytics.component.spec.ts b/ng2-components/ng2-activiti-analytics/src/components/analytics.component.spec.ts
index d5fb553eec..a0a0211630 100644
--- a/ng2-components/ng2-activiti-analytics/src/components/analytics.component.spec.ts
+++ b/ng2-components/ng2-activiti-analytics/src/components/analytics.component.spec.ts
@@ -94,7 +94,7 @@ describe('Test ng2-activiti-analytics Report ', () => {
         });
 
         it('Should render the Process definition overview report ', (done) => {
-            component.onShowReport.subscribe((res) => {
+            component.onSuccess.subscribe((res) => {
                 expect(res).toBeDefined();
                 expect(res.length).toEqual(3);
 
@@ -133,7 +133,7 @@ describe('Test ng2-activiti-analytics Report ', () => {
         });
 
         it('Should render the Task overview report ', (done) => {
-            component.onShowReport.subscribe((res) => {
+            component.onSuccess.subscribe((res) => {
                 expect(res).toBeDefined();
                 expect(res.length).toEqual(2);
 
diff --git a/ng2-components/ng2-activiti-analytics/src/components/analytics.component.ts b/ng2-components/ng2-activiti-analytics/src/components/analytics.component.ts
index b1ba8da484..f3b77f8330 100644
--- a/ng2-components/ng2-activiti-analytics/src/components/analytics.component.ts
+++ b/ng2-components/ng2-activiti-analytics/src/components/analytics.component.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, EventEmitter, OnInit, OnChanges, Input, Output, SimpleChanges } from '@angular/core';
+import { Component, EventEmitter, OnChanges, Input, Output, SimpleChanges } from '@angular/core';
 import { AlfrescoTranslationService } from 'ng2-alfresco-core';
 import { AnalyticsService } from '../services/analytics.service';
 import { ReportQuery } from '../models/report.model';
@@ -27,7 +27,7 @@ import { Chart } from '../models/chart.model';
     templateUrl: './analytics.component.html',
     styleUrls: ['./analytics.component.css']
 })
-export class AnalyticsComponent implements  OnInit, OnChanges {
+export class AnalyticsComponent implements OnChanges {
 
     @Input()
     appId: string;
@@ -41,9 +41,6 @@ export class AnalyticsComponent implements  OnInit, OnChanges {
     @Output()
     onSuccess = new EventEmitter();
 
-    @Output()
-    onShowReport = new EventEmitter();
-
     @Output()
     onError = new EventEmitter();
 
@@ -59,9 +56,6 @@ export class AnalyticsComponent implements  OnInit, OnChanges {
         }
     }
 
-    ngOnInit() {
-    }
-
     ngOnChanges(changes: SimpleChanges) {
         this.reset();
     }
@@ -71,7 +65,7 @@ export class AnalyticsComponent implements  OnInit, OnChanges {
         this.analyticsService.getReportsByParams(this.reportId, this.reportParamQuery).subscribe(
             (res: Chart[]) => {
                 this.reports = res;
-                this.onShowReport.emit(res);
+                this.onSuccess.emit(res);
             },
             (err: any) => {
                 this.onError.emit(err);
