Samples updated with new data, using gammel theme for theme example, removed inconsistencies

Author: ashok1994

src/app/app.component.html

@@ -104,27 +104,27 @@ <h4>Percentage Calculation</h4>
                 </a>
 
                 <a [routerLinkActive]="['active']" [routerLink]="['/ex10']"  href="#/demos/ex10" class="list-group-item" (click)="updateId('ex10')">
-                    <h4>Export Chart</h4>
-                    <p>Click on the button to export the chart in pdf</p>
+                    <h4>Export multiple charts</h4>
+                    <p>Use Batch Export to export multiple charts as a single image/PDF</p>
                 </a>
 
 
                 <a [routerLinkActive]="['active']" [routerLink]="['/ex11']"  href="#/demos/ex11" class="list-group-item" (click)="updateId('ex11')">
-                    <h4>Drill Down Chart</h4>
-                    <p>Click on the plot to drill down chart</p>
+                    <h4>Add drill-down to chart</h4>
+                    <p>Use LinkedCharts to quickly add drill-down to charts</p>
                 </a>
 
                 <a [routerLinkActive]="['active']" [routerLink]="['/ex12']"  href="#/demos/ex12" class="list-group-item" (click)="updateId('ex12')">
-                    <h4>Render a widget</h4>
-                    <p>A simple widget with data embedded in the component</p>
+                    <h4>A simple gauge</h4>
+                    <p>A simple gauge to show customer satisfaction score</p>
                 </a>
                 <a [routerLinkActive]="['active']" [routerLink]="['/ex13']"  href="#/demos/ex13" class="list-group-item" (click)="updateId('ex13')">
-                    <h4>Render a map</h4>
-                    <p>A simple map with embedded data </p>
+                    <h4>World Map</h4>
+                    <p>World map showing data for different continents</p>
                 </a>
                 <a [routerLinkActive]="['active']" [routerLink]="['/ex14']"  href="#/demos/ex14" class="list-group-item" (click)="updateId('ex14')">
-                    <h4>Using a theme</h4>
-                    <p>Simple example of applying a theme</p>
+                    <h4>Applying a different theme</h4>
+                    <p>Choosing from different themes available in FusionCharts Suite</p>
                 </a>
             </nav>
         </div>

src/app/app.module.ts

@@ -56,6 +56,7 @@ import * as Fint from 'fusioncharts/themes/fusioncharts.theme.fint';
 
 
 require('./themes/fusioncharts.theme.fusion.js');
+require('./themes/fusioncharts.theme.gammel.js');
 
 FusionChartsModule.fcRoot(FusionCharts, Charts, Ocean, PowerCharts, Widgets, Maps, WorldMap, Fint)
 

src/app/fusioncharts/ex1/ex1.ts

@@ -1,70 +1,73 @@
-import { Component, AfterViewInit} from '@angular/core';
+import {
+  Component,
+  AfterViewInit
+} from '@angular/core';
 
 import fcDemos from '../samplecode';
 
 declare var Prism;
 
 @Component({
-    selector: 'chart',
-    templateUrl: 'ex1.html'
+  selector: 'chart',
+  templateUrl: 'ex1.html'
 })
 
 export class Ex1 implements AfterViewInit {
-    demoId = 'ex1';
-    sampleCode = fcDemos;
-    dataSource: Object;
-    chartConfig: Object;
+  demoId = 'ex1';
+  sampleCode = fcDemos;
+  dataSource: Object;
+  chartConfig: Object;
 
-    constructor() {
-        this.sampleCode = fcDemos;
+  constructor() {
+    this.sampleCode = fcDemos;
 
-        this.chartConfig = {
-            width: '700',
-            height: '400',
-            type: "column2d",
-            dataFormat: "json",
-            creditLabel: 'false'
-        };
+    this.chartConfig = {
+      width: '700',
+      height: '400',
+      type: "column2d",
+      dataFormat: "json",
+      creditLabel: 'false'
+    };
 
-        this.dataSource = {
-            "chart": {
-              "caption": "Countries With Most Oil Reserves [2017-18]",
-              "subCaption": "In MMbbl = One Million barrels",
-              "xAxisName": "Country",
-              "yAxisName": "Reserves (MMbbl)",
-              "numberSuffix": "K",
-              "theme": "fusion",
-            },
-            "data": [{
-              "label": "Venezuela",
-              "value": "290"
-            }, {
-              "label": "Saudi",
-              "value": "260"
-            }, {
-              "label": "Canada",
-              "value": "180"
-            }, {
-              "label": "Iran",
-              "value": "140"
-            }, {
-              "label": "Russia",
-              "value": "115"
-            }, {
-              "label": "UAE",
-              "value": "100"
-            }, {
-              "label": "US",
-              "value": "30"
-            }, {
-              "label": "China",
-              "value": "30"
-            }]
-        };
+    this.dataSource = {
+      "chart": {
+        "caption": "Countries With Most Oil Reserves [2017-18]",
+        "subCaption": "In MMbbl = One Million barrels",
+        "xAxisName": "Country",
+        "yAxisName": "Reserves (MMbbl)",
+        "numberSuffix": "K",
+        "theme": "fusion",
+      },
+      "data": [{
+        "label": "Venezuela",
+        "value": "290"
+      }, {
+        "label": "Saudi",
+        "value": "260"
+      }, {
+        "label": "Canada",
+        "value": "180"
+      }, {
+        "label": "Iran",
+        "value": "140"
+      }, {
+        "label": "Russia",
+        "value": "115"
+      }, {
+        "label": "UAE",
+        "value": "100"
+      }, {
+        "label": "US",
+        "value": "30"
+      }, {
+        "label": "China",
+        "value": "30"
+      }]
+    };
 
-    }
-    ngAfterViewInit() {
-        Prism && Prism.highlightAll();
-    }
+  }
+  ngAfterViewInit() {
+    Prism && Prism.highlightAll();
+  }
 
 }

src/app/fusioncharts/ex10/ex10.html

@@ -1,3 +1,12 @@
+<style >
+    .btn { font-family: 'Source Sans Pro'; }
+    .btn.btn-primary { background: #4a4d8c;  transition: all 300ms;}
+    .btn.btn-primary:hover{ background: #5c62b5; }
+    .btn.btn-primary:active{ background:#4a4d8c }
+    div>a{
+        margin: 0px 10px;
+    }
+</style>
 
 <fusioncharts
    width="700"
@@ -10,12 +19,14 @@
 <fusioncharts
    width="600"
    height="600"
-   type="bar2d"
+   type="stackedcolumn2d"
    dataFormat="json"
-   [dataSource]="barDataSource">
+   [dataSource]="stackedColumnData">
 </fusioncharts>
 
-<button (click)="exportChart($event)">Export chart in pdf</button>
+<div style="display: flex;justify-content: center">
+    <button (click)="exportChart($event)" class="btn btn-primary">Export both charts as a single PDF</button>
+</div>
 
 <tabs>
     <tab tabTitle="Module"><ng-prism class="codepreview language-javascript" >{{ sampleCode[demoId].module }}</ng-prism></tab>