diff --git a/demo-shell-ng2/app/app.module.ts b/demo-shell-ng2/app/app.module.ts
index 1726859603..a1d7fcf93e 100644
--- a/demo-shell-ng2/app/app.module.ts
+++ b/demo-shell-ng2/app/app.module.ts
@@ -31,6 +31,7 @@ import { ActivitiFormModule } from 'ng2-activiti-form';
 import { ActivitiTaskListModule } from 'ng2-activiti-tasklist';
 import { ActivitiProcessListModule } from 'ng2-activiti-processlist';
 import { UserInfoComponentModule } from 'ng2-alfresco-userinfo';
+import { AnalyticsModule } from 'ng2-activiti-analytics';
 
 import { AppComponent } from './app.component';
 import { routing } from './app.routes';
@@ -65,7 +66,8 @@ import {
         ActivitiFormModule.forRoot(),
         ActivitiTaskListModule.forRoot(),
         ActivitiProcessListModule.forRoot(),
-        UserInfoComponentModule.forRoot()
+        UserInfoComponentModule.forRoot(),
+        AnalyticsModule.forRoot()
     ],
     declarations: [
         AppComponent,
diff --git a/demo-shell-ng2/app/components/activiti/activiti-demo.component.html b/demo-shell-ng2/app/components/activiti/activiti-demo.component.html
index fd462fa8bd..a9a9a45019 100644
--- a/demo-shell-ng2/app/components/activiti/activiti-demo.component.html
+++ b/demo-shell-ng2/app/components/activiti/activiti-demo.component.html
@@ -63,7 +63,16 @@
             </div>
         </section>
         <section class="mdl-layout__tab-panel" id="report">
-            <div class="page-content"><!-- Your content goes here --></div>
+            <div class="page-content">
+                <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 *ngIf="report" [reportId]="report.id"></activiti-analytics>
+                    </div>
+                </div>
+            </div>
         </section>
     </main>
 </div>
diff --git a/demo-shell-ng2/app/components/activiti/activiti-demo.component.ts b/demo-shell-ng2/app/components/activiti/activiti-demo.component.ts
index 107d8d525a..19fcc8b356 100644
--- a/demo-shell-ng2/app/components/activiti/activiti-demo.component.ts
+++ b/demo-shell-ng2/app/components/activiti/activiti-demo.component.ts
@@ -79,6 +79,7 @@ export class ActivitiDemoComponent implements AfterViewChecked {
     processSchemaColumns: any [] = [];
 
     taskFilter: any;
+    report: any;
     processFilter: any;
 
     sub: Subscription;
@@ -140,6 +141,10 @@ export class ActivitiDemoComponent implements AfterViewChecked {
         this.taskFilter = event;
     }
 
+    onReportClick(event: any) {
+        this.report = event;
+    }
+
     onSuccessTaskFilterList(event: any) {
         this.taskFilter = this.activitifilter.getCurrentFilter();
     }
diff --git a/demo-shell-ng2/index.html b/demo-shell-ng2/index.html
index f108c3dfa6..ba09be82ca 100644
--- a/demo-shell-ng2/index.html
+++ b/demo-shell-ng2/index.html
@@ -34,6 +34,7 @@
     <script src="node_modules/pdfjs-dist/build/pdf.js"></script>
     <script src="node_modules/pdfjs-dist/build/pdf.worker.js"></script>
     <script src="node_modules/pdfjs-dist/web/pdf_viewer.js"></script>
+    <script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script>
 
     <!-- Polyfill(s) for dialogs -->
     <script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
diff --git a/demo-shell-ng2/systemjs.config.js b/demo-shell-ng2/systemjs.config.js
index 8726219617..213c73af70 100644
--- a/demo-shell-ng2/systemjs.config.js
+++ b/demo-shell-ng2/systemjs.config.js
@@ -23,6 +23,8 @@
             '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
             // other libraries
             'rxjs': 'npm:rxjs',
+            'moment': 'npm:moment',
+            'ng2-charts' : 'npm:ng2-charts',
             'ng2-translate': 'npm:ng2-translate',
             'ng2-alfresco-core': 'npm:ng2-alfresco-core/dist',
             'ng2-alfresco-datatable': 'npm:ng2-alfresco-datatable/dist',
@@ -37,7 +39,13 @@
             'ng2-activiti-tasklist': 'npm:ng2-activiti-tasklist/dist',
             'alfresco-js-api': 'npm:alfresco-js-api/dist',
             'ng2-activiti-processlist': 'npm:ng2-activiti-processlist/dist',
-            'ng2-alfresco-userinfo': 'npm:ng2-alfresco-userinfo/dist'
+            'ng2-alfresco-userinfo': 'npm:ng2-alfresco-userinfo/dist',
+            'ng2-activiti-analytics': 'npm:ng2-activiti-analytics/dist'
+        },
+        meta: {
+            moment: {
+                exports: 'moment'
+            }
         },
         // packages tells the System loader how to load when no filename and/or no extension
         packages: {
@@ -49,6 +57,7 @@
                 defaultExtension: 'js'
             },
             'ng2-translate': { defaultExtension: 'js' },
+            'ng2-charts': { defaultExtension: 'js' },
 
             'ng2-alfresco-core': { main: './index.js', defaultExtension: 'js'},
             'ng2-alfresco-datatable': { main: './index.js', defaultExtension: 'js'},
@@ -63,7 +72,8 @@
             'ng2-alfresco-webscript': { main: './index.js', defaultExtension: 'js'},
             'ng2-alfresco-tag': { main: './index.js', defaultExtension: 'js'},
             'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
-            'ng2-alfresco-userinfo': { main: './index.js', defaultExtension: 'js'}
+            'ng2-alfresco-userinfo': { main: './index.js', defaultExtension: 'js'},
+            'ng2-activiti-analytics': { main: './index.js', defaultExtension: 'js'}
         }
     });
 })(this);