diff --git a/demo-shell-ng2/index.html b/demo-shell-ng2/index.html
index 93ac0bfd52..08205cc45d 100644
--- a/demo-shell-ng2/index.html
+++ b/demo-shell-ng2/index.html
@@ -32,11 +32,13 @@
     <script src="node_modules/systemjs/dist/system.src.js"></script>
 
     <script src="/app/js/xml2json.js"></script>
+    <script src="/app/js/Polyline.js"></script>
 
     <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>
+    <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>
 
diff --git a/demo-shell-ng2/package.json b/demo-shell-ng2/package.json
index 0c5e143ca0..a79ab27e6b 100644
--- a/demo-shell-ng2/package.json
+++ b/demo-shell-ng2/package.json
@@ -77,6 +77,7 @@
     "moment": "2.15.1",
     "chart.js": "^2.1.4",
     "ng2-charts": "1.1.0",
+    "raphael": "^2.2.6",
     "md-date-time-picker": "^2.2.0",
     "alfresco-js-api": "^0.3.0",
     "ng2-alfresco-core": "0.3.2",
diff --git a/ng2-components/ng2-activiti-analytics/index.ts b/ng2-components/ng2-activiti-analytics/index.ts
index 5fdc8def07..86814b09ee 100644
--- a/ng2-components/ng2-activiti-analytics/index.ts
+++ b/ng2-components/ng2-activiti-analytics/index.ts
@@ -25,18 +25,24 @@ import { AnalyticsService } from './src/services/analytics.service';
 import { CHART_DIRECTIVES } from 'ng2-charts/ng2-charts';
 
 import { WIDGET_DIRECTIVES } from './src/components/widgets/index';
+import { RAPHAEL_DIRECTIVES } from './src/components/raphael/index';
+import { DIAGRAM_DIRECTIVES } from './src/components/diagrams/index';
 
 export * from './src/components/analytics.component';
 export * from './src/components/analytics-report-list.component';
 export * from './src/components/analytics-report-parameters.component';
 export * from './src/services/analytics.service';
 export * from './src/components/widgets/index';
+export * from './src/components/raphael/index';
+export * from './src/components/diagrams/index';
 
 export const ANALYTICS_DIRECTIVES: any[] = [
     AnalyticsComponent,
     AnalyticsReportListComponent,
     AnalyticsReportParametersComponent,
-    WIDGET_DIRECTIVES
+    WIDGET_DIRECTIVES,
+    RAPHAEL_DIRECTIVES,
+    DIAGRAM_DIRECTIVES
 ];
 
 export const ANALYTICS_PROVIDERS: any[] = [
diff --git a/ng2-components/ng2-activiti-analytics/karma.conf.js b/ng2-components/ng2-activiti-analytics/karma.conf.js
index db5a72000c..e6e3024303 100644
--- a/ng2-components/ng2-activiti-analytics/karma.conf.js
+++ b/ng2-components/ng2-activiti-analytics/karma.conf.js
@@ -36,6 +36,7 @@ module.exports = function (config) {
       'node_modules/moment/min/moment.min.js',
       'node_modules/md-date-time-picker/dist/js/mdDateTimePicker.js',
       'node_modules/chart.js/dist/Chart.bundle.min.js',
+      'node_modules/raphael/raphael.min.js',
       {pattern: 'node_modules/ng2-translate/**/*.js', included: false, watched: false},
 
       'karma-test-shim.js',
diff --git a/ng2-components/ng2-activiti-analytics/package.json b/ng2-components/ng2-activiti-analytics/package.json
index 6f6a63b956..96a1becad1 100644
--- a/ng2-components/ng2-activiti-analytics/package.json
+++ b/ng2-components/ng2-activiti-analytics/package.json
@@ -58,6 +58,7 @@
     "ng2-alfresco-core": "0.3.2",
     "ng2-charts": "1.1.0",
     "ng2-translate": "2.5.0",
+    "raphael": "^2.2.6",
     "reflect-metadata": "^0.1.3",
     "rxjs": "5.0.0-beta.12",
     "systemjs": "0.19.27",
diff --git a/ng2-components/ng2-activiti-analytics/src/components/analytics.component.html b/ng2-components/ng2-activiti-analytics/src/components/analytics.component.html
index 403632310c..8b294e19c5 100644
--- a/ng2-components/ng2-activiti-analytics/src/components/analytics.component.html
+++ b/ng2-components/ng2-activiti-analytics/src/components/analytics.component.html
@@ -51,6 +51,9 @@
                                     [chartType]="report.type"></base-chart>
                     </div>
                 </div>
+                <div *ngSwitchCase="'HeatMap'">
+                    <diagram [modelType]="'process-definition'" [processDefinitionId]="'Sales:24:32637'"></diagram>
+                </div>
                 <div *ngSwitchDefault>
                     <span>{{'ANALYTICS.MESSAGES.UNKNOWN-WIDGET-TYPE' | translate}}: {{report.type}}</span>
                 </div>