Added new samples in gh-pages for fusiontime

src/app/app.component.css

@@ -1,5 +1,5 @@
 .codepreview pre {
-    height: 592px;
+  height: 592px;
 }
 
 /* From the passportjs.org website */
@@ -15,7 +15,7 @@
 }
 
 .masthead h3 a {
-  color: #333333;;
+  color: #333333;
   text-decoration: none;
 }
 
@@ -33,35 +33,35 @@
 }
 
 .jumbotron p {
-    margin-left: 133px;
+  margin-left: 133px;
 }
 
 .jumbotron p {
-    margin-left: 133px;
+  margin-left: 133px;
 }
 
 tabset {
-	display: none;
+  display: none;
 }
 
 .tabset {
-	display: none;
+  display: none;
 }
 .tabset .nav-tabs {
-	overflow: hidden;
-	list-style: none;
-	margin: 0;
-	padding: 0;
-	border-bottom: 1px solid #ccc;
+  overflow: hidden;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  border-bottom: 1px solid #ccc;
 }
 
 .tabset .nav-tabs li {
-	float: left;	
+  float: left;
 }
 
 .tabset .nav-tabs li.active {
-	border: 1px solid #ccc;
-	border-bottom-color: #fff;
+  border: 1px solid #ccc;
+  border-bottom-color: #fff;
 }
 
 .ng2-tabs {
@@ -93,3 +93,22 @@ tabset {
   background-color: #f1f1f1;
 }
 
+.nav-group {
+  display: flex;
+  justify-content: space-between;
+}
+
+.badge {
+  font-size: 12px !important;
+  border-radius: 5px;
+  align-self: center;
+}
+
+.badge-selected {
+  background-color: white;
+}
+
+.badge-normal {
+  background-color: rgb(75, 63, 160);
+  color: white;
+}

src/app/app.module.ts

@@ -37,6 +37,18 @@ import { Ex22 } from './fusioncharts/ex22/ex22';
 import { Ex23 } from './fusioncharts/ex23/ex23';
 import { Ex24 } from './fusioncharts/ex24/ex24';
 import { Ex25 } from './fusioncharts/ex25/ex25';
+import { Ex26 } from './fusioncharts/ex26/ex26';
+import { Ex27 } from './fusioncharts/ex27/ex27';
+import { Ex28 } from './fusioncharts/ex28/ex28';
+import { Ex29 } from './fusioncharts/ex29/ex29';
+import { Ex30 } from './fusioncharts/ex30/ex30';
+import { Ex31 } from './fusioncharts/ex31/ex31';
+import { Ex32 } from './fusioncharts/ex32/ex32';
+import { Ex33 } from './fusioncharts/ex33/ex33';
+import { Ex34 } from './fusioncharts/ex34/ex34';
+import { Ex35 } from './fusioncharts/ex35/ex35';
+import { Ex36 } from './fusioncharts/ex36/ex36';
+
 import { FusionTime } from './fusiontime/fusiontime';
 
 import { SafeHtmlPipe } from './pipes/trustAsHtml';
@@ -93,6 +105,7 @@ import * as Carbon from 'fusioncharts/themes/fusioncharts.theme.carbon';
 FusionChartsModule.fcRoot(
   FusionCharts,
   Charts,
+  TimeSeries,
   PowerCharts,
   Widgets,
   Maps,
@@ -134,6 +147,17 @@ FusionChartsModule.fcRoot(
     Ex23,
     Ex24,
     Ex25,
+    Ex26,
+    Ex27,
+    Ex28,
+    Ex29,
+    Ex30,
+    Ex31,
+    Ex32,
+    Ex33,
+    Ex34,
+    Ex35,
+    Ex36,
     SafeHtmlPipe,
     Navigation,
     ObservingComponent,

src/app/app.routes.ts

@@ -10,12 +10,12 @@ import { Ex6 } from './fusioncharts/ex6/ex6';
 import { Ex7 } from './fusioncharts/ex7/ex7';
 import { Ex8 } from './fusioncharts/ex8/ex8';
 import { Ex9 } from './fusioncharts/ex9/ex9';
-import { Ex10 } from "./fusioncharts/ex10/ex10";
+import { Ex10 } from './fusioncharts/ex10/ex10';
 import { Ex11 } from './fusioncharts/ex11/ex11';
 import { Ex12 } from './fusioncharts/ex12/ex12';
 import { Ex13 } from './fusioncharts/ex13/ex13';
 import { Ex14 } from './fusioncharts/ex14/ex14';
-import { Ex15} from './fusioncharts/ex15/ex15';
+import { Ex15 } from './fusioncharts/ex15/ex15';
 import { Ex16 } from './fusioncharts/ex16/ex16';
 import { Ex17 } from './fusioncharts/ex17/ex17';
 import { Ex18 } from './fusioncharts/ex18/ex18';
@@ -26,6 +26,18 @@ import { Ex22 } from './fusioncharts/ex22/ex22';
 import { Ex23 } from './fusioncharts/ex23/ex23';
 import { Ex24 } from './fusioncharts/ex24/ex24';
 import { Ex25 } from './fusioncharts/ex25/ex25';
+import { Ex26 } from './fusioncharts/ex26/ex26';
+import { Ex27 } from './fusioncharts/ex27/ex27';
+import { Ex28 } from './fusioncharts/ex28/ex28';
+import { Ex29 } from './fusioncharts/ex29/ex29';
+import { Ex30 } from './fusioncharts/ex30/ex30';
+import { Ex31 } from './fusioncharts/ex31/ex31';
+import { Ex32 } from './fusioncharts/ex32/ex32';
+import { Ex33 } from './fusioncharts/ex33/ex33';
+import { Ex34 } from './fusioncharts/ex34/ex34';
+import { Ex35 } from './fusioncharts/ex35/ex35';
+import { Ex36 } from './fusioncharts/ex36/ex36';
+
 // import { Ex10 } from './fusioncharts/ex10/ex10';
 import { MyAppComponent } from './observable/observable.component';
 
@@ -60,7 +72,17 @@ export const rootRouterConfig: Routes = [
   { path: 'ex23', component: Ex23 },
   { path: 'ex24', component: Ex24 },
   { path: 'ex25', component: Ex25 },
+  { path: 'ex26', component: Ex26 },
+  { path: 'ex27', component: Ex27 },
+  { path: 'ex28', component: Ex28 },
+  { path: 'ex29', component: Ex29 },
+  { path: 'ex30', component: Ex30 },
+  { path: 'ex31', component: Ex31 },
+  { path: 'ex32', component: Ex32 },
+  { path: 'ex33', component: Ex33 },
+  { path: 'ex34', component: Ex34 },
+  { path: 'ex35', component: Ex35 },
+  { path: 'ex36', component: Ex36 },
   { path: 'fusioncharts', component: MyAppComponent },
   { path: 'fusioncharts', component: FusionChartsSample }
 ];
-

src/app/fusioncharts/ex26/ex26.html

@@ -0,0 +1,22 @@
+<div class="card shadow">
+  <div class="card-body chart-wrapper">
+    <div class="chart-wrapper-inner">
+      <fusioncharts
+        [type]="type"
+        [width]="width"
+        [height]="height"
+        [dataSource]="dataSource"
+      >
+      </fusioncharts>
+    </div>
+  </div>
+</div>
+
+<tabbed-code
+  moduleCode="{{ sampleCode[demoId].module }}"
+  componentCode="{{ sampleCode[demoId].component }}"
+  templateCode="{{ sampleCode[demoId].template }}"
+  schemaCode="{{ sampleCode[demoId].schema }}"
+  dataCode="{{ sampleCode[demoId].data }}"
+>
+</tabbed-code>

src/app/fusioncharts/ex26/ex26.ts

@@ -0,0 +1,80 @@
+import { Component, NgZone } from '@angular/core';
+
+import fcDemos from '../samplecode';
+import SelectedSingleton from '../services/selected.singleton';
+import * as FusionCharts from 'fusioncharts';
+
+declare var Prism;
+
+@Component({
+  selector: 'chart',
+  templateUrl: './ex26.html',
+  styleUrls: ['../ex.css']
+})
+export class Ex26 {
+  demoId = 'ex26';
+  sampleCode = fcDemos;
+  dataSource: any;
+  type: string;
+  width: string;
+  height: string;
+  constructor() {
+    this.type = 'timeseries';
+    this.width = '100%';
+    this.height = '400';
+    // This is the dataSource of the chart
+    this.dataSource = {
+      // Initially data is set as null
+      data: null,
+      caption: {
+        text: 'Sales Analysis'
+      },
+      subcaption: {
+        text: 'Grocery'
+      },
+      yAxis: [
+        {
+          plot: {
+            value: 'Grocery Sales Value',
+            type: 'line'
+          },
+          format: {
+            prefix: '$'
+          },
+          title: 'Sale Value'
+        }
+      ]
+    };
+    this.fetchData();
+  }
+
+  // In this method we will create our DataStore and using that we will create a custom DataTable which takes two
+  // parameters, one is data another is schema.
+  fetchData() {
+    var jsonify = res => res.json();
+    var dataFetch = fetch(
+      'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/line-chart-with-time-axis-data.json'
+    ).then(jsonify);
+    var schemaFetch = fetch(
+      'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/line-chart-with-time-axis-schema.json'
+    ).then(jsonify);
+
+    Promise.all([dataFetch, schemaFetch]).then(res => {
+      const data = res[0];
+      const schema = res[1];
+      // First we are creating a DataStore
+      const fusionDataStore = new FusionCharts.DataStore();
+      // After that we are creating a DataTable by passing our data and schema as arguments
+      const fusionTable = fusionDataStore.createDataTable(data, schema);
+      // Afet that we simply mutated our timeseries datasource by attaching the above
+      // DataTable into its data property.
+      this.dataSource.data = fusionTable;
+    });
+  }
+
+  ngOnInit() {
+    setTimeout(() => {
+      SelectedSingleton.change(this.sampleCode['ex26'].title);
+    });
+  }
+}

src/app/fusioncharts/ex27/ex27.html

@@ -0,0 +1,22 @@
+<div class="card shadow">
+  <div class="card-body chart-wrapper">
+    <div class="chart-wrapper-inner">
+      <fusioncharts
+        [type]="type"
+        [width]="width"
+        [height]="height"
+        [dataSource]="dataSource"
+      >
+      </fusioncharts>
+    </div>
+  </div>
+</div>
+
+<tabbed-code
+  moduleCode="{{ sampleCode[demoId].module }}"
+  componentCode="{{ sampleCode[demoId].component }}"
+  templateCode="{{ sampleCode[demoId].template }}"
+  schemaCode="{{ sampleCode[demoId].schema }}"
+  dataCode="{{ sampleCode[demoId].data }}"
+>
+</tabbed-code>

src/app/fusioncharts/ex27/ex27.ts

@@ -0,0 +1,78 @@
+import { Component, NgZone } from '@angular/core';
+
+import fcDemos from '../samplecode';
+import SelectedSingleton from '../services/selected.singleton';
+import * as FusionCharts from 'fusioncharts';
+
+declare var Prism;
+
+@Component({
+  selector: 'chart',
+  templateUrl: './ex27.html',
+  styleUrls: ['../ex.css']
+})
+export class Ex27 {
+  demoId = 'ex27';
+  sampleCode = fcDemos;
+  dataSource: any;
+  type: string;
+  width: string;
+  height: string;
+  constructor() {
+    this.type = 'timeseries';
+    this.width = '100%';
+    this.height = '400';
+    // This is the dataSource of the chart
+    this.dataSource = {
+      // Initially data is set as null
+      data: null,
+      caption: {
+        text: 'Sales Analysis'
+      },
+      subcaption: {
+        text: 'Grocery & Footwear'
+      },
+      series: 'Type',
+      yAxis: [
+        {
+          plot: 'Sales Value',
+          title: 'Sale Value',
+          format: {
+            prefix: '$'
+          }
+        }
+      ]
+    };
+    this.fetchData();
+  }
+
+  // In this method we will create our DataStore and using that we will create a custom DataTable which takes two
+  // parameters, one is data another is schema.
+  fetchData() {
+    var jsonify = res => res.json();
+    var dataFetch = fetch(
+      'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/plotting-multiple-series-on-time-axis-data.json'
+    ).then(jsonify);
+    var schemaFetch = fetch(
+      'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/plotting-multiple-series-on-time-axis-schema.json'
+    ).then(jsonify);
+
+    Promise.all([dataFetch, schemaFetch]).then(res => {
+      const data = res[0];
+      const schema = res[1];
+      // First we are creating a DataStore
+      const fusionDataStore = new FusionCharts.DataStore();
+      // After that we are creating a DataTable by passing our data and schema as arguments
+      const fusionTable = fusionDataStore.createDataTable(data, schema);
+      // Afet that we simply mutated our timeseries datasource by attaching the above
+      // DataTable into its data property.
+      this.dataSource.data = fusionTable;
+    });
+  }
+
+  ngOnInit() {
+    setTimeout(() => {
+      SelectedSingleton.change(this.sampleCode['ex27'].title);
+    });
+  }
+}