diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index b087e46..16281ba 100644
--- a/src/app/app.module.ts
+++ b/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,
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index cc6e1d2..3849d9d 100644
--- a/src/app/app.routes.ts
+++ b/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 }
];
-
diff --git a/src/app/fusioncharts/ex26/ex26.html b/src/app/fusioncharts/ex26/ex26.html
new file mode 100644
index 0000000..c0b20fa
--- /dev/null
+++ b/src/app/fusioncharts/ex26/ex26.html
@@ -0,0 +1,22 @@
+
+
+
+
diff --git a/src/app/fusioncharts/ex26/ex26.ts b/src/app/fusioncharts/ex26/ex26.ts
new file mode 100644
index 0000000..736086e
--- /dev/null
+++ b/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);
+ });
+ }
+}
diff --git a/src/app/fusioncharts/ex27/ex27.html b/src/app/fusioncharts/ex27/ex27.html
new file mode 100644
index 0000000..c0b20fa
--- /dev/null
+++ b/src/app/fusioncharts/ex27/ex27.html
@@ -0,0 +1,22 @@
+
+
+
+
diff --git a/src/app/fusioncharts/ex27/ex27.ts b/src/app/fusioncharts/ex27/ex27.ts
new file mode 100644
index 0000000..f8f3aa1
--- /dev/null
+++ b/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);
+ });
+ }
+}
diff --git a/src/app/fusioncharts/ex28/ex28.html b/src/app/fusioncharts/ex28/ex28.html
new file mode 100644
index 0000000..c0b20fa
--- /dev/null
+++ b/src/app/fusioncharts/ex28/ex28.html
@@ -0,0 +1,22 @@
+
+
+
+
diff --git a/src/app/fusioncharts/ex28/ex28.ts b/src/app/fusioncharts/ex28/ex28.ts
new file mode 100644
index 0000000..6927e7e
--- /dev/null
+++ b/src/app/fusioncharts/ex28/ex28.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: './ex28.html',
+ styleUrls: ['../ex.css']
+})
+export class Ex28 {
+ demoId = 'ex28';
+ 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/column-line-combination-data.json'
+ ).then(jsonify);
+ var schemaFetch = fetch(
+ 'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/column-line-combination-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['ex28'].title);
+ });
+ }
+}
diff --git a/src/app/fusioncharts/ex29/ex29.html b/src/app/fusioncharts/ex29/ex29.html
new file mode 100644
index 0000000..c0b20fa
--- /dev/null
+++ b/src/app/fusioncharts/ex29/ex29.html
@@ -0,0 +1,22 @@
+
+
+
+
diff --git a/src/app/fusioncharts/ex29/ex29.ts b/src/app/fusioncharts/ex29/ex29.ts
new file mode 100644
index 0000000..6bc0d6a
--- /dev/null
+++ b/src/app/fusioncharts/ex29/ex29.ts
@@ -0,0 +1,82 @@
+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: './ex29.html',
+ styleUrls: ['../ex.css']
+})
+export class Ex29 {
+ demoId = 'ex29';
+ 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: 'Cariaco Basin Sampling'
+ },
+ subcaption: {
+ text: 'Analysis of O₂ Concentration and Surface Temperature'
+ },
+ yAxis: [
+ {
+ plot: 'O2 concentration',
+ min: '3',
+ max: '6',
+ title: 'O₂ Concentration (mg/L)'
+ },
+ {
+ plot: 'Surface Temperature',
+ min: '18',
+ max: '30',
+ title: 'Surface Temperature (°C)'
+ }
+ ]
+ };
+ 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-two-variable-measures-data.json'
+ ).then(jsonify);
+ var schemaFetch = fetch(
+ 'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/plotting-two-variable-measures-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['ex29'].title);
+ });
+ }
+}
diff --git a/src/app/fusioncharts/ex30/ex30.html b/src/app/fusioncharts/ex30/ex30.html
new file mode 100644
index 0000000..c0b20fa
--- /dev/null
+++ b/src/app/fusioncharts/ex30/ex30.html
@@ -0,0 +1,22 @@
+
+
+
+
diff --git a/src/app/fusioncharts/ex30/ex30.ts b/src/app/fusioncharts/ex30/ex30.ts
new file mode 100644
index 0000000..f02a7ab
--- /dev/null
+++ b/src/app/fusioncharts/ex30/ex30.ts
@@ -0,0 +1,77 @@
+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: './ex30.html',
+ styleUrls: ['../ex.css']
+})
+export class Ex30 {
+ demoId = 'ex30';
+ 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,
+ chart: {
+ showLegend: 0
+ },
+ caption: {
+ text: 'Daily Visitors Count of a Website'
+ },
+ yAxis: [
+ {
+ plot: {
+ value: 'Daily Visitors',
+ type: 'column'
+ },
+ title: 'Daily Visitors (in thousand)'
+ }
+ ]
+ };
+ 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/column-chart-with-time-axis-data.json'
+ ).then(jsonify);
+ var schemaFetch = fetch(
+ 'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/column-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['ex30'].title);
+ });
+ }
+}
diff --git a/src/app/fusioncharts/ex31/ex31.html b/src/app/fusioncharts/ex31/ex31.html
new file mode 100644
index 0000000..c0b20fa
--- /dev/null
+++ b/src/app/fusioncharts/ex31/ex31.html
@@ -0,0 +1,22 @@
+
+
+
+
diff --git a/src/app/fusioncharts/ex31/ex31.ts b/src/app/fusioncharts/ex31/ex31.ts
new file mode 100644
index 0000000..add7057
--- /dev/null
+++ b/src/app/fusioncharts/ex31/ex31.ts
@@ -0,0 +1,77 @@
+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: './ex31.html',
+ styleUrls: ['../ex.css']
+})
+export class Ex31 {
+ demoId = 'ex31';
+ 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,
+ chart: {
+ showLegend: 0
+ },
+ caption: {
+ text: 'Daily Visitors Count of a Website'
+ },
+ yAxis: [
+ {
+ plot: {
+ value: 'Daily Visitors',
+ type: 'area'
+ },
+ title: 'Daily Visitors (in thousand)'
+ }
+ ]
+ };
+ 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/area-chart-with-time-axis-data.json'
+ ).then(jsonify);
+ var schemaFetch = fetch(
+ 'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/area-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['ex31'].title);
+ });
+ }
+}
diff --git a/src/app/fusioncharts/ex32/ex32.html b/src/app/fusioncharts/ex32/ex32.html
new file mode 100644
index 0000000..3f7804b
--- /dev/null
+++ b/src/app/fusioncharts/ex32/ex32.html
@@ -0,0 +1,21 @@
+
+
+
diff --git a/src/app/fusioncharts/ex32/ex32.ts b/src/app/fusioncharts/ex32/ex32.ts
new file mode 100644
index 0000000..6ba1ad9
--- /dev/null
+++ b/src/app/fusioncharts/ex32/ex32.ts
@@ -0,0 +1,75 @@
+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: './ex32.html',
+ styleUrls: ['../ex.css']
+})
+export class Ex32 {
+ demoId = 'ex32';
+ 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: 'Apple Inc. Stock Price'
+ },
+ yAxis: {
+ plot: {
+ open: 'Open',
+ high: 'High',
+ low: 'Low',
+ close: 'Close',
+ type: 'candlestick'
+ },
+ title: '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/candlestick-chart-data.json'
+ ).then(jsonify);
+ var schemaFetch = fetch(
+ 'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/candlestick-chart-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['ex32'].title);
+ });
+ }
+}
diff --git a/src/app/fusioncharts/ex33/ex33.html b/src/app/fusioncharts/ex33/ex33.html
new file mode 100644
index 0000000..c0b20fa
--- /dev/null
+++ b/src/app/fusioncharts/ex33/ex33.html
@@ -0,0 +1,22 @@
+
+
+
+
diff --git a/src/app/fusioncharts/ex33/ex33.ts b/src/app/fusioncharts/ex33/ex33.ts
new file mode 100644
index 0000000..450be07
--- /dev/null
+++ b/src/app/fusioncharts/ex33/ex33.ts
@@ -0,0 +1,142 @@
+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: './ex33.html',
+ styleUrls: ['../ex.css']
+})
+export class Ex33 {
+ demoId = 'ex33';
+ 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: 'Interest Rate Analysis'
+ },
+ subCaption: {
+ text: 'Federal Reserve (USA)'
+ },
+ yAxis: [
+ {
+ plot: 'Interest Rate',
+ format: {
+ suffix: '%'
+ },
+ title: 'Interest Rate'
+ }
+ ],
+ dataMarker: [
+ {
+ seriesName: 'Interest Rate',
+ time: 'Mar-1980',
+ identifier: 'H',
+ timeFormat: '%b-%Y',
+ tooltext:
+ 'As a part of credit control program, under the leadership of Paul Volcker, the Fed tightened the money supply, allowing the federal fund rates to approach 20 percent.'
+ },
+ {
+ seriesName: 'Interest Rate',
+ time: 'Aug-1982',
+ identifier: 'L',
+ timeFormat: '%b-%Y',
+ tooltext:
+ 'The FED eases off the monetary brakes, allowing interest rates to fall and the economy to begin a strong recovery.'
+ },
+ {
+ seriesName: 'Interest Rate',
+ time: 'Oct-1987',
+ identifier: 'L',
+ timeFormat: '%b-%Y',
+ tooltext:
+ 'The FED is forced to ease rate after the stock market crash.'
+ },
+ {
+ seriesName: 'Interest Rate',
+ time: 'May-1989',
+ identifier: 'H',
+ timeFormat: '%b-%Y',
+ tooltext:
+ 'Liquidity problem forced the Fed to increase rate to nearly 10%.'
+ },
+ {
+ seriesName: 'Interest Rate',
+ time: 'Sept-1992',
+ identifier: 'L',
+ timeFormat: '%b-%Y',
+ tooltext:
+ 'To fight the jobless economy growth the Fed had to reduce the interest rate to 3%.'
+ },
+ {
+ seriesName: 'Interest Rate',
+ time: 'Jun-2003',
+ identifier: 'L',
+ timeFormat: '%b-%Y',
+ tooltext:
+ 'Struggling to revive the economy, the FED cuts it’s benchmark rate to 1%.'
+ },
+ {
+ seriesName: 'Interest Rate',
+ time: 'Sep-2007',
+ identifier: 'L',
+ timeFormat: '%b-%Y',
+ tooltext: 'Fed started reducing the Federal Fund Rate.'
+ },
+ {
+ seriesName: 'Interest Rate',
+ time: 'Dec-2008',
+ identifier: 'L',
+ timeFormat: '%b-%Y',
+ tooltext:
+ 'Fed reduced the interest rates to sub 0.25% to manage the menace of longest economic downturn since World War 2'
+ }
+ ]
+ };
+ 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/annotating-single-data-point-data.json'
+ ).then(jsonify);
+ var schemaFetch = fetch(
+ 'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/annotating-single-data-point-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['ex33'].title);
+ });
+ }
+}
diff --git a/src/app/fusioncharts/ex34/ex34.html b/src/app/fusioncharts/ex34/ex34.html
new file mode 100644
index 0000000..c0b20fa
--- /dev/null
+++ b/src/app/fusioncharts/ex34/ex34.html
@@ -0,0 +1,22 @@
+
+
+
+
diff --git a/src/app/fusioncharts/ex34/ex34.ts b/src/app/fusioncharts/ex34/ex34.ts
new file mode 100644
index 0000000..919076c
--- /dev/null
+++ b/src/app/fusioncharts/ex34/ex34.ts
@@ -0,0 +1,161 @@
+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: './ex34.html',
+ styleUrls: ['../ex.css']
+})
+export class Ex34 {
+ demoId = 'ex34';
+ 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 = {
+ data: null,
+ yAxis: null,
+ xAxis: null,
+ caption: null,
+ subCaption: null
+ };
+ 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/single-event-overlay-data.json'
+ ).then(jsonify);
+ var schemaFetch = fetch(
+ 'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/single-event-overlay-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;
+ this.dataSource.yAxis = [
+ {
+ plot: 'Interest Rate',
+ format: {
+ suffix: '%'
+ },
+ title: 'Interest Rate'
+ }
+ ];
+ this.dataSource.xAxis = {
+ plot: 'Time',
+ timemarker: [
+ {
+ start: 'Mar-1980',
+ label: 'US inflation peaked at 14.8%.',
+ timeFormat: '%b-%Y',
+ style: {
+ marker: {
+ fill: '#D0D6F4'
+ }
+ }
+ },
+ {
+ start: 'May-1981',
+ label:
+ 'To control inflation, the Fed started {br} raising interest rates to over {br} 20%.',
+ timeFormat: '%b-%Y'
+ },
+ {
+ start: 'Jun-1983',
+ label:
+ 'By proactive actions of Mr.Volcker, {br} the inflation falls to 2.4% {br} from the peak of over 14% {br} just three years ago.',
+ timeFormat: '%b-%Y',
+ style: {
+ marker: {
+ fill: '#D0D6F4'
+ }
+ }
+ },
+ {
+ start: 'Oct-1987',
+ label:
+ 'The Dow Jones Industrial Average lost {br} about 30% of it’s value.',
+ timeFormat: '%b-%Y',
+ style: {
+ marker: {
+ fill: '#FBEFCC'
+ }
+ }
+ },
+ {
+ start: 'Jan-1989',
+ label: 'George H.W. Bush becomes {br} the 41st president of US!',
+ timeFormat: '%b-%Y'
+ },
+ {
+ start: 'Aug-1990',
+ label:
+ 'The oil prices spiked to $35 {br} per barrel from $15 per barrel {br} because of the Gulf War.',
+ timeFormat: '%b-%Y'
+ },
+ {
+ start: 'Dec-1996',
+ label:
+ 'Alan Greenspan warns of the dangers {br} of "irrational exuberance" in financial markets, {br} an admonition that goes unheeded',
+ timeFormat: '%b-%Y'
+ },
+ {
+ start: 'Sep-2008',
+ label: 'Lehman Brothers collapsed!',
+ timeFormat: '%b-%Y'
+ },
+ {
+ start: 'Mar-2009',
+ label:
+ 'The net worth of US households {br} stood at a trough of $55 trillion.',
+ timeFormat: '%b-%Y',
+ style: {
+ marker: {
+ fill: '#FBEFCC'
+ }
+ }
+ },
+ {
+ start: 'Oct-2009',
+ label: 'Unemployment rate peaked {br} in given times to 10%.',
+ timeFormat: '%b-%Y'
+ }
+ ]
+ };
+ this.dataSource.caption = {
+ text: 'Interest Rate Analysis'
+ };
+ this.dataSource.subCaption = {
+ text: 'Federal Reserve (USA)'
+ };
+ });
+ }
+
+ ngOnInit() {
+ setTimeout(() => {
+ SelectedSingleton.change(this.sampleCode['ex34'].title);
+ });
+ }
+}
diff --git a/src/app/fusioncharts/ex35/ex35.html b/src/app/fusioncharts/ex35/ex35.html
new file mode 100644
index 0000000..c0b20fa
--- /dev/null
+++ b/src/app/fusioncharts/ex35/ex35.html
@@ -0,0 +1,22 @@
+
+
+
+
diff --git a/src/app/fusioncharts/ex35/ex35.ts b/src/app/fusioncharts/ex35/ex35.ts
new file mode 100644
index 0000000..b09f19a
--- /dev/null
+++ b/src/app/fusioncharts/ex35/ex35.ts
@@ -0,0 +1,109 @@
+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: './ex35.html',
+ styleUrls: ['../ex.css']
+})
+export class Ex35 {
+ demoId = 'ex35';
+ 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 = {
+ data: null,
+ caption: {
+ text: 'Interest Rate Analysis'
+ },
+ subCaption: {
+ text: 'Federal Reserve (USA)'
+ },
+ yAxis: [
+ {
+ plot: 'Interest Rate',
+ format: {
+ suffix: '%'
+ },
+ title: 'Interest Rate'
+ }
+ ],
+ xAxis: {
+ plot: 'Time',
+ timemarker: [
+ {
+ start: 'Jul-1981',
+ end: 'Nov-1982',
+ label:
+ 'Economic downturn was triggered by {br} tight monetary policy in an effort to {br} fight mounting inflation.',
+ timeFormat: '%b-%Y'
+ },
+ {
+ start: 'Jul-1990',
+ end: 'Mar-1991',
+ label:
+ 'This eight month recession period {br} was characterized by a sluggish employment recovery, {br} most commonly referred to as a jobless recovery.',
+ timeFormat: '%b-%Y'
+ },
+ {
+ start: 'Jun-2004',
+ end: 'Jul-2006',
+ label:
+ 'The Fed after raising interest rates {br} at 17 consecutive meetings, ends its campaign {br} to slow the economy and forestall inflation.',
+ timeFormat: '%b-%Y'
+ },
+ {
+ start: 'Dec-2007',
+ end: 'Jun-2009',
+ label:
+ 'Recession caused by the worst {br} collapse of financial system in recent {br} times.',
+ timeFormat: '%b-%Y'
+ }
+ ]
+ }
+ };
+ 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/date-range-event-overlay-data.json'
+ ).then(jsonify);
+ var schemaFetch = fetch(
+ 'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/date-range-event-overlay-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['ex35'].title);
+ });
+ }
+}
diff --git a/src/app/fusioncharts/ex36/ex36.html b/src/app/fusioncharts/ex36/ex36.html
new file mode 100644
index 0000000..c0b20fa
--- /dev/null
+++ b/src/app/fusioncharts/ex36/ex36.html
@@ -0,0 +1,22 @@
+
+
+
+
diff --git a/src/app/fusioncharts/ex36/ex36.ts b/src/app/fusioncharts/ex36/ex36.ts
new file mode 100644
index 0000000..cc36807
--- /dev/null
+++ b/src/app/fusioncharts/ex36/ex36.ts
@@ -0,0 +1,84 @@
+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: './ex36.html',
+ styleUrls: ['../ex.css']
+})
+export class Ex36 {
+ demoId = 'ex36';
+ 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 = {
+ data: null,
+ caption: {
+ text: 'Temperature readings in Italy'
+ },
+ yAxis: [
+ {
+ plot: 'Temperature',
+ title: 'Temperature',
+ format: {
+ suffix: '°C'
+ },
+ style: {
+ title: {
+ 'font-size': '14px'
+ }
+ },
+ referenceLine: [
+ {
+ label: 'Controlled Temperature',
+ value: '10'
+ }
+ ]
+ }
+ ]
+ };
+ 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/adding-a-reference-line-data.json'
+ ).then(jsonify);
+ var schemaFetch = fetch(
+ 'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/adding-a-reference-line-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['ex36'].title);
+ });
+ }
+}
diff --git a/src/app/fusioncharts/samplecode.ts b/src/app/fusioncharts/samplecode.ts
index a07c63f..5b1397d 100644
--- a/src/app/fusioncharts/samplecode.ts
+++ b/src/app/fusioncharts/samplecode.ts
@@ -126,217 +126,386 @@
// };
// export default fcDemos;
-var fcDemos = {};
-
-fcDemos['ex1'] = {
- title: 'A Simple Chart',
- description: 'A simple chart with all data embedded into the directive',
- module:`// Setup needed in app.module.ts\n\nimport { NgModule, enableProdMode } from '@angular/core'\nimport { AppComponent } from './app.component';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FusionChartsModule } from 'angular-fusioncharts';\n\n// Load FusionCharts\nimport * as FusionCharts from 'fusioncharts';\n// Load Charts module\nimport * as Charts from 'fusioncharts/fusioncharts.charts';\n// Load fusion theme\nimport * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';\n\n// Add dependencies to FusionChartsModule\nFusionChartsModule.fcRoot(FusionCharts, Charts, FusionTheme)\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n FusionChartsModule\n ],\n providers: [\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule {\n}\n`,
- component: `// In app.component.ts\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'app',\n templateUrl: 'app.component.html'\n})\nexport class AppComponent { \n dataSource: Object;\n chartConfig: Object;\n\n constructor() {\n this.chartConfig = {\n width: '700',\n height: '400',\n type: 'column2d',\n dataFormat: 'json',\n };\n\n this.dataSource = {\n "chart": {\n "caption": "Countries With Most Oil Reserves [2017-18]",\n "subCaption": "In MMbbl = One Million barrels",\n "xAxisName": "Country",\n "yAxisName": "Reserves (MMbbl)",\n "numberSuffix": "K",\n "theme": "fusion",\n },\n "data": [{\n "label": "Venezuela",\n "value": "290"\n }, {\n "label": "Saudi",\n "value": "260"\n }, {\n "label": "Canada",\n "value": "180"\n }, {\n "label": "Iran",\n "value": "140"\n }, {\n "label": "Russia",\n "value": "115"\n }, {\n "label": "UAE",\n "value": "100"\n }, {\n "label": "US",\n "value": "30"\n }, {\n "label": "China",\n "value": "30"\n }]\n };\n\n }\n}\n`,
- template: `\n
\n`
+var fcDemos = {};
+
+fcDemos['ex1'] = {
+ type: '',
+ title: 'A Simple Chart',
+ description: 'A simple chart with all data embedded into the directive',
+ module: `// Setup needed in app.module.ts\n\nimport { NgModule, enableProdMode } from '@angular/core'\nimport { AppComponent } from './app.component';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FusionChartsModule } from 'angular-fusioncharts';\n\n// Load FusionCharts\nimport * as FusionCharts from 'fusioncharts';\n// Load Charts module\nimport * as Charts from 'fusioncharts/fusioncharts.charts';\n// Load fusion theme\nimport * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';\n\n// Add dependencies to FusionChartsModule\nFusionChartsModule.fcRoot(FusionCharts, Charts, FusionTheme)\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n FusionChartsModule\n ],\n providers: [\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule {\n}\n`,
+ component: `// In app.component.ts\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'app',\n templateUrl: 'app.component.html'\n})\nexport class AppComponent { \n dataSource: Object;\n chartConfig: Object;\n\n constructor() {\n this.chartConfig = {\n width: '700',\n height: '400',\n type: 'column2d',\n dataFormat: 'json',\n };\n\n this.dataSource = {\n "chart": {\n "caption": "Countries With Most Oil Reserves [2017-18]",\n "subCaption": "In MMbbl = One Million barrels",\n "xAxisName": "Country",\n "yAxisName": "Reserves (MMbbl)",\n "numberSuffix": "K",\n "theme": "fusion",\n },\n "data": [{\n "label": "Venezuela",\n "value": "290"\n }, {\n "label": "Saudi",\n "value": "260"\n }, {\n "label": "Canada",\n "value": "180"\n }, {\n "label": "Iran",\n "value": "140"\n }, {\n "label": "Russia",\n "value": "115"\n }, {\n "label": "UAE",\n "value": "100"\n }, {\n "label": "US",\n "value": "30"\n }, {\n "label": "China",\n "value": "30"\n }]\n };\n\n }\n}\n`,
+ template: `\n\n`
};
-fcDemos['ex2'] = {
- title: 'A 3D Pie Chart',
- description:'A 3D pie chart using the datasource attribute from components scope',
- module:`// Setup needed in app.module.ts\n\nimport { NgModule, enableProdMode } from '@angular/core'\nimport { AppComponent } from './app.component';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FusionChartsModule } from 'angular-fusioncharts';\n\n// Load FusionCharts\nimport * as FusionCharts from 'fusioncharts';\n// Load Charts module\nimport * as Charts from 'fusioncharts/fusioncharts.charts';\n// Load fusion theme\nimport * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';\n\n// Add dependencies to FusionChartsModule\nFusionChartsModule.fcRoot(FusionCharts, Charts, FusionTheme)\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n FusionChartsModule\n ],\n providers: [\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule {\n}\n`,
- component: `// in app.component.ts\nimport { Component } from '@angular/core';\n@Component({\n selector: 'app',\n templateUrl: 'app.component.html'\n})\nexport class AppComponent { \n dataSource = {\n "chart": {\n "caption": "Recommended Portfolio Split",\n "subCaption" : "For a net-worth of $1M",\n "showValues":"1",\n "showPercentInTooltip" : "0",\n "numberPrefix" : "$",\n "enableMultiSlicing":"1",\n "theme": "fusion"\n },\n "data": [{\n "label": "Equity",\n "value": "300000"\n }, {\n "label": "Debt",\n "value": "230000"\n }, {\n "label": "Bullion",\n "value": "180000"\n }, {\n "label": "Real-estate",\n "value": "270000"\n }, {\n "label": "Insurance",\n "value": "20000"\n }]\n }\n}\n`,
- template: `\n\n`
+fcDemos['ex2'] = {
+ type: '',
+ title: 'A 3D Pie Chart',
+ description:
+ 'A 3D pie chart using the datasource attribute from components scope',
+ module: `// Setup needed in app.module.ts\n\nimport { NgModule, enableProdMode } from '@angular/core'\nimport { AppComponent } from './app.component';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FusionChartsModule } from 'angular-fusioncharts';\n\n// Load FusionCharts\nimport * as FusionCharts from 'fusioncharts';\n// Load Charts module\nimport * as Charts from 'fusioncharts/fusioncharts.charts';\n// Load fusion theme\nimport * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';\n\n// Add dependencies to FusionChartsModule\nFusionChartsModule.fcRoot(FusionCharts, Charts, FusionTheme)\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n FusionChartsModule\n ],\n providers: [\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule {\n}\n`,
+ component: `// in app.component.ts\nimport { Component } from '@angular/core';\n@Component({\n selector: 'app',\n templateUrl: 'app.component.html'\n})\nexport class AppComponent { \n dataSource = {\n "chart": {\n "caption": "Recommended Portfolio Split",\n "subCaption" : "For a net-worth of $1M",\n "showValues":"1",\n "showPercentInTooltip" : "0",\n "numberPrefix" : "$",\n "enableMultiSlicing":"1",\n "theme": "fusion"\n },\n "data": [{\n "label": "Equity",\n "value": "300000"\n }, {\n "label": "Debt",\n "value": "230000"\n }, {\n "label": "Bullion",\n "value": "180000"\n }, {\n "label": "Real-estate",\n "value": "270000"\n }, {\n "label": "Insurance",\n "value": "20000"\n }]\n }\n}\n`,
+ template: `\n\n`
};
-fcDemos['ex3'] = {
- title: 'A Column, Line and Area Combi Chart',
- description:'A combination chart of column, line and area',
- module:`// Setup needed in app.module.ts\n\nimport { NgModule, enableProdMode } from '@angular/core'\nimport { AppComponent } from './app.component';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FusionChartsModule } from 'angular-fusioncharts';\n\n// Load FusionCharts\nimport * as FusionCharts from 'fusioncharts';\n// Load Charts module\nimport * as Charts from 'fusioncharts/fusioncharts.charts';\n// Load fusion theme\nimport * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion'\n\n\n// Add dependencies to FusionChartsModule\nFusionChartsModule.fcRoot(FusionCharts, Charts, FusionTheme)\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n FusionChartsModule\n ],\n providers: [\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule {\n}\n`,
- component: `// in app.component.ts\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'app',\n templateUrl: 'app.component.html'\n})\nexport class AppComponent {\n dataSource = {\n "chart": {\n "caption": "Expense Analysis",\n "subCaption": "ACME Inc.",\n "xAxisname": "Region",\n "yAxisName": "Amount (In USD)",\n "numberPrefix": "$",\n "exportenabled": "1",\n "theme": "fusion"\n },\n "categories": [{\n "category": [{\n "label": "East"\n }, {\n "label": "West"\n }, {\n "label": "South"\n }, {\n "label": "North"\n }]\n }],\n "dataset": [{\n "seriesName": "Actual Expenses",\n "data": [{\n "value": "1441290"\n }, {\n "value": "855912"\n }, {\n "value": "911404"\n }, {\n "value": "648136"\n }]\n }, {\n "seriesName": "Budgeted Expenses",\n "renderAs": "line",\n "data": [{\n "value": "1297430"\n }, {\n "value": "776485"\n }, {\n "value": "685352"\n }, {\n "value": "726791"\n }]\n }, {\n "seriesName": "Unknown liabilities",\n "renderAs": "area",\n "showAnchors" : "0",\n "data": [{\n "value": "143860"\n }, {\n "value": "79427"\n }, {\n "value": "226052"\n }, {\n "value": "78655"\n }]\n }]\n };\n\n constructor () {\n }\n}\n`,
- template: `\n\n`
+fcDemos['ex3'] = {
+ type: '',
+ title: 'A Column, Line and Area Combi Chart',
+ description: 'A combination chart of column, line and area',
+ module: `// Setup needed in app.module.ts\n\nimport { NgModule, enableProdMode } from '@angular/core'\nimport { AppComponent } from './app.component';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FusionChartsModule } from 'angular-fusioncharts';\n\n// Load FusionCharts\nimport * as FusionCharts from 'fusioncharts';\n// Load Charts module\nimport * as Charts from 'fusioncharts/fusioncharts.charts';\n// Load fusion theme\nimport * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion'\n\n\n// Add dependencies to FusionChartsModule\nFusionChartsModule.fcRoot(FusionCharts, Charts, FusionTheme)\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n FusionChartsModule\n ],\n providers: [\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule {\n}\n`,
+ component: `// in app.component.ts\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'app',\n templateUrl: 'app.component.html'\n})\nexport class AppComponent {\n dataSource = {\n "chart": {\n "caption": "Expense Analysis",\n "subCaption": "ACME Inc.",\n "xAxisname": "Region",\n "yAxisName": "Amount (In USD)",\n "numberPrefix": "$",\n "exportenabled": "1",\n "theme": "fusion"\n },\n "categories": [{\n "category": [{\n "label": "East"\n }, {\n "label": "West"\n }, {\n "label": "South"\n }, {\n "label": "North"\n }]\n }],\n "dataset": [{\n "seriesName": "Actual Expenses",\n "data": [{\n "value": "1441290"\n }, {\n "value": "855912"\n }, {\n "value": "911404"\n }, {\n "value": "648136"\n }]\n }, {\n "seriesName": "Budgeted Expenses",\n "renderAs": "line",\n "data": [{\n "value": "1297430"\n }, {\n "value": "776485"\n }, {\n "value": "685352"\n }, {\n "value": "726791"\n }]\n }, {\n "seriesName": "Unknown liabilities",\n "renderAs": "area",\n "showAnchors" : "0",\n "data": [{\n "value": "143860"\n }, {\n "value": "79427"\n }, {\n "value": "226052"\n }, {\n "value": "78655"\n }]\n }]\n };\n\n constructor () {\n }\n}\n`,
+ template: `\n\n`
};
-fcDemos['ex4'] = {
- module:`// Setup needed in app.module.ts\n\nimport { NgModule, enableProdMode } from '@angular/core'\nimport { AppComponent } from './app.component';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FusionChartsModule } from 'angular-fusioncharts';\n\n// Load FusionCharts\nimport * as FusionCharts from 'fusioncharts';\n// Load Charts module\nimport * as Charts from 'fusioncharts/fusioncharts.charts';\n// Load fusion theme\nimport * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion'\n\n// Add dependencies to FusionChartsModule\nFusionChartsModule.fcRoot(FusionCharts, Charts, FusionTheme\)\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n FusionChartsModule\n ],\n providers: [\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule {\n}\n`,
- component: `// in app.component.ts\nimport {Component} from '@angular/core';\n\n@Component({\n selector: 'app',\n templateUrl: 'app.component.html'\n})\nexport class AppComponent {\n dataSource = {\n chart: {\n caption: "Harry's SuperMart",\n subCaption: "Top 5 stores in last month by revenue",\n numberPrefix: "$",\n theme: "ocean"\n },\n data:[{\n label: "Bakersfield Central",\n value: "880000"\n },\n {\n label: "Garden Groove harbour",\n value: "730000"\n },\n {\n label: "Los Angeles Topanga",\n value: "590000"\n },\n {\n label: "Compton-Rancho Dom",\n value: "520000"\n },\n {\n label: "Daly City Serramonte",\n value: "330000"\n }]\n };\n};\n`,
- template: `\n\n\n\n\n`
+fcDemos['ex4'] = {
+ type: '',
+ module: `// Setup needed in app.module.ts\n\nimport { NgModule, enableProdMode } from '@angular/core'\nimport { AppComponent } from './app.component';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FusionChartsModule } from 'angular-fusioncharts';\n\n// Load FusionCharts\nimport * as FusionCharts from 'fusioncharts';\n// Load Charts module\nimport * as Charts from 'fusioncharts/fusioncharts.charts';\n// Load fusion theme\nimport * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion'\n\n// Add dependencies to FusionChartsModule\nFusionChartsModule.fcRoot(FusionCharts, Charts, FusionTheme\)\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n FusionChartsModule\n ],\n providers: [\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule {\n}\n`,
+ component: `// in app.component.ts\nimport {Component} from '@angular/core';\n\n@Component({\n selector: 'app',\n templateUrl: 'app.component.html'\n})\nexport class AppComponent {\n dataSource = {\n chart: {\n caption: "Harry's SuperMart",\n subCaption: "Top 5 stores in last month by revenue",\n numberPrefix: "$",\n theme: "ocean"\n },\n data:[{\n label: "Bakersfield Central",\n value: "880000"\n },\n {\n label: "Garden Groove harbour",\n value: "730000"\n },\n {\n label: "Los Angeles Topanga",\n value: "590000"\n },\n {\n label: "Compton-Rancho Dom",\n value: "520000"\n },\n {\n label: "Daly City Serramonte",\n value: "330000"\n }]\n };\n};\n`,
+ template: `\n\n\n\n\n`
};
-fcDemos['ex5'] = {
- title: 'Fetch data from JSON URL',
- description:'Fetch data remotely from a JSON file or URL',
- module:`// Setup needed in app.module.ts\n\nimport { NgModule, enableProdMode } from '@angular/core'\nimport { AppComponent } from './app.component';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FusionChartsModule } from 'angular-fusioncharts';\n\n// Load FusionCharts\nimport * as FusionCharts from 'fusioncharts';\n// Load Charts module\nimport * as Charts from 'fusioncharts/fusioncharts.charts';\n// Load fusion theme\nimport * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion'\n\n// Add dependencies to FusionChartsModule\nFusionChartsModule.fcRoot(FusionCharts, Charts, FusionTheme);\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n FusionChartsModule\n ],\n providers: [\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule {\n}\n`,
- component: `// in app.component.ts\nimport {Component} from '@angular/core';\n\n@Component({\n selector: 'app',\n templateUrl: 'app.component.html'\n})\nexport class AppComponent {\n};\n\n`,
- template: `\n\n\n`
+fcDemos['ex5'] = {
+ type: '',
+ title: 'Fetch data from JSON URL',
+ description: 'Fetch data remotely from a JSON file or URL',
+ module: `// Setup needed in app.module.ts\n\nimport { NgModule, enableProdMode } from '@angular/core'\nimport { AppComponent } from './app.component';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FusionChartsModule } from 'angular-fusioncharts';\n\n// Load FusionCharts\nimport * as FusionCharts from 'fusioncharts';\n// Load Charts module\nimport * as Charts from 'fusioncharts/fusioncharts.charts';\n// Load fusion theme\nimport * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion'\n\n// Add dependencies to FusionChartsModule\nFusionChartsModule.fcRoot(FusionCharts, Charts, FusionTheme);\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n FusionChartsModule\n ],\n providers: [\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule {\n}\n`,
+ component: `// in app.component.ts\nimport {Component} from '@angular/core';\n\n@Component({\n selector: 'app',\n templateUrl: 'app.component.html'\n})\nexport class AppComponent {\n};\n\n`,
+ template: `\n\n\n`
};
-fcDemos['ex5a'] = {
- title: 'Fetch data from a XML URL',
- description:'Fetch data remotely from a XML file or URL',
- module:`// Setup needed in app.module.ts\n\nimport { NgModule, enableProdMode } from '@angular/core'\nimport { AppComponent } from './app.component';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FusionChartsModule } from 'angular-fusioncharts';\n\n// Load FusionCharts\nimport * as FusionCharts from 'fusioncharts';\n// Load Charts module\nimport * as Charts from 'fusioncharts/fusioncharts.charts';\n// Load fusion theme\nimport * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion'\n\n// Add dependencies to FusionChartsModule\nFusionChartsModule.fcRoot(FusionCharts, Charts, FusionTheme);\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n FusionChartsModule\n ],\n providers: [\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule {\n}\n`,
- component: `// in app.component.ts\nimport {Component} from '@angular/core';\n@Component({\n selector: 'app',\n templateUrl: 'app.component.html'\n})\n\nexport class AppComponent {\n};\n`,
- template: `\n\n\n`
+fcDemos['ex5a'] = {
+ type: '',
+ title: 'Fetch data from a XML URL',
+ description: 'Fetch data remotely from a XML file or URL',
+ module: `// Setup needed in app.module.ts\n\nimport { NgModule, enableProdMode } from '@angular/core'\nimport { AppComponent } from './app.component';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FusionChartsModule } from 'angular-fusioncharts';\n\n// Load FusionCharts\nimport * as FusionCharts from 'fusioncharts';\n// Load Charts module\nimport * as Charts from 'fusioncharts/fusioncharts.charts';\n// Load fusion theme\nimport * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion'\n\n// Add dependencies to FusionChartsModule\nFusionChartsModule.fcRoot(FusionCharts, Charts, FusionTheme);\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n FusionChartsModule\n ],\n providers: [\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule {\n}\n`,
+ component: `// in app.component.ts\nimport {Component} from '@angular/core';\n@Component({\n selector: 'app',\n templateUrl: 'app.component.html'\n})\n\nexport class AppComponent {\n};\n`,
+ template: `\n\n\n`
};
-fcDemos['ex6'] = {
- title: 'Update chart data',
- description:'Change the data dynamically in the component and watch the chart update automatically',
- module:`// Setup needed in app.module.ts\n\nimport { NgModule, enableProdMode } from '@angular/core'\nimport { AppComponent } from './app.component';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FusionChartsModule } from 'angular-fusioncharts';\n\n// Load FusionCharts\nimport * as FusionCharts from 'fusioncharts';\n// Load Charts module\nimport * as Charts from 'fusioncharts/fusioncharts.charts';\n// Load fusion theme\nimport * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion'\n\n// Add dependencies to FusionChartsModule\nFusionChartsModule.fcRoot(FusionCharts, Charts, FusionTheme)\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n FusionChartsModule\n ],\n providers: [\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule {\n}\n`,
- component: `// in app.component.ts\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'app',\n templateUrl: 'app.component.html'\n})\n\nexport class AppComponent {\n\n type = 'Column2D';\n width = '600';\n height = '300';\n dataFormat = 'json';\n dataSource: any = {\n "chart": {\n "caption": "Countries With Most Oil Reserves [2017-18]",\n "subCaption": "In MMbbl = One Million barrels",\n "xAxisName": "Country",\n "yAxisName": "Reserves (MMbbl)",\n "numberSuffix": "K",\n "theme": "fusion",\n "updateAnimDuration":"0.4"\n },\n "data": [{\n "label": "Venezuela",\n "value": "290"\n }, {\n "label": "Saudi",\n "value": "260"\n }, {\n "label": "Canada",\n "value": "180"\n }, {\n "label": "Iran",\n "value": "140"\n }, {\n "label": "Russia",\n "value": "115"\n }, {\n "label": "UAE",\n "value": "100"\n }, {\n "label": "US",\n "value": "30"\n }, {\n "label": "China",\n "value": "30"\n }]\n };\n\n //This function generates random number to update the chart data.\n getRandomNumber = function () {\n var max = 290, min = 30;\n return Math.round(((max - min) * Math.random()) + min);\n }\n updateMyChartData() {\n this.dataSource.data[2].value = this.getRandomNumber();\n this.dataSource.data[3].value = this.getRandomNumber();\n }\n\n constructor () {\n\n }\n}\n`,
- template: `\n\n\n\n\n\n`
+fcDemos['ex6'] = {
+ type: '',
+ title: 'Update chart data',
+ description:
+ 'Change the data dynamically in the component and watch the chart update automatically',
+ module: `// Setup needed in app.module.ts\n\nimport { NgModule, enableProdMode } from '@angular/core'\nimport { AppComponent } from './app.component';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FusionChartsModule } from 'angular-fusioncharts';\n\n// Load FusionCharts\nimport * as FusionCharts from 'fusioncharts';\n// Load Charts module\nimport * as Charts from 'fusioncharts/fusioncharts.charts';\n// Load fusion theme\nimport * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion'\n\n// Add dependencies to FusionChartsModule\nFusionChartsModule.fcRoot(FusionCharts, Charts, FusionTheme)\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n FusionChartsModule\n ],\n providers: [\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule {\n}\n`,
+ component: `// in app.component.ts\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'app',\n templateUrl: 'app.component.html'\n})\n\nexport class AppComponent {\n\n type = 'Column2D';\n width = '600';\n height = '300';\n dataFormat = 'json';\n dataSource: any = {\n "chart": {\n "caption": "Countries With Most Oil Reserves [2017-18]",\n "subCaption": "In MMbbl = One Million barrels",\n "xAxisName": "Country",\n "yAxisName": "Reserves (MMbbl)",\n "numberSuffix": "K",\n "theme": "fusion",\n "updateAnimDuration":"0.4"\n },\n "data": [{\n "label": "Venezuela",\n "value": "290"\n }, {\n "label": "Saudi",\n "value": "260"\n }, {\n "label": "Canada",\n "value": "180"\n }, {\n "label": "Iran",\n "value": "140"\n }, {\n "label": "Russia",\n "value": "115"\n }, {\n "label": "UAE",\n "value": "100"\n }, {\n "label": "US",\n "value": "30"\n }, {\n "label": "China",\n "value": "30"\n }]\n };\n\n //This function generates random number to update the chart data.\n getRandomNumber = function () {\n var max = 290, min = 30;\n return Math.round(((max - min) * Math.random()) + min);\n }\n updateMyChartData() {\n this.dataSource.data[2].value = this.getRandomNumber();\n this.dataSource.data[3].value = this.getRandomNumber();\n }\n\n constructor () {\n\n }\n}\n`,
+ template: `\n\n\n\n\n\n`
};
-fcDemos['ex7'] = {
- title: 'Listen to events from chart',
- description: 'Bind event listener to the chart and get the related event data',
- module:`// Setup needed in app.module.ts\n\nimport { NgModule, enableProdMode } from '@angular/core'\nimport { AppComponent } from './app.component';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FusionChartsModule } from 'angular-fusioncharts';\n\n// Load FusionCharts\nimport * as FusionCharts from 'fusioncharts';\n// Load Charts module\nimport * as Charts from 'fusioncharts/fusioncharts.charts';\n// Load fusion theme\nimport * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion'\n\n// Add dependencies to FusionChartsModule\nFusionChartsModule.fcRoot(FusionCharts, Charts, FusionTheme);\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n FusionChartsModule\n ],\n providers: [\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule {\n}\n`,
- component: `// In app.component.ts\nimport {\n Component,\n NgZone\n} from '@angular/core';\n\n@Component({\n selector: 'app',\n templateUrl: 'app.component.html'\n})\nexport class AppComponent {\n\n dataSource = {\n "chart": {\n "caption": "Countries With Most Oil Reserves [2017-18]",\n "subCaption": "In MMbbl = One Million barrels",\n "xAxisName": "Country",\n "yAxisName": "Reserves (MMbbl)",\n "numberSuffix": "K",\n "theme": "fusion",\n },\n "data": [{\n "label": "Venezuela",\n "value": "290"\n }, {\n "label": "Saudi",\n "value": "260"\n }, {\n "label": "Canada",\n "value": "180"\n }, {\n "label": "Iran",\n "value": "140"\n }, {\n "label": "Russia",\n "value": "115"\n }, {\n "label": "UAE",\n "value": "100"\n }, {\n "label": "US",\n "value": "30"\n }, {\n "label": "China",\n "value": "30"\n }]\n };\n\n selectedLabel = "";\n selectedValue = "";\n\n update($event) {\n // Run inside angular context\n this.zone.run(() => {\n this.selectedLabel = $event.dataObj.categoryLabel;\n this.selectedValue = $event.dataObj.displayValue;\n })\n }\n constructor(private zone: NgZone) {}\n}\n`,
- template: `\n
\n
\n
\n \n You're are currently hovering over {{selectedLabel || "______"}} whose value is {{selectedValue || "_______"}}
\n \n
\n
\n
\n
\n
\n \n You're are currently hovering over {{selectedLabel || "______"}} whose value is {{selectedValue || "_______"}}
\n \n
\n
{{logMessage}}
`
+fcDemos['ex9'] = {
+ type: '',
+ title: 'Percentage Calculation',
+ description:
+ 'Hover on a plot to see the percentage value with respect to total',
+ module: `// Setup needed in app.module.ts\n\nimport { NgModule, enableProdMode } from '@angular/core'\nimport { AppComponent } from './app.component';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FusionChartsModule } from 'angular-fusioncharts';\n\n// Load FusionCharts\nimport * as FusionCharts from 'fusioncharts';\n// Load Charts module\nimport * as Charts from 'fusioncharts/fusioncharts.charts';\n// Load fusion theme\nimport * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';\n\n// Add dependencies to FusionChartsModule\nFusionChartsModule.fcRoot(FusionCharts, Charts, FusionTheme)\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n FusionChartsModule\n ],\n providers: [\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule {\n}\n`,
+ component: `// in app.component.ts\nimport { Component, AfterViewInit, NgZone} from '@angular/core';\n\n@Component({\n selector: 'app',\n templateUrl: 'app.component.html'\n})\n\nexport class AppComponent {\n\n logMessage = 'Hover on the plot to see the percentage of a column wrt total';\n\n dataSource = {\n "chart": {\n "caption": "Countries With Most Oil Reserves [2017-18]",\n "subCaption": "In MMbbl = One Million barrels",\n "xAxisName": "Country",\n "yAxisName": "Reserves (MMbbl)",\n "numberSuffix": "K",\n "theme": "fusion",\n },\n "data": [{\n "label": "Venezuela",\n "value": "290"\n }, {\n "label": "Saudi",\n "value": "260"\n }, {\n "label": "Canada",\n "value": "180"\n }, {\n "label": "Iran",\n "value": "140"\n }, {\n "label": "Russia",\n "value": "115"\n }, {\n "label": "UAE",\n "value": "100"\n }, {\n "label": "US",\n "value": "30"\n }, {\n "label": "China",\n "value": "30"\n }]\n };\n\n total: number;\n\n getPercentValue() {\n return (eve, arg) => {\n this.zone.run(() => {\n \n let value = (arg.value / this.total * 100).toFixed(2);\n this.logMessage = arg.categoryLabel + " is " + value + "% of the total";\n })\n }\n }\n\n events = {\n dataPlotRollOver: this.getPercentValue()\n }\n\n constructor (private zone:NgZone) {\n let myData = this.dataSource.data;\n\n this.total = 0;\n\n // Calculate the sum of all values\n for (let i = 0; i < myData.length; i++) {\n this.total += Number(myData[i].value);\n }\n \n }\n\n \n}\n`,
+ template: `\n\n\n\n\n\n{{logMessage}}
`
};
-fcDemos['ex10'] = {
- title: 'Export multiple charts',
- description: 'Use Batch Export Feature to export multiple charts as a single image/PDF',
- module:`// Setup needed in app.module.ts\n\nimport { NgModule, enableProdMode } from '@angular/core'\nimport { AppComponent } from './app.component';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FusionChartsModule } from 'angular-fusioncharts';\n\n// Load FusionCharts\nimport * as FusionCharts from 'fusioncharts';\n// Load Charts module\nimport * as Charts from 'fusioncharts/fusioncharts.charts';\n// Load fusion theme\nimport * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';\n\n// Add dependencies to FusionChartsModule\nFusionChartsModule.fcRoot(FusionCharts, Charts, FusionTheme);\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n FusionChartsModule\n ],\n providers: [\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule {\n}\n`,
- component: `// in app.component.ts\nimport { Component } from '@angular/core';\nimport * as FusionCharts from 'fusioncharts';\n\n@Component({\n selector: 'app',\n templateUrl: 'app.component.html',\n})\n\nexport class Ex10 {\n dataSource = {\n "chart": {\n "caption": "Countries With Most Oil Reserves [2017-18]",\n "subCaption": "In MMbbl = One Million barrels",\n "xAxisName": "Country",\n "yAxisName": "Reserves (MMbbl)",\n "numberSuffix": "K",\n "theme": "fusion",\n },\n "data": [{\n "label": "Venezuela",\n "value": "290"\n }, {\n "label": "Saudi",\n "value": "260"\n }, {\n "label": "Canada",\n "value": "180"\n }, {\n "label": "Iran",\n "value": "140"\n }, {\n "label": "Russia",\n "value": "115"\n }, {\n "label": "UAE",\n "value": "100"\n }, {\n "label": "US",\n "value": "30"\n }, {\n "label": "China",\n "value": "30"\n }]\n };\n\n stackedColumnData = {\n chart: {\n caption: "Yearly Energy Production Rate",\n subCaption: " Top 5 Developed Countries",\n numbersuffix: " TWh",\n showSum: "1",\n plotToolText:\n "$label produces $dataValue of energy from $seriesName",\n theme: "fusion"\n },\n categories: [\n {\n category: [\n {\n label: "Canada"\n },\n {\n label: "China"\n },\n {\n label: "Russia"\n },\n {\n label: "Australia"\n },\n {\n label: "United States"\n },\n {\n label: "France"\n }\n ]\n }\n ],\n dataSet: [\n {\n seriesName: "Coal",\n data: [\n {\n value: "400"\n },\n {\n value: "830"\n },\n {\n value: "500"\n },\n {\n value: "420"\n },\n {\n value: "790"\n },\n {\n value: "380"\n }\n ]\n },\n {\n seriesName: "Hydro",\n data: [\n {\n value: "350"\n },\n {\n value: "620"\n },\n {\n value: "410"\n },\n {\n value: "370"\n },\n {\n value: "720"\n },\n {\n value: "310"\n }\n ]\n },\n {\n seriesName: "Nuclear",\n data: [\n {\n value: "210"\n },\n {\n value: "400"\n },\n {\n value: "450"\n },\n {\n value: "180"\n },\n {\n value: "570"\n },\n {\n value: "270"\n }\n ]\n },\n {\n seriesName: "Gas",\n data: [\n {\n value: "180"\n },\n {\n value: "330"\n },\n {\n value: "230"\n },\n {\n value: "160"\n },\n {\n value: "440"\n },\n {\n value: "350"\n }\n ]\n },\n {\n seriesName: "Oil",\n data: [\n {\n value: "60"\n },\n {\n value: "200"\n },\n {\n value: "200"\n },\n {\n value: "50"\n },\n {\n value: "230"\n },\n {\n value: "150"\n }\n ]\n }\n ]\n }\n\n exportChart(e){ \n FusionCharts.batchExport({\n exportFormat:'pdf'\n })\n }\n\n constructor () {\n }\n\n}\n`,
- template: `\n\n\n\n\n\n\n\n\n\n \n
\n\n\n\n`
+fcDemos['ex10'] = {
+ type: '',
+ title: 'Export multiple charts',
+ description:
+ 'Use Batch Export Feature to export multiple charts as a single image/PDF',
+ module: `// Setup needed in app.module.ts\n\nimport { NgModule, enableProdMode } from '@angular/core'\nimport { AppComponent } from './app.component';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FusionChartsModule } from 'angular-fusioncharts';\n\n// Load FusionCharts\nimport * as FusionCharts from 'fusioncharts';\n// Load Charts module\nimport * as Charts from 'fusioncharts/fusioncharts.charts';\n// Load fusion theme\nimport * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';\n\n// Add dependencies to FusionChartsModule\nFusionChartsModule.fcRoot(FusionCharts, Charts, FusionTheme);\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n FusionChartsModule\n ],\n providers: [\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule {\n}\n`,
+ component: `// in app.component.ts\nimport { Component } from '@angular/core';\nimport * as FusionCharts from 'fusioncharts';\n\n@Component({\n selector: 'app',\n templateUrl: 'app.component.html',\n})\n\nexport class Ex10 {\n dataSource = {\n "chart": {\n "caption": "Countries With Most Oil Reserves [2017-18]",\n "subCaption": "In MMbbl = One Million barrels",\n "xAxisName": "Country",\n "yAxisName": "Reserves (MMbbl)",\n "numberSuffix": "K",\n "theme": "fusion",\n },\n "data": [{\n "label": "Venezuela",\n "value": "290"\n }, {\n "label": "Saudi",\n "value": "260"\n }, {\n "label": "Canada",\n "value": "180"\n }, {\n "label": "Iran",\n "value": "140"\n }, {\n "label": "Russia",\n "value": "115"\n }, {\n "label": "UAE",\n "value": "100"\n }, {\n "label": "US",\n "value": "30"\n }, {\n "label": "China",\n "value": "30"\n }]\n };\n\n stackedColumnData = {\n chart: {\n caption: "Yearly Energy Production Rate",\n subCaption: " Top 5 Developed Countries",\n numbersuffix: " TWh",\n showSum: "1",\n plotToolText:\n "$label produces $dataValue of energy from $seriesName",\n theme: "fusion"\n },\n categories: [\n {\n category: [\n {\n label: "Canada"\n },\n {\n label: "China"\n },\n {\n label: "Russia"\n },\n {\n label: "Australia"\n },\n {\n label: "United States"\n },\n {\n label: "France"\n }\n ]\n }\n ],\n dataSet: [\n {\n seriesName: "Coal",\n data: [\n {\n value: "400"\n },\n {\n value: "830"\n },\n {\n value: "500"\n },\n {\n value: "420"\n },\n {\n value: "790"\n },\n {\n value: "380"\n }\n ]\n },\n {\n seriesName: "Hydro",\n data: [\n {\n value: "350"\n },\n {\n value: "620"\n },\n {\n value: "410"\n },\n {\n value: "370"\n },\n {\n value: "720"\n },\n {\n value: "310"\n }\n ]\n },\n {\n seriesName: "Nuclear",\n data: [\n {\n value: "210"\n },\n {\n value: "400"\n },\n {\n value: "450"\n },\n {\n value: "180"\n },\n {\n value: "570"\n },\n {\n value: "270"\n }\n ]\n },\n {\n seriesName: "Gas",\n data: [\n {\n value: "180"\n },\n {\n value: "330"\n },\n {\n value: "230"\n },\n {\n value: "160"\n },\n {\n value: "440"\n },\n {\n value: "350"\n }\n ]\n },\n {\n seriesName: "Oil",\n data: [\n {\n value: "60"\n },\n {\n value: "200"\n },\n {\n value: "200"\n },\n {\n value: "50"\n },\n {\n value: "230"\n },\n {\n value: "150"\n }\n ]\n }\n ]\n }\n\n exportChart(e){ \n FusionCharts.batchExport({\n exportFormat:'pdf'\n })\n }\n\n constructor () {\n }\n\n}\n`,
+ template: `\n\n\n\n\n\n\n\n\n\n \n
\n\n\n\n`
};
-fcDemos['ex11'] = {
- title: 'Add drill-down to chart',
- description: 'Use LinkedCharts to quickly add drill-down to charts',
- module:`// Setup needed in app.module.ts\n\nimport { NgModule, enableProdMode } from '@angular/core'\nimport { AppComponent } from './app.component';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FusionChartsModule } from 'angular-fusioncharts';\n\n// Load FusionCharts\nimport * as FusionCharts from 'fusioncharts';\n// Load Charts module\nimport * as Charts from 'fusioncharts/fusioncharts.charts';\n// Load fusion theme\nimport * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';\n\n// Add dependencies to FusionChartsModule\nFusionChartsModule.fcRoot(FusionCharts, Charts, FusionTheme);\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n FusionChartsModule\n ],\n providers: [\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule {\n}\n`,
- component: `// In app.component.ts \nimport { Component, NgZone} from '@angular/core';\n\n@Component({\n selector: 'app',\n templateUrl: 'app.component.html'\n})\nexport class AppComponent {\n \n chartInstance: any = {}; \n initialized(e){\n this.chartInstance = e.chart;\n // Configure the drill down chart\n this.chartInstance.configureLink({\n type: "pie2d",\n width: "100%",\n overlayButton: {\n message: 'Back',\n fontColor: '880000',\n bgColor: 'FFEEEE',\n borderColor: '660000'\n }\n });\n }\n \n dataSource = {\n "chart": {\n "caption": "Sales of top 3 juice flavors last year",\n "subcaption": "Click on a column to see details",\n "xaxisname": "Flavor",\n "yaxisname": "Amount (In USD)",\n "numberprefix": "$",\n "theme": "fusion",\n "rotateValues": "0"\n },\n "data": [\n {\n "label": "Apple",\n "value": "810000",\n "link": "newchart-xml-apple"\n },\n {\n "label": "Cranberry",\n "value": "620000",\n "link": "newchart-xml-cranberry"\n },\n {\n "label": "Grape",\n "value": "350000",\n "link": "newchart-xml-grapes"\n }],\n "linkeddata": [\n {\n "id": "apple",\n "linkedchart": {\n "chart": {\n "caption": "Apple Juice - Quarterly Sales",\n "subcaption": "Last year",\n "numberprefix": "$",\n "theme": "fusion",\n "rotateValues": "0",\n "plottooltext": "$label, $dataValue, $percentValue"\n },\n "data": [{\n "label": "Q1",\n "value": "157000"\n }, {\n "label": "Q2",\n "value": "172000"\n }, {\n "label": "Q3",\n "value": "206000"\n }, {\n "label": "Q4",\n "value": "275000"\n }]\n }\n },\n {\n "id": "cranberry",\n "linkedchart": {\n "chart": {\n "caption": "Cranberry Juice - Quarterly Sales",\n "subcaption": "Last year",\n "numberprefix": "$",\n "theme": "fusion",\n "plottooltext": "$label, $dataValue, $percentValue"\n },\n "data": [\n {\n "label": "Q1",\n "value": "102000"\n },\n {\n "label": "Q2",\n "value": "142000"\n },\n {\n "label": "Q3",\n "value": "187000"\n },\n {\n "label": "Q4",\n "value": "189000"\n }]\n }\n },\n {\n "id": "grapes",\n "linkedchart": {\n "chart": {\n "caption": "Grape Juice - Quarterly Sales",\n "subcaption": "Last year",\n "numberprefix": "$",\n "theme": "fusion",\n "rotateValues": "0",\n "plottooltext": "$label, $dataValue, $percentValue"\n },\n "data": [{\n "label": "Q1",\n "value": "45000"\n }, {\n "label": "Q2",\n "value": "72000"\n }, {\n "label": "Q3",\n "value": "95000"\n }, {\n "label": "Q4",\n "value": "108000"\n }]\n }\n }\n ]\n };\n \n constructor(private zone:NgZone){}\n}\n`,
- template: `\n \n\n`
+fcDemos['ex11'] = {
+ type: '',
+ title: 'Add drill-down to chart',
+ description: 'Use LinkedCharts to quickly add drill-down to charts',
+ module: `// Setup needed in app.module.ts\n\nimport { NgModule, enableProdMode } from '@angular/core'\nimport { AppComponent } from './app.component';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FusionChartsModule } from 'angular-fusioncharts';\n\n// Load FusionCharts\nimport * as FusionCharts from 'fusioncharts';\n// Load Charts module\nimport * as Charts from 'fusioncharts/fusioncharts.charts';\n// Load fusion theme\nimport * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';\n\n// Add dependencies to FusionChartsModule\nFusionChartsModule.fcRoot(FusionCharts, Charts, FusionTheme);\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n FusionChartsModule\n ],\n providers: [\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule {\n}\n`,
+ component: `// In app.component.ts \nimport { Component, NgZone} from '@angular/core';\n\n@Component({\n selector: 'app',\n templateUrl: 'app.component.html'\n})\nexport class AppComponent {\n \n chartInstance: any = {}; \n initialized(e){\n this.chartInstance = e.chart;\n // Configure the drill down chart\n this.chartInstance.configureLink({\n type: "pie2d",\n width: "100%",\n overlayButton: {\n message: 'Back',\n fontColor: '880000',\n bgColor: 'FFEEEE',\n borderColor: '660000'\n }\n });\n }\n \n dataSource = {\n "chart": {\n "caption": "Sales of top 3 juice flavors last year",\n "subcaption": "Click on a column to see details",\n "xaxisname": "Flavor",\n "yaxisname": "Amount (In USD)",\n "numberprefix": "$",\n "theme": "fusion",\n "rotateValues": "0"\n },\n "data": [\n {\n "label": "Apple",\n "value": "810000",\n "link": "newchart-xml-apple"\n },\n {\n "label": "Cranberry",\n "value": "620000",\n "link": "newchart-xml-cranberry"\n },\n {\n "label": "Grape",\n "value": "350000",\n "link": "newchart-xml-grapes"\n }],\n "linkeddata": [\n {\n "id": "apple",\n "linkedchart": {\n "chart": {\n "caption": "Apple Juice - Quarterly Sales",\n "subcaption": "Last year",\n "numberprefix": "$",\n "theme": "fusion",\n "rotateValues": "0",\n "plottooltext": "$label, $dataValue, $percentValue"\n },\n "data": [{\n "label": "Q1",\n "value": "157000"\n }, {\n "label": "Q2",\n "value": "172000"\n }, {\n "label": "Q3",\n "value": "206000"\n }, {\n "label": "Q4",\n "value": "275000"\n }]\n }\n },\n {\n "id": "cranberry",\n "linkedchart": {\n "chart": {\n "caption": "Cranberry Juice - Quarterly Sales",\n "subcaption": "Last year",\n "numberprefix": "$",\n "theme": "fusion",\n "plottooltext": "$label, $dataValue, $percentValue"\n },\n "data": [\n {\n "label": "Q1",\n "value": "102000"\n },\n {\n "label": "Q2",\n "value": "142000"\n },\n {\n "label": "Q3",\n "value": "187000"\n },\n {\n "label": "Q4",\n "value": "189000"\n }]\n }\n },\n {\n "id": "grapes",\n "linkedchart": {\n "chart": {\n "caption": "Grape Juice - Quarterly Sales",\n "subcaption": "Last year",\n "numberprefix": "$",\n "theme": "fusion",\n "rotateValues": "0",\n "plottooltext": "$label, $dataValue, $percentValue"\n },\n "data": [{\n "label": "Q1",\n "value": "45000"\n }, {\n "label": "Q2",\n "value": "72000"\n }, {\n "label": "Q3",\n "value": "95000"\n }, {\n "label": "Q4",\n "value": "108000"\n }]\n }\n }\n ]\n };\n \n constructor(private zone:NgZone){}\n}\n`,
+ template: `\n \n\n`
};
-fcDemos['ex12'] = {
- title: 'A simple gauge',
- description: 'A simple gauge to show customer satisfaction score',
- module:`// Setup needed in app.module.ts\n\nimport { NgModule } from '@angular/core'\nimport { AppComponent } from './app.component';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FusionChartsModule } from 'angular-fusioncharts';\n\n// Load FusionCharts\nimport * as FusionCharts from 'fusioncharts';\n\n// Load Widgets\nimport * as Widgets from 'fusioncharts/fusioncharts.widgets';\n\n// Load FusionTheme Theme\nimport * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion'\n\n// Add dependencies to FusionChartsModule\nFusionChartsModule.fcRoot(FusionCharts, Widgets, FusionTheme);\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n FusionChartsModule\n ],\n providers: [\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule {\n\n}\n`,
- component: `// in app.component.ts\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'app',\n templateUrl: 'app.component.html'\n})\nexport class AppComponent {\n dataSource = {\n "chart": {\n "caption": "Nordstorm's Customer Satisfaction Score for 2017",\n "lowerLimit": "0",\n "upperLimit": "100",\n "showValue": "1",\n "numberSuffix": "%",\n "theme": "fusion",\n "showToolTip": "0"\n },\n "colorRange": {\n "color": [{\n "minValue": "0",\n "maxValue": "50",\n "code": "#F2726F"\n }, {\n "minValue": "50",\n "maxValue": "75",\n "code": "#FFC533"\n }, {\n "minValue": "75",\n "maxValue": "100",\n "code": "#62B58F"\n }]\n },\n "dials": {\n "dial": [{\n "value": "81"\n }]\n }\n }\n\n constructor(){}\n\n}\n`,
- template: `\n\n`
+fcDemos['ex12'] = {
+ type: '',
+ title: 'A simple gauge',
+ description: 'A simple gauge to show customer satisfaction score',
+ module: `// Setup needed in app.module.ts\n\nimport { NgModule } from '@angular/core'\nimport { AppComponent } from './app.component';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FusionChartsModule } from 'angular-fusioncharts';\n\n// Load FusionCharts\nimport * as FusionCharts from 'fusioncharts';\n\n// Load Widgets\nimport * as Widgets from 'fusioncharts/fusioncharts.widgets';\n\n// Load FusionTheme Theme\nimport * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion'\n\n// Add dependencies to FusionChartsModule\nFusionChartsModule.fcRoot(FusionCharts, Widgets, FusionTheme);\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n FusionChartsModule\n ],\n providers: [\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule {\n\n}\n`,
+ component: `// in app.component.ts\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'app',\n templateUrl: 'app.component.html'\n})\nexport class AppComponent {\n dataSource = {\n "chart": {\n "caption": "Nordstorm's Customer Satisfaction Score for 2017",\n "lowerLimit": "0",\n "upperLimit": "100",\n "showValue": "1",\n "numberSuffix": "%",\n "theme": "fusion",\n "showToolTip": "0"\n },\n "colorRange": {\n "color": [{\n "minValue": "0",\n "maxValue": "50",\n "code": "#F2726F"\n }, {\n "minValue": "50",\n "maxValue": "75",\n "code": "#FFC533"\n }, {\n "minValue": "75",\n "maxValue": "100",\n "code": "#62B58F"\n }]\n },\n "dials": {\n "dial": [{\n "value": "81"\n }]\n }\n }\n\n constructor(){}\n\n}\n`,
+ template: `\n\n`
};
-fcDemos['ex13'] = {
- title: 'World Map',
- description: 'World map showing data for different continents',
- module: `// Setup needed in app.module.ts\n\nimport { NgModule, enableProdMode } from '@angular/core'\nimport { AppComponent } from './app.component';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FusionChartsModule } from 'angular-fusioncharts';\n\n// Load FusionCharts\nimport * as FusionCharts from 'fusioncharts';\n\n// Load Maps \nimport * as Maps from 'fusioncharts/fusioncharts.maps';\n\n// Load WorldMap definition\nimport * as World from 'fusioncharts/maps/fusioncharts.world';\n\n// Load FusionTheme theme\nimport * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';\n\n// Add dependencies for FusionChartsModule\nFusionChartsModule.fcRoot(FusionCharts, Maps, World, FusionTheme)\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n FusionChartsModule\n ],\n providers: [\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule {\n}\n`,
- component: `// in app.component.ts\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'app',\n templateUrl: 'app.component.html'\n})\n\nexport class AppComponent {\n dataSource = {\n "chart": {\n "caption": "Average Annual Population Growth",\n "subcaption": " 1955-2015",\n "numbersuffix": "%",\n "includevalueinlabels": "1",\n "labelsepchar": ": ",\n "entityFillHoverColor": "#FFF9C4",\n "theme": "fusion"\n },\n "colorrange": {\n "minvalue": "0",\n "code": "#FFE0B2",\n "gradient": "1",\n "color": [\n \n {\n "minvalue": "0.5",\n "maxvalue": "1.0",\n "color": "#FFD74D"\n },\n {\n "minvalue": "1.0",\n "maxvalue": "2.0",\n "color": "#FB8C00"\n },\n {\n "minvalue": "2.0",\n "maxvalue": "3.0",\n "color": "#E65100"\n }\n ]\n },\n "data": [{\n "id": "NA",\n "value": ".82",\n "showLabel": "1"\n \n },\n {\n "id": "SA",\n "value": "2.04",\n "showLabel": "1"\n },\n {\n "id": "AS",\n "value": "1.78",\n "showLabel": "1"\n \n },\n {\n "id": "EU",\n "value": ".40",\n "showLabel": "1"\n },\n {\n "id": "AF",\n "value": "2.58",\n "showLabel": "1"\n },\n {\n "id": "AU",\n "value": "1.30",\n "showLabel": "1"\n }\n ]\n }\n constructor(){}\n}\n`,
- template: `\n\n`
+fcDemos['ex13'] = {
+ type: '',
+ title: 'World Map',
+ description: 'World map showing data for different continents',
+ module: `// Setup needed in app.module.ts\n\nimport { NgModule, enableProdMode } from '@angular/core'\nimport { AppComponent } from './app.component';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FusionChartsModule } from 'angular-fusioncharts';\n\n// Load FusionCharts\nimport * as FusionCharts from 'fusioncharts';\n\n// Load Maps \nimport * as Maps from 'fusioncharts/fusioncharts.maps';\n\n// Load WorldMap definition\nimport * as World from 'fusioncharts/maps/fusioncharts.world';\n\n// Load FusionTheme theme\nimport * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';\n\n// Add dependencies for FusionChartsModule\nFusionChartsModule.fcRoot(FusionCharts, Maps, World, FusionTheme)\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n FusionChartsModule\n ],\n providers: [\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule {\n}\n`,
+ component: `// in app.component.ts\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'app',\n templateUrl: 'app.component.html'\n})\n\nexport class AppComponent {\n dataSource = {\n "chart": {\n "caption": "Average Annual Population Growth",\n "subcaption": " 1955-2015",\n "numbersuffix": "%",\n "includevalueinlabels": "1",\n "labelsepchar": ": ",\n "entityFillHoverColor": "#FFF9C4",\n "theme": "fusion"\n },\n "colorrange": {\n "minvalue": "0",\n "code": "#FFE0B2",\n "gradient": "1",\n "color": [\n \n {\n "minvalue": "0.5",\n "maxvalue": "1.0",\n "color": "#FFD74D"\n },\n {\n "minvalue": "1.0",\n "maxvalue": "2.0",\n "color": "#FB8C00"\n },\n {\n "minvalue": "2.0",\n "maxvalue": "3.0",\n "color": "#E65100"\n }\n ]\n },\n "data": [{\n "id": "NA",\n "value": ".82",\n "showLabel": "1"\n \n },\n {\n "id": "SA",\n "value": "2.04",\n "showLabel": "1"\n },\n {\n "id": "AS",\n "value": "1.78",\n "showLabel": "1"\n \n },\n {\n "id": "EU",\n "value": ".40",\n "showLabel": "1"\n },\n {\n "id": "AF",\n "value": "2.58",\n "showLabel": "1"\n },\n {\n "id": "AU",\n "value": "1.30",\n "showLabel": "1"\n }\n ]\n }\n constructor(){}\n}\n`,
+ template: `\n\n`
};
-fcDemos['ex14'] = {
- title: 'Applying a different theme',
- description: 'Choosing from different themes available in FusionCharts Suite',
- module: `// Setup needed in app.module.ts\n\nimport { NgModule, enableProdMode } from '@angular/core'\nimport { AppComponent } from './app.component';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FusionChartsModule } from 'angular-fusioncharts';\n\n// Load FusionCharts\nimport * as FusionCharts from 'fusioncharts';\n\n// Load column2d module\nimport * as Charts from 'fusioncharts/fusioncharts.charts';\n\n// Load the theme file \nimport * as Gammel from 'fusioncharts/themes/fusioncharts.theme.gammel'\n\n// Add the dependencies in FusionChartsModule\nFusionChartsModule.fcRoot(FusionCharts, Charts, Gammel);\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n FusionChartsModule\n ],\n providers: [\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule {\n}\n`,
- component: `// in app.component.ts\nimport { Component} from '@angular/core';\n\n@Component({\n selector: 'app',\n templateUrl: 'app.component.html'\n})\nexport class AppComponent {\n dataSource = {\n "chart": {\n "caption": "Countries With Most Oil Reserves [2017-18]",\n "subCaption": "In MMbbl = One Million barrels",\n "xAxisName": "Country",\n "yAxisName": "Reserves (MMbbl)",\n "numberSuffix": "K",\n "theme": "gammel" // <-- Add theme type here in chart attribute\n },\n "data": [\n {\n "label": "Venezuela",\n "value": "290"\n },\n {\n "label": "Saudi",\n "value": "260"\n },\n {\n "label": "Canada",\n "value": "180"\n },\n {\n "label": "Iran",\n "value": "140"\n },\n {\n "label": "Russia",\n "value": "115"\n },\n {\n "label": "UAE",\n "value": "100"\n },\n {\n "label": "US",\n "value": "30"\n },\n {\n "label": "China",\n "value": "30"\n }\n ]\n };\n constructor(){}\n}\n`,
- template: `\n`
+fcDemos['ex14'] = {
+ type: '',
+ title: 'Applying a different theme',
+ description: 'Choosing from different themes available in FusionCharts Suite',
+ module: `// Setup needed in app.module.ts\n\nimport { NgModule, enableProdMode } from '@angular/core'\nimport { AppComponent } from './app.component';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FusionChartsModule } from 'angular-fusioncharts';\n\n// Load FusionCharts\nimport * as FusionCharts from 'fusioncharts';\n\n// Load column2d module\nimport * as Charts from 'fusioncharts/fusioncharts.charts';\n\n// Load the theme file \nimport * as Gammel from 'fusioncharts/themes/fusioncharts.theme.gammel'\n\n// Add the dependencies in FusionChartsModule\nFusionChartsModule.fcRoot(FusionCharts, Charts, Gammel);\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n FusionChartsModule\n ],\n providers: [\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule {\n}\n`,
+ component: `// in app.component.ts\nimport { Component} from '@angular/core';\n\n@Component({\n selector: 'app',\n templateUrl: 'app.component.html'\n})\nexport class AppComponent {\n dataSource = {\n "chart": {\n "caption": "Countries With Most Oil Reserves [2017-18]",\n "subCaption": "In MMbbl = One Million barrels",\n "xAxisName": "Country",\n "yAxisName": "Reserves (MMbbl)",\n "numberSuffix": "K",\n "theme": "gammel" // <-- Add theme type here in chart attribute\n },\n "data": [\n {\n "label": "Venezuela",\n "value": "290"\n },\n {\n "label": "Saudi",\n "value": "260"\n },\n {\n "label": "Canada",\n "value": "180"\n },\n {\n "label": "Iran",\n "value": "140"\n },\n {\n "label": "Russia",\n "value": "115"\n },\n {\n "label": "UAE",\n "value": "100"\n },\n {\n "label": "US",\n "value": "30"\n },\n {\n "label": "China",\n "value": "30"\n }\n ]\n };\n constructor(){}\n}\n`,
+ template: `\n`
};
-fcDemos['ex15'] = {
- title: 'Render Alert',
- description: 'Show a message that the chart is rendered on the ‘rendered’ event',
- module: `// Setup needed in app.module.ts\n\nimport { NgModule, enableProdMode } from '@angular/core'\nimport { AppComponent } from './app.component';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FusionChartsModule } from 'angular-fusioncharts';\n\n// Load FusionCharts\nimport * as FusionCharts from 'fusioncharts';\n// Load Charts module\nimport * as Charts from 'fusioncharts/fusioncharts.charts';\n// Load fusion theme\nimport * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';\n\n// Add dependencies to FusionChartsModule\nFusionChartsModule.fcRoot(FusionCharts, Charts, FusionTheme);\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n FusionChartsModule\n ],\n providers: [\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule {\n}\n`,
- component: `// in app.component.ts\nimport { Component, NgZone} from '@angular/core';\n@Component({\n selector: 'app',\n templateUrl: 'app.component.html'\n})\nexport class AppComponent {\n dataSource: any;\n message: any;\n constructor(private zone:NgZone){\n this.dataSource = {\n "chart": {\n "caption": "Countries With Most Oil Reserves [2017-18]",\n "subCaption": "In MMbbl = One Million barrels",\n "xAxisName": "Country",\n "yAxisName": "Reserves (MMbbl)",\n "numberSuffix": "K",\n "theme": "fusion",\n },\n "data": [{\n "label": "Venezuela",\n "value": "290"\n }, {\n "label": "Saudi",\n "value": "260"\n }, {\n "label": "Canada",\n "value": "180"\n }, {\n "label": "Iran",\n "value": "140"\n }, {\n "label": "Russia",\n "value": "115"\n }, {\n "label": "UAE",\n "value": "100"\n }, {\n "label": "US",\n "value": "30"\n }, {\n "label": "China",\n "value": "30"\n }]\n };\n }\n\n chartRender($event){\n this.zone.run(() => {\n this.message = 'Chart has completed rendering.';\n })\n }\n\n}\n`,
- template: `\n\n
\n
\n
\n \n {{message || 'You will see a notification here after chart completes rendering.'}}
\n \n
\n
\n
\n
\n
\n \n {{message || 'You will see a notification here after chart completes rendering.'}}
\n \n
\n
$seriesName: $dataValue"\n },\n "categories": [{\n "category": [{\n "label": "2014",\n "fontItalic": "0"\n }, {\n "label": "2015",\n "fontItalic": "0"\n }, {\n "label": "2016",\n "fontItalic": "0"\n }, {\n "label": "2017 (Projected)"\n }, {\n "label": "2018 (Projected)"\n }]\n }],\n "dataset": [{\n "seriesname": "Android Devices",\n "data": [{\n "value": "73",\n "alpha": "100",\n "allowDrag": "0"\n }, {\n "value": "80",\n "alpha": "100",\n "allowDrag": "0"\n }, {\n "value": "97",\n "alpha": "100",\n "allowDrag": "0"\n }, {\n "value": "110",\n "toolText": "$label
$seriesName: $dataValue"\n }, {\n "value": "180",\n "toolText": "$label
$seriesName: $dataValue"\n }]\n }, {\n "seriesname": "iOS Devices",\n "data": [{\n "value": "63.2",\n "alpha": "100",\n "allowDrag": "0"\n }, {\n "value": "68",\n "alpha": "100",\n "allowDrag": "0"\n }, {\n "value": "82",\n "alpha": "100",\n "allowDrag": "0"\n }, {\n "value": "99",\n "toolText": "$label
$seriesName: $dataValue"\n }, {\n "value": "150",\n "toolText": "$label
$seriesName: $dataValue"\n }]\n }]\n };\n\n this.message = "Drag any column for years 2017 or 2018 to see updated value along with the label";\n }\n\n dragStart($event){\n let dataObj = $event.dataObj;\n this.datasetname = dataObj.datasetName;\n this.startvalue = dataObj.startValue;\n }\n\n dragEnd($event){\n let dataObj = $event.dataObj;\n this.finalvalue = dataObj.endValue;\n let label = this.dataSource.categories[0].category[dataObj.dataIndex].label;\n this.zone.run(() => {\n this.message = this.getMessage(this.datasetname, this.startvalue.toFixed(2), this.finalvalue.toFixed(2), label);\n })\n }\n}\n`,
- template: `\n\n\n{{message}}
\n`
+fcDemos['ex16'] = {
+ type: '',
+ title: 'Special Events',
+ description: 'Drag a column to see its change',
+ module: `// Setup needed in app.module.ts\n\nimport { NgModule, enableProdMode } from '@angular/core'\nimport { AppComponent } from './app.component';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FusionChartsModule } from 'angular-fusioncharts';\n\n// Load FusionCharts\nimport * as FusionCharts from 'fusioncharts';\n// Load PowerCharts module\nimport * as Powercharts from 'fusioncharts/fusioncharts.powercharts';\n// Load fusion theme\nimport * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';\n\n// Add dependencies to FusionChartsModule\nFusionChartsModule.fcRoot(FusionCharts, Powercharts, FusionTheme);\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n FusionChartsModule\n ],\n providers: [\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule {\n}\n`,
+ component: `// In app.component.ts\nimport {\n Component,\n NgZone\n} from '@angular/core';\n\n@Component({\n selector: 'app',\n templateUrl: './app.component.html'\n})\nexport class AppComponent {\n dataSource: any;\n datasetname: any;\n startvalue: any;\n finalvalue: any;\n message: any;\n\n // Format message\n getMessage(datasetname, startvalue, finalvalue, label){\n return \`\${datasetname} dataset, its previous value was \${startvalue} and its current value is \${finalvalue} for year \${label} \`;\n }\n\n constructor(private zone: NgZone) {\n this.dataSource = {\n "chart": {\n "caption": "Android and iOS Devices Sales Projections",\n "subCaption": "Drag the top of columns to adjust projections for 2017 & 2018",\n "numberPrefix": "$",\n "numberSuffix": "M",\n "yaxismaxvalue": "200",\n "theme": "fusion",\n "plotToolText": "$label
$seriesName: $dataValue"\n },\n "categories": [{\n "category": [{\n "label": "2014",\n "fontItalic": "0"\n }, {\n "label": "2015",\n "fontItalic": "0"\n }, {\n "label": "2016",\n "fontItalic": "0"\n }, {\n "label": "2017 (Projected)"\n }, {\n "label": "2018 (Projected)"\n }]\n }],\n "dataset": [{\n "seriesname": "Android Devices",\n "data": [{\n "value": "73",\n "alpha": "100",\n "allowDrag": "0"\n }, {\n "value": "80",\n "alpha": "100",\n "allowDrag": "0"\n }, {\n "value": "97",\n "alpha": "100",\n "allowDrag": "0"\n }, {\n "value": "110",\n "toolText": "$label
$seriesName: $dataValue"\n }, {\n "value": "180",\n "toolText": "$label
$seriesName: $dataValue"\n }]\n }, {\n "seriesname": "iOS Devices",\n "data": [{\n "value": "63.2",\n "alpha": "100",\n "allowDrag": "0"\n }, {\n "value": "68",\n "alpha": "100",\n "allowDrag": "0"\n }, {\n "value": "82",\n "alpha": "100",\n "allowDrag": "0"\n }, {\n "value": "99",\n "toolText": "$label
$seriesName: $dataValue"\n }, {\n "value": "150",\n "toolText": "$label
$seriesName: $dataValue"\n }]\n }]\n };\n\n this.message = "Drag any column for years 2017 or 2018 to see updated value along with the label";\n }\n\n dragStart($event){\n let dataObj = $event.dataObj;\n this.datasetname = dataObj.datasetName;\n this.startvalue = dataObj.startValue;\n }\n\n dragEnd($event){\n let dataObj = $event.dataObj;\n this.finalvalue = dataObj.endValue;\n let label = this.dataSource.categories[0].category[dataObj.dataIndex].label;\n this.zone.run(() => {\n this.message = this.getMessage(this.datasetname, this.startvalue.toFixed(2), this.finalvalue.toFixed(2), label);\n })\n }\n}\n`,
+ template: `\n\n\n{{message}}
\n`
};
-
-fcDemos['ex17'] = {
- title: 'Dynamically add chart event listener',
- description: 'How you can dynamically(runtime) add & remove chart specific events in FusionCharts',
- module: `// Setup needed in app.module.ts\n\nimport { NgModule, enableProdMode } from '@angular/core'\nimport { AppComponent } from './app.component';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FusionChartsModule } from 'angular-fusioncharts';\n\n// Load FusionCharts\nimport * as FusionCharts from 'fusioncharts';\n// Load Charts module\nimport * as Charts from 'fusioncharts/fusioncharts.charts';\n// Load fusion theme\nimport * as FusionTheme from 'fusioncharts/themes/es/fusioncharts.theme.fusion'\n\n// Add dependencies to FusionChartsModule\nFusionChartsModule.fcRoot(FusionCharts, Charts, FusionTheme)\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n FusionChartsModule\n ],\n providers: [\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule {\n}\n`,
- component: `// In app.component.ts\nimport {\n Component,\n NgZone\n} from '@angular/core';\n\n\n@Component({\n selector: 'app',\n templateUrl: './app.component.html',\n})\nexport class AppComponent{\n dataSource: any;\n message: string;\n chartObj: any;\n handler:any;\n initMessage:any;\n iMsg:string;\n clickPlotMsg:string;\n attached: boolean;\n constructor(private zone: NgZone) {\n this.iMsg = 'Click on Track Data Plot Clicks button to listen to dataplotclick event';\n this.initMessage = this.iMsg;\n this.clickPlotMsg = 'Click on the plot to see the value along with the label';\n this.message = this.clickPlotMsg;\n this.attached = false;\n this.dataSource = {\n "chart": {\n "caption": "Countries With Most Oil Reserves [2017-18]",\n "subCaption": "In MMbbl = One Million barrels",\n "xAxisName": "Country",\n "yAxisName": "Reserves (MMbbl)",\n "numberSuffix": "K",\n "theme": "fusion"\n },\n "data": [\n {\n "label": "Venezuela",\n "value": "290"\n },\n {\n "label": "Saudi",\n "value": "260"\n },\n {\n "label": "Canada",\n "value": "180"\n },\n {\n "label": "Iran",\n "value": "140"\n },\n {\n "label": "Russia",\n "value": "115"\n },\n {\n "label": "UAE",\n "value": "100"\n },\n {\n "label": "US",\n "value": "30"\n },\n {\n "label": "China",\n "value": "30"\n }\n ]\n };\n }\n\n getMessage(dataObj){\n return \`You have clicked on plot \${dataObj.categoryLabel} which has a value of \${dataObj.displayValue}\`\n }\n\n dataplotClickHandler(eventObj, dataObj){\n this.zone.run(() => {\n this.message = this.getMessage(dataObj);\n });\n }\n\n initialized($event){\n this.chartObj = $event.chart;\n }\n\n attachEvent(){\n this.handler = this.dataplotClickHandler.bind(this);\n this.initMessage = '';\n this.message = this.clickPlotMsg;\n this.attached = true;\n this.chartObj.addEventListener('dataplotClick',this.handler);\n }\n\n removeEvent(){\n this.initMessage = this.iMsg;\n this.message = this.clickPlotMsg;\n this.attached = false;\n this.chartObj.removeEventListener('dataplotClick', this.handler);\n }\n}\n`,
- template: `\n\n\n\n
\n
\n
\n \n\n \n \n \n \n
\n \n
\n
\n
\n
\n
\n \n\n \n \n \n \n
\n \n
\n
\n Slice out Microsoft\n Reset\n
`
+fcDemos['ex19'] = {
+ type: '',
+ title: 'Slice data plots',
+ description:
+ 'Click the button to slice out Microsoft from the rest of the plots.',
+ module: `// Setup needed in app.module.ts\n\nimport { NgModule, enableProdMode } from '@angular/core'\nimport { AppComponent } from './app.component';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FusionChartsModule } from 'angular-fusioncharts';\n\n// Load FusionCharts\nimport * as FusionCharts from 'fusioncharts';\n// Load Charts module\nimport * as Charts from 'fusioncharts/fusioncharts.charts';\n// Load themes\nimport * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';\n\n// Add dependencies to FusionChartsModule\nFusionChartsModule.fcRoot(\n FusionCharts,\n Charts,\n FusionTheme\n)\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n FusionChartsModule\n ],\n providers: [\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule {\n}\n`,
+ component: `// in app.component.ts\nimport {\n Component,\n NgZone\n} from '@angular/core';\n\n\n@Component({\n selector: 'app',\n templateUrl: './app.component.html'\n})\nexport class AppComponent {\n dataSource: any;\n chartObj: any;\n constructor(private zone: NgZone) {\n this.dataSource = {\n "chart": {\n "caption": "Market Share of Web Servers",\n "plottooltext": "$percentValue of web servers run on $label servers",\n "showLegend": "1",\n "showPercentValues": "1",\n "legendPosition": "bottom",\n "useDataPlotColorForLabels": "1",\n "theme": "fusion",\n },\n "data": [{\n "label": "Apache",\n "value": "32647479"\n }, {\n "label": "Microsoft",\n "value": "22100932"\n }, {\n "label": "Zeus",\n "value": "14376"\n }, {\n "label": "Other",\n "value": "18674221"\n }]\n };\n }\n\n initialized($event){\n this.chartObj = $event.chart;\n }\n\n sliceOut(){\n this.chartObj.slicePlotItem(1, true);\n }\n\n reset(){\n this.chartObj.slicePlotItem(1, false);\n }\n}\n`,
+ template: `\n\n\n\n\n\n\n Slice out Microsoft\n Reset\n
`
};
-fcDemos['ex20'] = {
- title: 'Responsive charts',
- description: 'Select any of the dimensions given in the list. The chart adjusts itself to its alloted percentage',
- module: `// Setup needed in app.module.ts\n\nimport { NgModule, enableProdMode } from '@angular/core'\nimport { AppComponent } from './app.component';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FusionChartsModule } from 'angular-fusioncharts';\n\n// Load FusionCharts\nimport * as FusionCharts from 'fusioncharts';\n// Load Charts module\nimport * as Charts from 'fusioncharts/fusioncharts.charts';\n// Load themes\nimport * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';\n\n// Add dependencies to FusionChartsModule\nFusionChartsModule.fcRoot(\n FusionCharts,\n Charts,\n FusionTheme\n)\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n FusionChartsModule\n ],\n providers: [\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule {\n}\n`,
- component: `// in app.component.ts\nimport {\n Component,\n NgZone\n} from '@angular/core';\n\n\n@Component({\n selector: 'app',\n templateUrl: './app.component.html'\n})\nexport class AppComponent {\n dataSource: any;\n chartObj: any;\n size: string = "secondSize";\n allSizes = {\n firstSize: { width : '400px', height: '200px'},\n secondSize: { width: '600px', height: '350px' },\n thirdSize: { width: '700px', height: '400px' }\n }\n styleObj: object;\n \n constructor(private zone: NgZone) {\n this.dataSource = {\n "chart": {\n "caption": "Countries With Most Oil Reserves [2017-18]",\n "subCaption": "In MMbbl = One Million barrels",\n "xAxisName": "Country",\n "yAxisName": "Reserves (MMbbl)",\n "numberSuffix": "K",\n "theme": "fusion"\n },\n "data": [\n {\n "label": "Venezuela",\n "value": "290"\n },\n {\n "label": "Saudi",\n "value": "260"\n },\n {\n "label": "Canada",\n "value": "180"\n },\n {\n "label": "Iran",\n "value": "140"\n },\n {\n "label": "Russia",\n "value": "115"\n },\n {\n "label": "UAE",\n "value": "100"\n },\n {\n "label": "US",\n "value": "30"\n },\n {\n "label": "China",\n "value": "30"\n }\n ]\n };\n\n this.styleObj = this.allSizes[this.size];\n }\n\n getStyle(){\n return this.styleObj;\n }\n\n initialized($event){\n this.chartObj = $event.chart;\n }\n onSelectionChange(size){\n this.size = size;\n this.styleObj = this.allSizes[this.size];\n }\n}\n`,
- template: `\n\n\n\n \n \n
\n`
+fcDemos['ex20'] = {
+ type: '',
+ title: 'Responsive charts',
+ description:
+ 'Select any of the dimensions given in the list. The chart adjusts itself to its alloted percentage',
+ module: `// Setup needed in app.module.ts\n\nimport { NgModule, enableProdMode } from '@angular/core'\nimport { AppComponent } from './app.component';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FusionChartsModule } from 'angular-fusioncharts';\n\n// Load FusionCharts\nimport * as FusionCharts from 'fusioncharts';\n// Load Charts module\nimport * as Charts from 'fusioncharts/fusioncharts.charts';\n// Load themes\nimport * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';\n\n// Add dependencies to FusionChartsModule\nFusionChartsModule.fcRoot(\n FusionCharts,\n Charts,\n FusionTheme\n)\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n FusionChartsModule\n ],\n providers: [\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule {\n}\n`,
+ component: `// in app.component.ts\nimport {\n Component,\n NgZone\n} from '@angular/core';\n\n\n@Component({\n selector: 'app',\n templateUrl: './app.component.html'\n})\nexport class AppComponent {\n dataSource: any;\n chartObj: any;\n size: string = "secondSize";\n allSizes = {\n firstSize: { width : '400px', height: '200px'},\n secondSize: { width: '600px', height: '350px' },\n thirdSize: { width: '700px', height: '400px' }\n }\n styleObj: object;\n \n constructor(private zone: NgZone) {\n this.dataSource = {\n "chart": {\n "caption": "Countries With Most Oil Reserves [2017-18]",\n "subCaption": "In MMbbl = One Million barrels",\n "xAxisName": "Country",\n "yAxisName": "Reserves (MMbbl)",\n "numberSuffix": "K",\n "theme": "fusion"\n },\n "data": [\n {\n "label": "Venezuela",\n "value": "290"\n },\n {\n "label": "Saudi",\n "value": "260"\n },\n {\n "label": "Canada",\n "value": "180"\n },\n {\n "label": "Iran",\n "value": "140"\n },\n {\n "label": "Russia",\n "value": "115"\n },\n {\n "label": "UAE",\n "value": "100"\n },\n {\n "label": "US",\n "value": "30"\n },\n {\n "label": "China",\n "value": "30"\n }\n ]\n };\n\n this.styleObj = this.allSizes[this.size];\n }\n\n getStyle(){\n return this.styleObj;\n }\n\n initialized($event){\n this.chartObj = $event.chart;\n }\n onSelectionChange(size){\n this.size = size;\n this.styleObj = this.allSizes[this.size];\n }\n}\n`,
+ template: `\n\n\n\n \n \n
\n`
};
-fcDemos['ex21'] = {
- title: 'Change chart type at runtime',
- description: 'Change the chart type dynamically or at runtime',
- module: `// Setup needed in app.module.ts\n\nimport { NgModule, enableProdMode } from '@angular/core'\nimport { AppComponent } from './app.component';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FusionChartsModule } from 'angular-fusioncharts';\n\n// Load FusionCharts\nimport * as FusionCharts from 'fusioncharts';\n// Load Charts module\nimport * as Charts from 'fusioncharts/fusioncharts.charts';\n// Load themes\nimport * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';\n\n// Add dependencies to FusionChartsModule\nFusionChartsModule.fcRoot(\n FusionCharts,\n Charts,\n FusionTheme\n)\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n FusionChartsModule\n ],\n providers: [\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule {\n}\n`,
- component: `// In app.component.ts\nimport {\n Component,\n NgZone\n} from '@angular/core';\n\n\n@Component({\n selector: 'app',\n templateUrl: './app.component.html'\n})\nexport class AppComponent {\n dataSource: any;\n chartObj:any;\n chart: any = 'column2d';\n\n constructor(private zone: NgZone) {\n this.dataSource = {\n "chart": {\n "caption": "Recommended Portfolio Split",\n "subCaption" : "For a net-worth of $1M",\n "showValues":"1",\n "showPercentInTooltip" : "0",\n "numberPrefix" : "$",\n "enableMultiSlicing":"1",\n "theme": "fusion"\n },\n "data": [\n {\n "label": "Equity",\n "value": "300000"\n }, {\n "label": "Debt",\n "value": "230000"\n }, {\n "label": "Bullion",\n "value": "180000"\n }, {\n "label": "Real-estate",\n "value": "270000"\n }, {\n "label": "Insurance",\n "value": "20000"\n }\n ]\n };\n }\n\n initialized($event){\n this.chartObj = $event.chart; // saving chart instance\n }\n \n onSelectionChange(chart){\n this.chart = chart;\n this.chartObj.chartType(chart); // Changing chart type using chart instance\n }\n}\n`,
- template: `\n\n\n`
+fcDemos['ex21'] = {
+ type: '',
+ title: 'Change chart type at runtime',
+ description: 'Change the chart type dynamically or at runtime',
+ module: `// Setup needed in app.module.ts\n\nimport { NgModule, enableProdMode } from '@angular/core'\nimport { AppComponent } from './app.component';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FusionChartsModule } from 'angular-fusioncharts';\n\n// Load FusionCharts\nimport * as FusionCharts from 'fusioncharts';\n// Load Charts module\nimport * as Charts from 'fusioncharts/fusioncharts.charts';\n// Load themes\nimport * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';\n\n// Add dependencies to FusionChartsModule\nFusionChartsModule.fcRoot(\n FusionCharts,\n Charts,\n FusionTheme\n)\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n FusionChartsModule\n ],\n providers: [\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule {\n}\n`,
+ component: `// In app.component.ts\nimport {\n Component,\n NgZone\n} from '@angular/core';\n\n\n@Component({\n selector: 'app',\n templateUrl: './app.component.html'\n})\nexport class AppComponent {\n dataSource: any;\n chartObj:any;\n chart: any = 'column2d';\n\n constructor(private zone: NgZone) {\n this.dataSource = {\n "chart": {\n "caption": "Recommended Portfolio Split",\n "subCaption" : "For a net-worth of $1M",\n "showValues":"1",\n "showPercentInTooltip" : "0",\n "numberPrefix" : "$",\n "enableMultiSlicing":"1",\n "theme": "fusion"\n },\n "data": [\n {\n "label": "Equity",\n "value": "300000"\n }, {\n "label": "Debt",\n "value": "230000"\n }, {\n "label": "Bullion",\n "value": "180000"\n }, {\n "label": "Real-estate",\n "value": "270000"\n }, {\n "label": "Insurance",\n "value": "20000"\n }\n ]\n };\n }\n\n initialized($event){\n this.chartObj = $event.chart; // saving chart instance\n }\n \n onSelectionChange(chart){\n this.chart = chart;\n this.chartObj.chartType(chart); // Changing chart type using chart instance\n }\n}\n`,
+ template: `\n\n\n`
};
-fcDemos['ex22'] = {
- title: 'Use annotations',
- description: 'Add custom shapes to highlight a specific data point',
- module: `// Setup needed in app.module.ts\n\nimport { NgModule, enableProdMode } from '@angular/core'\nimport { AppComponent } from './app.component';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FusionChartsModule } from 'angular-fusioncharts';\n\n// Load FusionCharts\nimport * as FusionCharts from 'fusioncharts';\n// Load Charts module\nimport * as Charts from 'fusioncharts/fusioncharts.charts';\n// Load themes\nimport * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';\n\n// Add dependencies to FusionChartsModule\nFusionChartsModule.fcRoot(\n FusionCharts,\n Charts,\n FusionTheme\n)\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n FusionChartsModule\n ],\n providers: [\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule {\n}\n`,
- component: `// In app.component.ts \nimport {\n Component,\n NgZone\n} from '@angular/core';\n\n\n@Component({\n selector: 'app',\n templateUrl: './app.component.html'\n})\nexport class AppComponent {\n dataSource: any;\n constructor(private zone: NgZone) {\n this.dataSource = {\n "chart": {\n "caption": "Bakersfield Central - Total footfalls",\n "subCaption": "Last week",\n "xAxisName": "Day",\n "yAxisName": "No. of Visitors (In 1000s)",\n "showValues": "0",\n "theme": "fusion"\n },\n "annotations": {\n "groups": [{\n "id": "anchor-highlight",\n "items": [{\n "id": "high-star",\n "type": "circle",\n "x": "$dataset.0.set.2.x",\n "y": "$dataset.0.set.2.y",\n "radius": "12",\n "color": "#6baa01",\n "border": "2",\n "borderColor": "#f8bd19"\n },\n {\n "id": "label",\n "type": "text",\n "text": "Highest footfall 25.5K",\n "fillcolor": "#6baa01",\n "rotate": "90",\n "x": "$dataset.0.set.2.x+75",\n "y": "$dataset.0.set.2.y-2"\n }\n ]\n }]\n },\n "data": [{\n "label": "Mon",\n "value": "15123"\n },\n {\n "label": "Tue",\n "value": "14233"\n },\n {\n "label": "Wed",\n "value": "25507"\n },\n {\n "label": "Thu",\n "value": "9110"\n },\n {\n "label": "Fri",\n "value": "15529"\n },\n {\n "label": "Sat",\n "value": "20803"\n },\n {\n "label": "Sun",\n "value": "19202"\n }\n ]\n }\n\n }\n\n}`,
- template: `\n\n\n\n\n `
+fcDemos['ex22'] = {
+ type: '',
+ title: 'Use annotations',
+ description: 'Add custom shapes to highlight a specific data point',
+ module: `// Setup needed in app.module.ts\n\nimport { NgModule, enableProdMode } from '@angular/core'\nimport { AppComponent } from './app.component';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FusionChartsModule } from 'angular-fusioncharts';\n\n// Load FusionCharts\nimport * as FusionCharts from 'fusioncharts';\n// Load Charts module\nimport * as Charts from 'fusioncharts/fusioncharts.charts';\n// Load themes\nimport * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';\n\n// Add dependencies to FusionChartsModule\nFusionChartsModule.fcRoot(\n FusionCharts,\n Charts,\n FusionTheme\n)\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n FusionChartsModule\n ],\n providers: [\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule {\n}\n`,
+ component: `// In app.component.ts \nimport {\n Component,\n NgZone\n} from '@angular/core';\n\n\n@Component({\n selector: 'app',\n templateUrl: './app.component.html'\n})\nexport class AppComponent {\n dataSource: any;\n constructor(private zone: NgZone) {\n this.dataSource = {\n "chart": {\n "caption": "Bakersfield Central - Total footfalls",\n "subCaption": "Last week",\n "xAxisName": "Day",\n "yAxisName": "No. of Visitors (In 1000s)",\n "showValues": "0",\n "theme": "fusion"\n },\n "annotations": {\n "groups": [{\n "id": "anchor-highlight",\n "items": [{\n "id": "high-star",\n "type": "circle",\n "x": "$dataset.0.set.2.x",\n "y": "$dataset.0.set.2.y",\n "radius": "12",\n "color": "#6baa01",\n "border": "2",\n "borderColor": "#f8bd19"\n },\n {\n "id": "label",\n "type": "text",\n "text": "Highest footfall 25.5K",\n "fillcolor": "#6baa01",\n "rotate": "90",\n "x": "$dataset.0.set.2.x+75",\n "y": "$dataset.0.set.2.y-2"\n }\n ]\n }]\n },\n "data": [{\n "label": "Mon",\n "value": "15123"\n },\n {\n "label": "Tue",\n "value": "14233"\n },\n {\n "label": "Wed",\n "value": "25507"\n },\n {\n "label": "Thu",\n "value": "9110"\n },\n {\n "label": "Fri",\n "value": "15529"\n },\n {\n "label": "Sat",\n "value": "20803"\n },\n {\n "label": "Sun",\n "value": "19202"\n }\n ]\n }\n\n }\n\n}`,
+ template: `\n\n\n\n\n `
};
fcDemos['ex23'] = {
- title: 'Lifecycle events',
- description: 'This sample lists the basic lifecycle events at the time of rendering FusionCharts',
- module: `// Setup needed in app.module.ts\n\nimport { NgModule, enableProdMode } from '@angular/core'\nimport { AppComponent } from './app.component';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FusionChartsModule } from 'angular-fusioncharts';\n\n// Load FusionCharts\nimport * as FusionCharts from 'fusioncharts';\n// Load Charts module\nimport * as Charts from 'fusioncharts/fusioncharts.charts';\n// Load themes\nimport * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';\n\n// Add dependencies to FusionChartsModule\nFusionChartsModule.fcRoot(\n FusionCharts,\n Charts,\n FusionTheme\n)\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n FusionChartsModule\n ],\n providers: [\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule {\n}\n`,
- component:`// In app.component.ts\n\nimport {\n Component,\n NgZone\n} from '@angular/core';\n\n\n@Component({\n selector: 'app',\n templateUrl: './app.component.html'\n})\nexport class AppComponent {\n dataSource: any;\n message = 'You will see notifications here for the chart lifecycle events';\n constructor(private zone: NgZone) {\n this.dataSource = {\n "chart": {\n "caption": "Countries With Most Oil Reserves [2017-18]",\n "subCaption": "In MMbbl = One Million barrels",\n "xAxisName": "Country",\n "yAxisName": "Reserves (MMbbl)",\n "numberSuffix": "K",\n "theme": "fusion"\n },\n "data": [\n {\n "label": "Venezuela",\n "value": "290"\n },\n {\n "label": "Saudi",\n "value": "260"\n },\n {\n "label": "Canada",\n "value": "180"\n },\n {\n "label": "Iran",\n "value": "140"\n },\n {\n "label": "Russia",\n "value": "115"\n },\n {\n "label": "UAE",\n "value": "100"\n },\n {\n "label": "US",\n "value": "30"\n },\n {\n "label": "China",\n "value": "30"\n }\n ]\n };\n }\n \n // Listener for beforeDataUpdate\n beforeDataUpdate($event){\n this.zone.run(() => {\n this.message = 'Status: beforeDataUpdate';\n });\n }\n\n // Listener for dataUpdated\n dataUpdated($event){\n this.zone.run(() => {\n this.message += ', dataUpdated';\n });\n }\n\n // Listener for drawComplete\n drawComplete($event){\n this.zone.run(() => {\n this.message += ', drawComplete';\n });\n }\n\n // Listener for renderComplete\n renderComplete($event){\n this.zone.run(() => {\n this.message += ', renderComplete';\n })\n }\n}\n`,
- template:`\n\n\n\n{{message}}
`,
+ type: '',
+ title: 'Lifecycle events',
+ description:
+ 'This sample lists the basic lifecycle events at the time of rendering FusionCharts',
+ module: `// Setup needed in app.module.ts\n\nimport { NgModule, enableProdMode } from '@angular/core'\nimport { AppComponent } from './app.component';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FusionChartsModule } from 'angular-fusioncharts';\n\n// Load FusionCharts\nimport * as FusionCharts from 'fusioncharts';\n// Load Charts module\nimport * as Charts from 'fusioncharts/fusioncharts.charts';\n// Load themes\nimport * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';\n\n// Add dependencies to FusionChartsModule\nFusionChartsModule.fcRoot(\n FusionCharts,\n Charts,\n FusionTheme\n)\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n FusionChartsModule\n ],\n providers: [\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule {\n}\n`,
+ component: `// In app.component.ts\n\nimport {\n Component,\n NgZone\n} from '@angular/core';\n\n\n@Component({\n selector: 'app',\n templateUrl: './app.component.html'\n})\nexport class AppComponent {\n dataSource: any;\n message = 'You will see notifications here for the chart lifecycle events';\n constructor(private zone: NgZone) {\n this.dataSource = {\n "chart": {\n "caption": "Countries With Most Oil Reserves [2017-18]",\n "subCaption": "In MMbbl = One Million barrels",\n "xAxisName": "Country",\n "yAxisName": "Reserves (MMbbl)",\n "numberSuffix": "K",\n "theme": "fusion"\n },\n "data": [\n {\n "label": "Venezuela",\n "value": "290"\n },\n {\n "label": "Saudi",\n "value": "260"\n },\n {\n "label": "Canada",\n "value": "180"\n },\n {\n "label": "Iran",\n "value": "140"\n },\n {\n "label": "Russia",\n "value": "115"\n },\n {\n "label": "UAE",\n "value": "100"\n },\n {\n "label": "US",\n "value": "30"\n },\n {\n "label": "China",\n "value": "30"\n }\n ]\n };\n }\n \n // Listener for beforeDataUpdate\n beforeDataUpdate($event){\n this.zone.run(() => {\n this.message = 'Status: beforeDataUpdate';\n });\n }\n\n // Listener for dataUpdated\n dataUpdated($event){\n this.zone.run(() => {\n this.message += ', dataUpdated';\n });\n }\n\n // Listener for drawComplete\n drawComplete($event){\n this.zone.run(() => {\n this.message += ', drawComplete';\n });\n }\n\n // Listener for renderComplete\n renderComplete($event){\n this.zone.run(() => {\n this.message += ', renderComplete';\n })\n }\n}\n`,
+ template: `\n\n\n\n{{message}}
`
};
fcDemos['ex24'] = {
- title: 'Slice data plots',
- description: 'Use Chart specific custom API',
- module: `// Setup needed in app.module.ts\n\nimport { NgModule, enableProdMode } from '@angular/core'\nimport { AppComponent } from './app.component';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FusionChartsModule } from 'angular-fusioncharts';\n\n// Load FusionCharts\nimport * as FusionCharts from 'fusioncharts';\n// Load Charts module\nimport * as Charts from 'fusioncharts/fusioncharts.charts';\n// Load themes\nimport * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';\n\n// Add dependencies to FusionChartsModule\nFusionChartsModule.fcRoot(\n FusionCharts,\n Charts,\n FusionTheme\n)\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n FusionChartsModule\n ],\n providers: [\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule {\n}\n`,
- template: `\n\n\n\n`,
- component:`// In app.component.ts\nimport {\n Component,\n NgZone\n} from '@angular/core';\n\n@Component({\n selector: 'app',\n templateUrl: './app.component.html'\n})\nexport class AppComponent {\n dataSource: any;\n selectedSlice = 'none';\n chart: any;\n constructor(private zone: NgZone) {\n this.dataSource = {\n "chart": {\n "caption": "Market Share of Web Servers",\n "plottooltext": "$percentValue of web servers run on $label servers",\n "showLegend": "1",\n "showPercentValues": "1",\n "legendPosition": "bottom",\n "useDataPlotColorForLabels": "1",\n "enablemultislicing": "0",\n "showlegend": "0",\n "theme": "fusion",\n },\n "data": [{\n "label": "Apache",\n "value": "32647479"\n }, {\n "label": "Microsoft",\n "value": "22100932"\n }, {\n "label": "Zeus",\n "value": "14376"\n }, {\n "label": "Other",\n "value": "18674221"\n }]\n };\n } \n\n // FusionCharts initialized listener to get the chart instance\n initialized($event){\n this.chart = $event.chart; // saving chart instance \n }\n\n // Change listener for radio buttons\n onRadioOptionChange(option){\n this.selectedSlice = option;\n // For each data element , see if it is selected, if none then slice in all elements\n this.dataSource.data.forEach((d, index) => {\n if(option == 'none'){\n this.chart.slicePlotItem(index, false);\n } else if(option === d.label.toLowerCase()){\n this.chart.slicePlotItem(index, true);\n }\n });\n }\n\n // Get data item label\n getLabel(index){\n return this.dataSource.data[index].label;\n }\n\n // FusionCharts Component dataPlot click listener\n dataplotClick($event){\n let dataIndex = $event.dataObj.dataIndex;\n let isSliced = $event.dataObj.isSliced;\n this.zone.run(() => {\n this.selectedSlice = isSliced ? 'none' : this.getLabel(dataIndex).toLowerCase();\n })\n }\n \n ngOnInit() {\n setTimeout(() => {\n SelectedSingleton.change(this.sampleCode['ex24'].title);\n })\n }\n}\n`
-}
+ type: '',
+ title: 'Slice data plots',
+ description: 'Use Chart specific custom API',
+ module: `// Setup needed in app.module.ts\n\nimport { NgModule, enableProdMode } from '@angular/core'\nimport { AppComponent } from './app.component';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FusionChartsModule } from 'angular-fusioncharts';\n\n// Load FusionCharts\nimport * as FusionCharts from 'fusioncharts';\n// Load Charts module\nimport * as Charts from 'fusioncharts/fusioncharts.charts';\n// Load themes\nimport * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';\n\n// Add dependencies to FusionChartsModule\nFusionChartsModule.fcRoot(\n FusionCharts,\n Charts,\n FusionTheme\n)\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n FusionChartsModule\n ],\n providers: [\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule {\n}\n`,
+ template: `\n\n\n\n`,
+ component: `// In app.component.ts\nimport {\n Component,\n NgZone\n} from '@angular/core';\n\n@Component({\n selector: 'app',\n templateUrl: './app.component.html'\n})\nexport class AppComponent {\n dataSource: any;\n selectedSlice = 'none';\n chart: any;\n constructor(private zone: NgZone) {\n this.dataSource = {\n "chart": {\n "caption": "Market Share of Web Servers",\n "plottooltext": "$percentValue of web servers run on $label servers",\n "showLegend": "1",\n "showPercentValues": "1",\n "legendPosition": "bottom",\n "useDataPlotColorForLabels": "1",\n "enablemultislicing": "0",\n "showlegend": "0",\n "theme": "fusion",\n },\n "data": [{\n "label": "Apache",\n "value": "32647479"\n }, {\n "label": "Microsoft",\n "value": "22100932"\n }, {\n "label": "Zeus",\n "value": "14376"\n }, {\n "label": "Other",\n "value": "18674221"\n }]\n };\n } \n\n // FusionCharts initialized listener to get the chart instance\n initialized($event){\n this.chart = $event.chart; // saving chart instance \n }\n\n // Change listener for radio buttons\n onRadioOptionChange(option){\n this.selectedSlice = option;\n // For each data element , see if it is selected, if none then slice in all elements\n this.dataSource.data.forEach((d, index) => {\n if(option == 'none'){\n this.chart.slicePlotItem(index, false);\n } else if(option === d.label.toLowerCase()){\n this.chart.slicePlotItem(index, true);\n }\n });\n }\n\n // Get data item label\n getLabel(index){\n return this.dataSource.data[index].label;\n }\n\n // FusionCharts Component dataPlot click listener\n dataplotClick($event){\n let dataIndex = $event.dataObj.dataIndex;\n let isSliced = $event.dataObj.isSliced;\n this.zone.run(() => {\n this.selectedSlice = isSliced ? 'none' : this.getLabel(dataIndex).toLowerCase();\n })\n }\n \n ngOnInit() {\n setTimeout(() => {\n SelectedSingleton.change(this.sampleCode['ex24'].title);\n })\n }\n}\n`
+};
fcDemos['ex25'] = {
- title: 'Usage of FusionCharts methods (API)',
- description: 'Change a chart attribute by calling FusionCharts setChartAttribute API',
- module:`// Setup needed in app.module.ts\n\nimport { NgModule, enableProdMode } from '@angular/core'\nimport { AppComponent } from './app.component';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FusionChartsModule } from 'angular-fusioncharts';\n\n// Load FusionCharts\nimport * as FusionCharts from 'fusioncharts';\n// Load Charts module\nimport * as Charts from 'fusioncharts/fusioncharts.charts';\n// Load themes\nimport * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';\n\n// Add dependencies to FusionChartsModule\nFusionChartsModule.fcRoot(\n FusionCharts,\n Charts,\n FusionTheme\n)\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n FusionChartsModule\n ],\n providers: [\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule {\n}\n`,
- component: `// In app.component.ts\nimport {\n Component,\n NgZone\n} from '@angular/core';\n\n\n@Component({\n selector: 'app',\n templateUrl: './app.component.html',\n})\nexport class AppComponent {\n dataSource: any;\n selectedSlice = 'none';\n chart: any;\n constructor(private zone: NgZone) {\n this.dataSource = {\n "chart": {\n "caption": "Countries With Most Oil Reserves [2017-18]",\n "subCaption": "In MMbbl = One Million barrels",\n "xAxisName": "Country",\n "yAxisName": "Reserves (MMbbl)",\n "numberSuffix": "K",\n "theme": "fusion"\n },\n "data": [{\n "label": "Venezuela",\n "value": "290"\n },\n {\n "label": "Saudi",\n "value": "260"\n },\n {\n "label": "Canada",\n "value": "180"\n },\n {\n "label": "Iran",\n "value": "140"\n },\n {\n "label": "Russia",\n "value": "115"\n },\n {\n "label": "UAE",\n "value": "100"\n },\n {\n "label": "US",\n "value": "30"\n },\n {\n "label": "China",\n "value": "30"\n }\n ]\n };\n }\n\n initialized($event) {\n this.chart = $event.chart; // saving chart instance\n }\n\n changeCaption(caption){\n this.chart.setChartAttribute('caption', caption); // Changing caption\n }\n\n changeXAxisName(xaxisname){\n this.chart.setChartAttribute('xaxisname', xaxisname); // Changing xaxisname using API\n }\n\n changeYAxisName(yaxisname){\n this.chart.setChartAttribute('yaxisname', yaxisname); // Changing yaxisname using API\n }\n\n // Resetting chart attributes to initial data\n reset(){\n this.chart.setChartAttribute('caption', this.dataSource.chart.caption); \n this.chart.setChartAttribute('xaxisname', this.dataSource.chart.xAxisName);\n this.chart.setChartAttribute('yaxisname', this.dataSource.chart.yAxisName);\n }\n}\n`,
- template:`\n\n\n\n \n \n \n \n
`
-}
-export default fcDemos;
\ No newline at end of file
+ type: '',
+ title: 'Usage of FusionCharts methods (API)',
+ description:
+ 'Change a chart attribute by calling FusionCharts setChartAttribute API',
+ module: `// Setup needed in app.module.ts\n\nimport { NgModule, enableProdMode } from '@angular/core'\nimport { AppComponent } from './app.component';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FusionChartsModule } from 'angular-fusioncharts';\n\n// Load FusionCharts\nimport * as FusionCharts from 'fusioncharts';\n// Load Charts module\nimport * as Charts from 'fusioncharts/fusioncharts.charts';\n// Load themes\nimport * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';\n\n// Add dependencies to FusionChartsModule\nFusionChartsModule.fcRoot(\n FusionCharts,\n Charts,\n FusionTheme\n)\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n FusionChartsModule\n ],\n providers: [\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule {\n}\n`,
+ component: `// In app.component.ts\nimport {\n Component,\n NgZone\n} from '@angular/core';\n\n\n@Component({\n selector: 'app',\n templateUrl: './app.component.html',\n})\nexport class AppComponent {\n dataSource: any;\n selectedSlice = 'none';\n chart: any;\n constructor(private zone: NgZone) {\n this.dataSource = {\n "chart": {\n "caption": "Countries With Most Oil Reserves [2017-18]",\n "subCaption": "In MMbbl = One Million barrels",\n "xAxisName": "Country",\n "yAxisName": "Reserves (MMbbl)",\n "numberSuffix": "K",\n "theme": "fusion"\n },\n "data": [{\n "label": "Venezuela",\n "value": "290"\n },\n {\n "label": "Saudi",\n "value": "260"\n },\n {\n "label": "Canada",\n "value": "180"\n },\n {\n "label": "Iran",\n "value": "140"\n },\n {\n "label": "Russia",\n "value": "115"\n },\n {\n "label": "UAE",\n "value": "100"\n },\n {\n "label": "US",\n "value": "30"\n },\n {\n "label": "China",\n "value": "30"\n }\n ]\n };\n }\n\n initialized($event) {\n this.chart = $event.chart; // saving chart instance\n }\n\n changeCaption(caption){\n this.chart.setChartAttribute('caption', caption); // Changing caption\n }\n\n changeXAxisName(xaxisname){\n this.chart.setChartAttribute('xaxisname', xaxisname); // Changing xaxisname using API\n }\n\n changeYAxisName(yaxisname){\n this.chart.setChartAttribute('yaxisname', yaxisname); // Changing yaxisname using API\n }\n\n // Resetting chart attributes to initial data\n reset(){\n this.chart.setChartAttribute('caption', this.dataSource.chart.caption); \n this.chart.setChartAttribute('xaxisname', this.dataSource.chart.xAxisName);\n this.chart.setChartAttribute('yaxisname', this.dataSource.chart.yAxisName);\n }\n}\n`,
+ template: `\n\n\n\n \n \n \n \n
`
+};
+
+fcDemos['ex26'] = {
+ type: 'FusionTime',
+ title: 'A Simple TimeSeries',
+ description:
+ 'A simple time-series chart with a single series plotted as line',
+ data: `// A shortened version of the data is given here.\n// Please check the link below to see the complete data:\n// https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/line-chart-with-time-axis-data.json\n[\n [\n \"01-Feb-11\",\n 8866\n ],\n [\n \"02-Feb-11\",\n 2174\n ],\n [\n \"03-Feb-11\",\n 2084\n ],\n [\n \"04-Feb-11\",\n 1503\n ],\n [\n \"05-Feb-11\",\n 4928\n ],\n [\n \"06-Feb-11\",\n 4667\n ],\n [\n \"07-Feb-11\",\n 1064\n ],\n [\n \"08-Feb-11\",\n 851\n ],\n [\n \"09-Feb-11\",\n 7326\n ],\n [\n \"10-Feb-11\",\n 8399\n ],\n [\n \"11-Feb-11\",\n 4084\n ],\n [\n \"12-Feb-11\",\n 4012\n ],\n [\n \"13-Feb-11\",\n 1673\n ],\n [\n \"14-Feb-11\",\n 6018\n ],\n [\n \"15-Feb-11\",\n 9011\n ],\n [\n \"16-Feb-11\",\n 5817\n ],\n [\n \"17-Feb-11\",\n 5813\n ],\n [\n \"18-Feb-11\",\n 566\n ],\n [\n \"19-Feb-11\",\n 9065\n ],\n [\n \"20-Feb-11\",\n 6734\n ],\n [\n \"21-Feb-11\",\n 6937\n ],\n [\n \"22-Feb-11\",\n 3038\n ],\n [\n \"23-Feb-11\",\n 4445\n ],\n [\n \"24-Feb-11\",\n 8782\n ],\n [\n \"25-Feb-11\",\n 9489\n ],\n [\n \"26-Feb-11\",\n 9624\n ],\n [\n \"27-Feb-11\",\n 9033\n ],\n [\n \"28-Feb-11\",\n 6932\n ],\n [\n \"01-Mar-11\",\n 625\n ],\n [\n \"02-Mar-11\",\n 904\n ],\n [\n \"03-Mar-11\",\n 7572\n ],\n [\n \"04-Mar-11\",\n 2124\n ],\n [\n \"05-Mar-11\",\n 8157\n ],\n [\n \"06-Mar-11\",\n 8666\n ],\n [\n \"07-Mar-11\",\n 3186\n ],\n [\n \"08-Mar-11\",\n 9247\n ],\n [\n \"09-Mar-11\",\n 8393\n ],\n [\n \"10-Mar-11\",\n 9191\n ],\n [\n \"11-Mar-11\",\n 1278\n ],\n [\n \"12-Mar-11\",\n 7252\n ],\n [\n \"13-Mar-11\",\n 6516\n ],\n [\n \"14-Mar-11\",\n 8176\n ],\n [\n \"15-Mar-11\",\n 5759\n ],\n [\n \"16-Mar-11\",\n 7601\n ],\n [\n \"17-Mar-11\",\n 3616\n ],\n [\n \"18-Mar-11\",\n 9612\n ],\n [\n \"19-Mar-11\",\n 2631\n ],\n [\n \"20-Mar-11\",\n 4939\n ],\n [\n \"21-Mar-11\",\n 3578\n ],\n [\n \"22-Mar-11\",\n 3742\n ],\n [\n \"23-Mar-11\",\n 5100\n ],\n [\n \"24-Mar-11\",\n 6925\n ],\n [\n \"25-Mar-11\",\n 5239\n ],\n [\n \"26-Mar-11\",\n 1461\n ],\n [\n \"27-Mar-11\",\n 2317\n ],\n [\n \"28-Mar-11\",\n 8238\n ],\n [\n \"29-Mar-11\",\n 3617\n ],\n [\n \"30-Mar-11\",\n 8680\n ],\n [\n \"31-Mar-11\",\n 8487\n ],\n [\n \"01-Apr-11\",\n 1768\n ],\n [\n \"02-Apr-11\",\n 1227\n ],\n [\n \"03-Apr-11\",\n 4137\n ],\n [\n \"04-Apr-11\",\n 9055\n ],\n [\n \"05-Apr-11\",\n 4984\n ],\n [\n \"06-Apr-11\",\n 1577\n ],\n [\n \"07-Apr-11\",\n 6624\n ],\n [\n \"08-Apr-11\",\n 5802\n ],\n [\n \"09-Apr-11\",\n 5190\n ],\n [\n \"10-Apr-11\",\n 3092\n ],\n [\n \"11-Apr-11\",\n 7304\n ],\n [\n \"12-Apr-11\",\n 3445\n ],\n [\n \"13-Apr-11\",\n 1480\n ],\n [\n \"14-Apr-11\",\n 3705\n ],\n [\n \"15-Apr-11\",\n 7795\n ],\n [\n \"16-Apr-11\",\n 7405\n ],\n [\n \"17-Apr-11\",\n 3901\n ],\n [\n \"18-Apr-11\",\n 4428\n ],\n [\n \"19-Apr-11\",\n 8874\n ],\n [\n \"20-Apr-11\",\n 3072\n ],\n [\n \"21-Apr-11\",\n 6340\n ],\n [\n \"22-Apr-11\",\n 2275\n ],\n [\n \"23-Apr-11\",\n 8934\n ],\n [\n \"24-Apr-11\",\n 7595\n ],\n [\n \"25-Apr-11\",\n 3869\n ],\n [\n \"26-Apr-11\",\n 7395\n ],\n [\n \"27-Apr-11\",\n 7812\n ],\n [\n \"28-Apr-11\",\n 9642\n ],\n [\n \"29-Apr-11\",\n 6925\n ],\n [\n \"30-Apr-11\",\n 8537\n ],\n [\n \"01-May-11\",\n 2985\n ]\n]`,
+ schema: `[\n {\n "name": "Country",\n "type": "string"\n },\n {\n "name": "Time",\n "type": "date",\n "format": "%-m/%-d/%Y"\n },\n {\n "name": "Sales",\n "type": "number"\n }\n]`,
+ module: `// Setup needed in app.module.ts\n\nimport { NgModule, enableProdMode } from '@angular/core'\nimport { AppComponent } from './app.component';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FusionChartsModule } from 'angular-fusioncharts';\n\n// Load FusionCharts\nimport * as FusionCharts from 'fusioncharts';\n// Load Charts module\nimport * as Charts from 'fusioncharts/fusioncharts.charts';\n// Load themes\nimport * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';\n\n// Add dependencies to FusionChartsModule\nFusionChartsModule.fcRoot(\n FusionCharts,\n Charts,\n FusionTheme\n)\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n FusionChartsModule\n ],\n providers: [\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule {\n}\n`,
+ component: `// In app.component.ts\nimport { Component, NgZone } from '@angular/core';\n\nimport * as FusionCharts from 'fusioncharts';\n\n@Component({\n selector: 'app',\n templateUrl: './app.component.html',\n})\nexport class AppComponent {\n dataSource: any;\n type: string;\n width: string;\n height: string;\n constructor() {\n this.type = 'timeseries';\n this.width = '100%';\n this.height = '400';\n // This is the dataSource of the chart\n this.dataSource = {\n // Initially data is set as null\n data: null,\n caption: {\n text: 'Sales Analysis'\n },\n subcaption: {\n text: 'Grocery'\n },\n yAxis: [\n {\n plot: {\n value: 'Grocery Sales Value',\n type: 'line'\n },\n format: {\n prefix: '$'\n },\n title: 'Sale Value'\n }\n ]\n };\n this.fetchData();\n }\n\n // In this method we will create our DataStore and using that we will create a custom DataTable which takes two\n // parameters, one is data another is schema.\n fetchData() {\n var jsonify = res => res.json();\n var dataFetch = fetch(\n 'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/line-chart-with-time-axis-data.json'\n ).then(jsonify);\n var schemaFetch = fetch(\n 'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/line-chart-with-time-axis-schema.json'\n ).then(jsonify);\n\n Promise.all([dataFetch, schemaFetch]).then(res => {\n const data = res[0];\n const schema = res[1];\n // First we are creating a DataStore\n const fusionDataStore = new FusionCharts.DataStore();\n // After that we are creating a DataTable by passing our data and schema as arguments\n const fusionTable = fusionDataStore.createDataTable(data, schema);\n // Afet that we simply mutated our timeseries datasource by attaching the above\n // DataTable into its data property.\n this.dataSource.data = fusionTable;\n });\n }\n\n ngOnInit() {\n \n }\n}\n`,
+ template: `\n\n\n`
+};
+
+fcDemos['ex27'] = {
+ type: 'FusionTime',
+ title: 'Plotting multiple series on time axis',
+ description:
+ 'A multi-series chart with 2 variables plotted as line on the same y-axis.',
+ data: `// A shortened version of the data is given here.\n// Please check the link below to see the complete data:\n// https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/plotting-multiple-series-on-time-axis-data.json\n[\n [\n "01-Feb-11",\n "Grocery",\n 8866\n ],\n [\n "01-Feb-11",\n "Footwear",\n 984\n ],\n [\n "02-Feb-11",\n "Grocery",\n 2174\n ],\n [\n "02-Feb-11",\n "Footwear",\n 1109\n ],\n [\n "03-Feb-11",\n "Grocery",\n 2084\n ],\n [\n "03-Feb-11",\n "Footwear",\n 6526\n ],\n [\n "04-Feb-11",\n "Grocery",\n 1503\n ],\n [\n "04-Feb-11",\n "Footwear",\n 1007\n ],\n [\n "05-Feb-11",\n "Grocery",\n 4928\n ],\n [\n "05-Feb-11",\n "Footwear",\n 4112\n ],\n [\n "06-Feb-11",\n "Grocery",\n 4667\n ],\n [\n "06-Feb-11",\n "Footwear",\n 7206\n ],\n [\n "07-Feb-11",\n "Grocery",\n 1064\n ],\n [\n "07-Feb-11",\n "Footwear",\n 7890\n ],\n [\n "08-Feb-11",\n "Grocery",\n 851\n ],\n [\n "08-Feb-11",\n "Footwear",\n 6002\n ],\n [\n "09-Feb-11",\n "Grocery",\n 7326\n ],\n [\n "09-Feb-11",\n "Footwear",\n 5168\n ],\n [\n "10-Feb-11",\n "Grocery",\n 8399\n ],\n [\n "10-Feb-11",\n "Footwear",\n 7992\n ],\n [\n "11-Feb-11",\n "Grocery",\n 4084\n ],\n [\n "11-Feb-11",\n "Footwear",\n 3001\n ],\n [\n "12-Feb-11",\n "Grocery",\n 4012\n ],\n [\n "12-Feb-11",\n "Footwear",\n 7891\n ],\n [\n "13-Feb-11",\n "Grocery",\n 1673\n ],\n [\n "13-Feb-11",\n "Footwear",\n 511\n ],\n [\n "14-Feb-11",\n "Grocery",\n 6018\n ],\n [\n "14-Feb-11",\n "Footwear",\n 1861\n ],\n [\n "15-Feb-11",\n "Grocery",\n 9011\n ],\n [\n "15-Feb-11",\n "Footwear",\n 1424\n ],\n [\n "16-Feb-11",\n "Grocery",\n 5817\n ],\n [\n "16-Feb-11",\n "Footwear",\n 6807\n ],\n [\n "17-Feb-11",\n "Grocery",\n 5813\n ],\n [\n "17-Feb-11",\n "Footwear",\n 4126\n ],\n [\n "18-Feb-11",\n "Grocery",\n 566\n ],\n [\n "18-Feb-11",\n "Footwear",\n 3482\n ],\n [\n "19-Feb-11",\n "Grocery",\n 9065\n ],\n [\n "19-Feb-11",\n "Footwear",\n 5649\n ],\n [\n "20-Feb-11",\n "Grocery",\n 6734\n ],\n [\n "20-Feb-11",\n "Footwear",\n 309\n ],\n [\n "21-Feb-11",\n "Grocery",\n 6937\n ],\n [\n "21-Feb-11",\n "Footwear",\n 6568\n ],\n [\n "22-Feb-11",\n "Grocery",\n 3038\n ],\n [\n "22-Feb-11",\n "Footwear",\n 2458\n ],\n [\n "23-Feb-11",\n "Grocery",\n 4445\n ],\n [\n "23-Feb-11",\n "Footwear",\n 356\n ],\n [\n "24-Feb-11",\n "Grocery",\n 8782\n ],\n [\n "24-Feb-11",\n "Footwear",\n 5883\n ],\n [\n "25-Feb-11",\n "Grocery",\n 9489\n ],\n [\n "25-Feb-11",\n "Footwear",\n 6556\n ],\n [\n "26-Feb-11",\n "Grocery",\n 9624\n ],\n [\n "26-Feb-11",\n "Footwear",\n 1601\n ],\n [\n "27-Feb-11",\n "Grocery",\n 9033\n ],\n [\n "27-Feb-11",\n "Footwear",\n 1359\n ],\n [\n "28-Feb-11",\n "Grocery",\n 6932\n ],\n [\n "28-Feb-11",\n "Footwear",\n 4361\n ],\n [\n "01-Mar-11",\n "Grocery",\n 625\n ],\n [\n "01-Mar-11",\n "Footwear",\n 3807\n ],\n [\n "02-Mar-11",\n "Grocery",\n 904\n ],\n [\n "02-Mar-11",\n "Footwear",\n 2279\n ],\n [\n "03-Mar-11",\n "Grocery",\n 7572\n ],\n [\n "03-Mar-11",\n "Footwear",\n 7226\n ],\n [\n "04-Mar-11",\n "Grocery",\n 2124\n ],\n [\n "04-Mar-11",\n "Footwear",\n 6155\n ],\n [\n "05-Mar-11",\n "Grocery",\n 8157\n ],\n [\n "05-Mar-11",\n "Footwear",\n 1908\n ],\n [\n "06-Mar-11",\n "Grocery",\n 8666\n ]\n]`,
+ schema: `[\n {\n "name": "Time",\n "type": "date",\n "format": "%d-%b-%y"\n },\n {\n "name": "Type",\n "type": "string"\n },\n {\n "name": "Sales Value",\n "type": "number"\n }\n]`,
+ module: `// Setup needed in app.module.ts\n\nimport { NgModule, enableProdMode } from '@angular/core'\nimport { AppComponent } from './app.component';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FusionChartsModule } from 'angular-fusioncharts';\n\n// Load FusionCharts\nimport * as FusionCharts from 'fusioncharts';\n// Load Charts module\nimport * as Charts from 'fusioncharts/fusioncharts.charts';\n// Load themes\nimport * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';\n\n// Add dependencies to FusionChartsModule\nFusionChartsModule.fcRoot(\n FusionCharts,\n Charts,\n FusionTheme\n)\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n FusionChartsModule\n ],\n providers: [\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule {\n}\n`,
+ component: `// In app.component.ts\nimport { Component, NgZone } from '@angular/core';\nimport * as FusionCharts from 'fusioncharts';\n\n@Component({\n selector: 'app',\n templateUrl: './app.component.html',\n})\nexport class AppComponent {\n dataSource: any;\n type: string;\n width: string;\n height: string;\n constructor() {\n this.type = 'timeseries';\n this.width = '100%';\n this.height = '400';\n // This is the dataSource of the chart\n this.dataSource = {\n // Initially data is set as null\n data: null,\n caption: {\n text: 'Sales Analysis'\n },\n subcaption: {\n text: 'Grocery & Footwear'\n },\n series: 'Type',\n yAxis: [\n {\n plot: 'Sales Value',\n title: 'Sale Value',\n format: {\n prefix: '$'\n }\n }\n ]\n };\n this.fetchData();\n }\n\n // In this method we will create our DataStore and using that we will create a custom DataTable which takes two\n // parameters, one is data another is schema.\n fetchData() {\n var jsonify = res => res.json();\n var dataFetch = fetch(\n 'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/plotting-multiple-series-on-time-axis-data.json'\n ).then(jsonify);\n var schemaFetch = fetch(\n 'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/plotting-multiple-series-on-time-axis-schema.json'\n ).then(jsonify);\n\n Promise.all([dataFetch, schemaFetch]).then(res => {\n const data = res[0];\n const schema = res[1];\n // First we are creating a DataStore\n const fusionDataStore = new FusionCharts.DataStore();\n // After that we are creating a DataTable by passing our data and schema as arguments\n const fusionTable = fusionDataStore.createDataTable(data, schema);\n // Afet that we simply mutated our timeseries datasource by attaching the above\n // DataTable into its data property.\n this.dataSource.data = fusionTable;\n });\n }\n\n ngOnInit() {\n \n }\n}\n`,
+ template: `\n\n\n`
+};
+
+fcDemos['ex28'] = {
+ type: 'FusionTime',
+ title: 'Column and line combination on time axis',
+ description:
+ 'Two series of data plotted as a combination of column & line on the same y-axis.',
+ data: `// A shortened version of the data is given here.\n// Please check the link below to see the complete data:\n// https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/column-line-combination-data.json\n[\n [\n \"01-Jan-2015\",\n \"55\",\n \"100\"\n ],\n [\n \"02-Jan-2015\",\n \"56\",\n \"106\"\n ],\n [\n \"03-Jan-2015\",\n \"59\",\n \"108\"\n ],\n [\n \"04-Jan-2015\",\n \"50\",\n \"102\"\n ],\n [\n \"05-Jan-2015\",\n \"56\",\n \"108\"\n ],\n [\n \"06-Jan-2015\",\n \"48\",\n \"100\"\n ],\n [\n \"07-Jan-2015\",\n \"45\",\n \"97\"\n ],\n [\n \"08-Jan-2015\",\n \"56\",\n \"105\"\n ],\n [\n \"09-Jan-2015\",\n \"44\",\n \"95\"\n ],\n [\n \"10-Jan-2015\",\n \"48\",\n \"96\"\n ],\n [\n \"11-Jan-2015\",\n \"52\",\n \"104\"\n ],\n [\n \"12-Jan-2015\",\n \"59\",\n \"112\"\n ],\n [\n \"13-Jan-2015\",\n \"62\",\n \"118\"\n ],\n [\n \"14-Jan-2015\",\n \"56\",\n \"114\"\n ],\n [\n \"15-Jan-2015\",\n \"59\",\n \"115\"\n ],\n [\n \"16-Jan-2015\",\n \"64\",\n \"125\"\n ],\n [\n \"17-Jan-2015\",\n \"61\",\n \"122\"\n ],\n [\n \"18-Jan-2015\",\n \"65\",\n \"127\"\n ],\n [\n \"19-Jan-2015\",\n \"59\",\n \"126\"\n ],\n [\n \"20-Jan-2015\",\n \"75\",\n \"138\"\n ],\n [\n \"21-Jan-2015\",\n \"58\",\n \"124\"\n ],\n [\n \"22-Jan-2015\",\n \"72\",\n \"134\"\n ],\n [\n \"23-Jan-2015\",\n \"64\",\n \"132\"\n ],\n [\n \"24-Jan-2015\",\n \"75\",\n \"143\"\n ],\n [\n \"25-Jan-2015\",\n \"66\",\n \"133\"\n ],\n [\n \"26-Jan-2015\",\n \"70\",\n \"134\"\n ],\n [\n \"27-Jan-2015\",\n \"64\",\n \"133\"\n ],\n [\n \"28-Jan-2015\",\n \"63\",\n \"128\"\n ],\n [\n \"29-Jan-2015\",\n \"69\",\n \"135\"\n ],\n [\n \"30-Jan-2015\",\n \"62\",\n \"129\"\n ],\n [\n \"31-Jan-2015\",\n \"71\",\n \"136\"\n ],\n [\n \"01-Feb-2015\",\n \"76\",\n \"148\"\n ],\n [\n \"02-Feb-2015\",\n \"85\",\n \"156\"\n ],\n [\n \"03-Feb-2015\",\n \"86\",\n \"156\"\n ],\n [\n \"04-Feb-2015\",\n \"86\",\n \"169\"\n ],\n [\n \"05-Feb-2015\",\n \"93\",\n \"180\"\n ],\n [\n \"06-Feb-2015\",\n \"95\",\n \"185\"\n ],\n [\n \"07-Feb-2015\",\n \"100\",\n \"189\"\n ],\n [\n \"08-Feb-2015\",\n \"103\",\n \"194\"\n ],\n [\n \"09-Feb-2015\",\n \"96\",\n \"193\"\n ],\n [\n \"10-Feb-2015\",\n \"82\",\n \"174\"\n ],\n [\n \"11-Feb-2015\",\n \"97\",\n \"183\"\n ],\n [\n \"12-Feb-2015\",\n \"79\",\n \"175\"\n ],\n [\n \"13-Feb-2015\",\n \"74\",\n \"161\"\n ],\n [\n \"14-Feb-2015\",\n \"67\",\n \"149\"\n ],\n [\n \"15-Feb-2015\",\n \"76\",\n \"150\"\n ],\n [\n \"16-Feb-2015\",\n \"68\",\n \"144\"\n ],\n [\n \"17-Feb-2015\",\n \"76\",\n \"147\"\n ]\n]`,
+ schema: `[\n {\n \"name\": \"Time\",\n \"type\": \"date\",\n \"format\": \"%e-%b-%Y\"\n },\n {\n \"name\": \"Downloads\",\n \"type\": \"number\"\n },\n {\n \"name\": \"Web Visits\",\n \"type\": \"number\"\n }\n]`,
+ module: `// Setup needed in app.module.ts\n\nimport { NgModule, enableProdMode } from '@angular/core'\nimport { AppComponent } from './app.component';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FusionChartsModule } from 'angular-fusioncharts';\n\n// Load FusionCharts\nimport * as FusionCharts from 'fusioncharts';\n// Load Charts module\nimport * as Charts from 'fusioncharts/fusioncharts.charts';\n// Load themes\nimport * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';\n\n// Add dependencies to FusionChartsModule\nFusionChartsModule.fcRoot(\n FusionCharts,\n Charts,\n FusionTheme\n)\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n FusionChartsModule\n ],\n providers: [\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule {\n}\n`,
+ component: `// In app.component.ts\nimport {\n Component,\n NgZone\n} from '@angular/core';\nimport * as FusionCharts from 'fusioncharts';\n\n@Component({\n selector: 'app',\n templateUrl: './app.component.html',\n})\nexport class AppComponent {\n dataSource: any;\n type: string;\n width: string;\n height: string;\n constructor() {\n this.type = 'timeseries';\n this.width = '100%';\n this.height = '400';\n // This is the dataSource of the chart\n this.dataSource = {\n // Initially data is set as null\n data: null,\n caption: {\n text: 'Sales Analysis'\n },\n subcaption: {\n text: 'Grocery'\n },\n yAxis: [\n {\n plot: {\n value: 'Grocery Sales Value',\n type: 'line'\n },\n format: {\n prefix: '$'\n },\n title: 'Sale Value'\n }\n ]\n };\n this.fetchData();\n }\n\n // In this method we will create our DataStore and using that we will create a custom DataTable which takes two\n // parameters, one is data another is schema.\n fetchData() {\n var jsonify = res => res.json();\n var dataFetch = fetch(\n 'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/column-line-combination-data.json'\n ).then(jsonify);\n var schemaFetch = fetch(\n 'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/column-line-combination-schema.json'\n ).then(jsonify);\n\n Promise.all([dataFetch, schemaFetch]).then(res => {\n const data = res[0];\n const schema = res[1];\n // First we are creating a DataStore\n const fusionDataStore = new FusionCharts.DataStore();\n // After that we are creating a DataTable by passing our data and schema as arguments\n const fusionTable = fusionDataStore.createDataTable(data, schema);\n // Afet that we simply mutated our timeseries datasource by attaching the above\n // DataTable into its data property.\n this.dataSource.data = fusionTable;\n });\n }\n\n ngOnInit() {\n \n }\n}\n`,
+ template: `\n\n\n`
+};
+
+fcDemos['ex29'] = {
+ type: 'FusionTime',
+ title: 'Plotting two variables (measures)',
+ description:
+ 'Plotting 2 different variables in 2 different vertically stacked canvases.',
+ data: `// A shortened version of the data is given here.\n// Please check the link below to see the complete data:\n// https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/plotting-two-variable-measures-data.json\n[\n [\n "11/08/1995",\n 4.85,\n 27.49\n ],\n [\n "12/13/1995",\n 4.07,\n 25.39\n ],\n [\n "1/12/1996",\n 4.66,\n 24.48\n ],\n [\n "2/13/1996",\n 4.77,\n 24.05\n ],\n [\n "3/13/1996",\n 5.6,\n 22.869\n ],\n [\n "4/16/1996",\n 5.47,\n 22.999\n ],\n [\n "5/09/1996",\n 4.97,\n 23.189\n ],\n [\n "6/12/1996",\n 4.83,\n 25.43\n ],\n [\n "7/10/1996",\n 4.53,\n 27.67\n ],\n [\n "8/06/1996",\n 4.29,\n 26.25\n ],\n [\n "9/10/1996",\n 4.25,\n 29.102\n ],\n [\n "10/09/1996",\n 4.45,\n 27.536\n ],\n [\n "11/10/1996",\n 4.51,\n 26.316\n ],\n [\n "12/11/1996",\n 4.5,\n 26.501\n ],\n [\n "1/07/1997",\n 4.98,\n 24.19\n ],\n [\n "2/13/1997",\n 4.84,\n 23.92\n ],\n [\n "3/13/1997",\n 5.46,\n 22.465\n ],\n [\n "4/15/1997",\n 4.94,\n 23.227\n ],\n [\n "5/10/1997",\n 5,\n 24.328\n ],\n [\n "6/17/1997",\n 4.66,\n 25.225\n ],\n [\n "7/08/1997",\n 4.94,\n 24.966\n ],\n [\n "8/17/1997",\n 5.03,\n 24.599\n ],\n [\n "9/17/1997",\n 5.55,\n 28.71\n ],\n [\n "6/09/2011",\n 4.5,\n 29.085\n ],\n [\n "7/07/2011",\n 4.43,\n 27.243\n ],\n [\n "8/09/2011",\n 4.47,\n 28.175\n ],\n [\n "9/06/2011",\n 4.45,\n 29.541\n ],\n [\n "10/04/2011",\n 4.43,\n 27.971\n ],\n [\n "11/18/2011",\n 4.64,\n 28.594\n ],\n [\n "1/10/2012",\n 4.62,\n 25.213\n ],\n [\n "2/07/2012",\n 4.89,\n 23.021\n ],\n [\n "3/16/2012",\n 5.7,\n 22.581\n ],\n [\n "4/10/2012",\n 4.82,\n 24.799\n ],\n [\n "5/15/2012",\n 4.61,\n 27.182\n ],\n [\n "7/26/2012",\n 4.67,\n 26.847\n ],\n [\n "8/14/2012",\n 4.53,\n 28.239\n ],\n [\n "9/10/2012",\n 4.47,\n 27.837\n ],\n [\n "10/10/2012",\n 4.49,\n 28.538\n ],\n [\n "11/08/2012",\n 4.4,\n 28.759\n ],\n [\n "12/04/2012",\n 4.4,\n 26.816\n ],\n [\n "3/05/2013",\n 4.69,\n 24.698\n ],\n [\n "4/09/2013",\n 4.55,\n 24.767\n ],\n [\n "5/09/2013",\n 4.28,\n 25.422\n ],\n [\n "6/11/2013",\n 4.54,\n 26.647\n ],\n [\n "7/11/2013",\n 4.28,\n 27.881\n ],\n [\n "8/13/2013",\n 4.39,\n ""\n ],\n [\n "9/11/2013",\n 4.48,\n 29.359\n ],\n [\n "10/08/2013",\n 4.42,\n 29.103\n ],\n [\n "11/13/2013",\n 4.44,\n 27.268\n ],\n [\n "12/04/2013",\n 4.53,\n 26.727\n ],\n [\n "1/14/2014",\n 4.83,\n 23.104\n ],\n [\n "2/04/2014",\n 4.95,\n 22.282\n ],\n [\n "4/01/2014",\n 5.49,\n 23.25\n ],\n [\n "5/06/2014",\n 5.33,\n 23.566\n ],\n [\n "6/13/2014",\n 4.7,\n 25.103\n ],\n [\n "9/03/2014",\n 4.52,\n 28.015\n ],\n [\n "10/07/2014",\n 4.45,\n 27.054\n ],\n [\n "11/12/2014",\n 4.5,\n 27.328\n ],\n [\n "12/04/2014",\n 4.65,\n 26.277\n ],\n [\n "2/15/2015",\n 4.65,\n 25.931\n ],\n [\n "3/10/2015",\n 4.62,\n 23.631\n ],\n [\n "4/24/2015",\n 4.86,\n 23.4\n ],\n [\n "7/29/2015",\n 4.7,\n 25.298\n ],\n [\n "8/18/2015",\n 4.34,\n 25.363\n ],\n [\n "9/10/2015",\n 4.44,\n 26.631\n ],\n [\n "11/16/2015",\n 4.47,\n 25.904\n ],\n [\n "12/09/2015",\n "",\n 25.668\n ],\n [\n "1/12/2016",\n 4.84,\n 24.311\n ],\n [\n "2/04/2016",\n 4.85,\n 24.475\n ],\n [\n "5/11/2016",\n 4.48,\n 26.409\n ],\n [\n "6/07/2016",\n 4.52,\n ""\n ],\n [\n "9/20/2016",\n 4.59,\n 28.673\n ],\n [\n "12/21/2016",\n 4.55,\n 26.626\n ]\n]`,
+ schema: `[\n {\n \"name\": \"Date\",\n \"type\": \"date\",\n \"format\": \"%-m/%d/%Y\"\n },\n {\n \"name\": \"O2 concentration\",\n \"type\": \"number\"\n },\n {\n \"name\": \"Surface Temperature\",\n \"type\": \"number\"\n }\n]`,
+ module: `// Setup needed in app.module.ts\n\nimport { NgModule, enableProdMode } from '@angular/core'\nimport { AppComponent } from './app.component';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FusionChartsModule } from 'angular-fusioncharts';\n\n// Load FusionCharts\nimport * as FusionCharts from 'fusioncharts';\n// Load Charts module\nimport * as Charts from 'fusioncharts/fusioncharts.charts';\n// Load themes\nimport * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';\n\n// Add dependencies to FusionChartsModule\nFusionChartsModule.fcRoot(\n FusionCharts,\n Charts,\n FusionTheme\n)\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n FusionChartsModule\n ],\n providers: [\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule {\n}\n`,
+ component: `// In app.component.ts\nimport {\n Component,\n NgZone\n} from '@angular/core';\nimport * as FusionCharts from 'fusioncharts';\n\n@Component({\n selector: 'app',\n templateUrl: './app.component.html',\n})\nexport class AppComponent {\n dataSource: any;\n type: string;\n width: string;\n height: string;\n constructor() {\n this.type = 'timeseries';\n this.width = '100%';\n this.height = '400';\n // This is the dataSource of the chart\n this.dataSource = {\n // Initially data is set as null\n data: null,\n caption: {\n text: 'Cariaco Basin Sampling'\n },\n subcaption: {\n text: 'Analysis of O₂ Concentration and Surface Temperature'\n },\n yAxis: [\n {\n plot: 'O2 concentration',\n min: '3',\n max: '6',\n title: 'O₂ Concentration (mg/L)'\n },\n {\n plot: 'Surface Temperature',\n min: '18',\n max: '30',\n title: 'Surface Temperature (°C)'\n }\n ]\n };\n this.fetchData();\n }\n\n // In this method we will create our DataStore and using that we will create a custom DataTable which takes two\n // parameters, one is data another is schema.\n fetchData() {\n var jsonify = res => res.json();\n var dataFetch = fetch(\n 'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/plotting-two-variable-measures-data.json'\n ).then(jsonify);\n var schemaFetch = fetch(\n 'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/plotting-two-variable-measures-schema.json'\n ).then(jsonify);\n\n Promise.all([dataFetch, schemaFetch]).then(res => {\n const data = res[0];\n const schema = res[1];\n // First we are creating a DataStore\n const fusionDataStore = new FusionCharts.DataStore();\n // After that we are creating a DataTable by passing our data and schema as arguments\n const fusionTable = fusionDataStore.createDataTable(data, schema);\n // Afet that we simply mutated our timeseries datasource by attaching the above\n // DataTable into its data property.\n this.dataSource.data = fusionTable;\n });\n }\n\n ngOnInit() {\n \n }\n}\n`,
+ template: `\n\n\n`
+};
+
+fcDemos['ex30'] = {
+ type: 'FusionTime',
+ title: 'Column chart with time axis',
+ description: 'Time-series chart with series plotted as column.',
+ data: `// A shortened version of the data is given here.\n// Please check the link below to see the complete data:\n// https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/column-chart-with-time-axis-data.json\n[\n [\n "2016-01-01",\n 5\n ],\n [\n "2016-01-02",\n 90\n ],\n [\n "2016-01-03",\n 19\n ],\n [\n "2016-01-04",\n 74\n ],\n [\n "2016-01-05",\n 81\n ],\n [\n "2016-01-06",\n 48\n ],\n [\n "2016-01-07",\n 60\n ],\n [\n "2016-01-08",\n 18\n ],\n [\n "2016-01-09",\n 36\n ],\n [\n "2016-01-10",\n 53\n ],\n [\n "2016-01-11",\n 15\n ],\n [\n "2016-01-12",\n 34\n ],\n [\n "2016-01-13",\n 71\n ],\n [\n "2016-01-14",\n 47\n ],\n [\n "2016-01-15",\n 35\n ],\n [\n "2016-01-16",\n 99\n ],\n [\n "2016-01-17",\n 79\n ],\n [\n "2016-01-18",\n 25\n ],\n [\n "2016-01-19",\n 14\n ],\n [\n "2016-01-20",\n 16\n ],\n [\n "2016-01-21",\n 79\n ],\n [\n "2016-01-22",\n 15\n ],\n [\n "2016-01-23",\n 94\n ],\n [\n "2016-01-24",\n 77\n ],\n [\n "2016-01-25",\n 38\n ],\n [\n "2016-01-26",\n 17\n ],\n [\n "2016-01-27",\n 24\n ],\n [\n "2016-01-28",\n 53\n ],\n [\n "2016-01-29",\n 52\n ],\n [\n "2016-01-30",\n 76\n ],\n [\n "2016-01-31",\n 86\n ],\n [\n "2016-02-01",\n 71\n ],\n [\n "2016-02-02",\n 84\n ],\n [\n "2016-02-03",\n 3\n ],\n [\n "2016-02-04",\n 86\n ],\n [\n "2016-02-05",\n 86\n ],\n [\n "2016-02-06",\n 93\n ],\n [\n "2016-02-07",\n 66\n ],\n [\n "2016-02-08",\n 18\n ],\n [\n "2016-02-09",\n 95\n ],\n [\n "2016-02-10",\n 21\n ],\n [\n "2016-02-11",\n 19\n ],\n [\n "2016-02-12",\n 28\n ],\n [\n "2016-02-13",\n 36\n ],\n [\n "2016-02-14",\n 95\n ],\n [\n "2016-02-15",\n 83\n ],\n [\n "2016-02-16",\n 43\n ],\n [\n "2016-02-17",\n 19\n ],\n [\n "2016-02-18",\n 46\n ],\n [\n "2016-02-19",\n 75\n ],\n [\n "2016-02-20",\n 61\n ],\n [\n "2016-02-21",\n 54\n ],\n [\n "2016-02-22",\n 96\n ],\n [\n "2016-02-23",\n 56\n ],\n [\n "2016-02-24",\n 78\n ],\n [\n "2016-02-25",\n 32\n ],\n [\n "2016-02-26",\n 39\n ],\n [\n "2016-02-27",\n 7\n ],\n [\n "2016-02-28",\n 92\n ],\n [\n "2016-02-29",\n 18\n ],\n [\n "2016-03-01",\n 33\n ],\n [\n "2016-03-02",\n 32\n ],\n [\n "2016-03-03",\n 49\n ],\n [\n "2016-03-04",\n 59\n ],\n [\n "2016-03-05",\n 42\n ],\n [\n "2016-03-06",\n 94\n ],\n [\n "2016-03-07",\n 15\n ],\n [\n "2016-03-08",\n 31\n ],\n [\n "2016-03-09",\n 32\n ],\n [\n "2016-03-10",\n 93\n ],\n [\n "2016-03-11",\n 53\n ]\n]`,
+ schema: `[\n {\n "name": "Time",\n "type": "date",\n "format": "%Y-%m-%d"\n },\n {\n "name": "Daily Visitors",\n "type": "number"\n }\n]`,
+ module: `// Setup needed in app.module.ts\n\nimport { NgModule, enableProdMode } from '@angular/core'\nimport { AppComponent } from './app.component';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FusionChartsModule } from 'angular-fusioncharts';\n\n// Load FusionCharts\nimport * as FusionCharts from 'fusioncharts';\n// Load Charts module\nimport * as Charts from 'fusioncharts/fusioncharts.charts';\n// Load themes\nimport * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';\n\n// Add dependencies to FusionChartsModule\nFusionChartsModule.fcRoot(\n FusionCharts,\n Charts,\n FusionTheme\n)\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n FusionChartsModule\n ],\n providers: [\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule {\n}\n`,
+ component: `// In app.component.ts\nimport {\n Component,\n NgZone\n} from '@angular/core';\nimport * as FusionCharts from 'fusioncharts';\n\n@Component({\n selector: 'app',\n templateUrl: './app.component.html',\n})\nexport class AppComponent {\n dataSource: any;\n type: string;\n width: string;\n height: string;\n constructor() {\n this.type = 'timeseries';\n this.width = '100%';\n this.height = '400';\n // This is the dataSource of the chart\n this.dataSource = {\n // Initially data is set as null\n data: null,\n chart: {\n showLegend: 0\n },\n caption: {\n text: 'Daily Visitors Count of a Website'\n },\n yAxis: [\n {\n plot: {\n value: 'Daily Visitors',\n type: 'column'\n },\n title: 'Daily Visitors (in thousand)'\n }\n ]\n };\n this.fetchData();\n }\n\n // In this method we will create our DataStore and using that we will create a custom DataTable which takes two\n // parameters, one is data another is schema.\n fetchData() {\n var jsonify = res => res.json();\n var dataFetch = fetch(\n 'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/column-chart-with-time-axis-data.json'\n ).then(jsonify);\n var schemaFetch = fetch(\n 'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/column-chart-with-time-axis-schema.json'\n ).then(jsonify);\n\n Promise.all([dataFetch, schemaFetch]).then(res => {\n const data = res[0];\n const schema = res[1];\n // First we are creating a DataStore\n const fusionDataStore = new FusionCharts.DataStore();\n // After that we are creating a DataTable by passing our data and schema as arguments\n const fusionTable = fusionDataStore.createDataTable(data, schema);\n // Afet that we simply mutated our timeseries datasource by attaching the above\n // DataTable into its data property.\n this.dataSource.data = fusionTable;\n });\n }\n\n ngOnInit() {\n \n }\n}\n`,
+ template: `\n\n\n`
+};
+
+fcDemos['ex31'] = {
+ type: 'FusionTime',
+ title: 'Area chart with time axis',
+ description: 'Time-series chart with series plotted as area.',
+ data: `// A shortened version of the data is given here.\n// Please check the link below to see the complete data:\n// https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/area-chart-with-time-axis-data.json\n[\n [\n "2016-01-01",\n 5\n ],\n [\n "2016-01-02",\n 90\n ],\n [\n "2016-01-03",\n 19\n ],\n [\n "2016-01-04",\n 74\n ],\n [\n "2016-01-05",\n 81\n ],\n [\n "2016-01-06",\n 48\n ],\n [\n "2016-01-07",\n 60\n ],\n [\n "2016-01-08",\n 18\n ],\n [\n "2016-01-09",\n 36\n ],\n [\n "2016-01-10",\n 53\n ],\n [\n "2016-01-11",\n 15\n ],\n [\n "2016-01-12",\n 34\n ],\n [\n "2016-01-13",\n 71\n ],\n [\n "2016-01-14",\n 47\n ],\n [\n "2016-01-15",\n 35\n ],\n [\n "2016-01-16",\n 99\n ],\n [\n "2016-01-17",\n 79\n ],\n [\n "2016-01-18",\n 25\n ],\n [\n "2016-01-19",\n 14\n ],\n [\n "2016-01-20",\n 16\n ],\n [\n "2016-01-21",\n 79\n ],\n [\n "2016-01-22",\n 15\n ],\n [\n "2016-01-23",\n 94\n ],\n [\n "2016-01-24",\n 77\n ],\n [\n "2016-01-25",\n 38\n ],\n [\n "2016-01-26",\n 17\n ],\n [\n "2016-01-27",\n 24\n ],\n [\n "2016-01-28",\n 53\n ],\n [\n "2016-01-29",\n 52\n ],\n [\n "2016-01-30",\n 76\n ],\n [\n "2016-01-31",\n 86\n ],\n [\n "2016-02-01",\n 71\n ],\n [\n "2016-02-02",\n 84\n ],\n [\n "2016-02-03",\n 3\n ],\n [\n "2016-02-04",\n 86\n ],\n [\n "2016-02-05",\n 86\n ],\n [\n "2016-02-06",\n 93\n ],\n [\n "2016-02-07",\n 66\n ],\n [\n "2016-02-08",\n 18\n ],\n [\n "2016-02-09",\n 95\n ],\n [\n "2016-02-10",\n 21\n ],\n [\n "2016-02-11",\n 19\n ],\n [\n "2016-02-12",\n 28\n ],\n [\n "2016-02-13",\n 36\n ],\n [\n "2016-02-14",\n 95\n ],\n [\n "2016-02-15",\n 83\n ],\n [\n "2016-02-16",\n 43\n ],\n [\n "2016-02-17",\n 19\n ],\n [\n "2016-02-18",\n 46\n ],\n [\n "2016-02-19",\n 75\n ],\n [\n "2016-02-20",\n 61\n ],\n [\n "2016-02-21",\n 54\n ],\n [\n "2016-02-22",\n 96\n ],\n [\n "2016-02-23",\n 56\n ],\n [\n "2016-02-24",\n 78\n ],\n [\n "2016-02-25",\n 32\n ],\n [\n "2016-02-26",\n 39\n ],\n [\n "2016-02-27",\n 7\n ],\n [\n "2016-02-28",\n 92\n ],\n [\n "2016-02-29",\n 18\n ],\n [\n "2016-03-01",\n 33\n ],\n [\n "2016-03-02",\n 32\n ],\n [\n "2016-03-03",\n 49\n ],\n [\n "2016-03-04",\n 59\n ],\n [\n "2016-03-05",\n 42\n ],\n [\n "2016-03-06",\n 94\n ],\n [\n "2016-03-07",\n 15\n ],\n [\n "2016-03-08",\n 31\n ],\n [\n "2016-03-09",\n 32\n ],\n [\n "2016-03-10",\n 93\n ],\n [\n "2016-03-11",\n 53\n ],\n [\n "2016-03-12",\n 64\n ],\n [\n "2016-03-13",\n 42\n ],\n [\n "2016-03-14",\n 18\n ],\n [\n "2016-03-15",\n 4\n ],\n [\n "2016-03-16",\n 83\n ],\n [\n "2016-03-17",\n 35\n ],\n [\n "2016-03-18",\n 96\n ],\n [\n "2016-03-19",\n 54\n ],\n [\n "2016-03-20",\n 40\n ],\n [\n "2016-03-21",\n 38\n ],\n [\n "2016-03-22",\n 21\n ],\n [\n "2016-03-23",\n 34\n ],\n [\n "2016-03-24",\n 94\n ],\n [\n "2016-03-25",\n 89\n ],\n [\n "2016-03-26",\n 86\n ]\n]`,
+ schema: `[\n {\n "name": "Time",\n "type": "date",\n "format": "%Y-%m-%d"\n },\n {\n "name": "Daily Visitors",\n "type": "number"\n }\n]`,
+ module: `// Setup needed in app.module.ts\n\nimport { NgModule, enableProdMode } from '@angular/core'\nimport { AppComponent } from './app.component';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FusionChartsModule } from 'angular-fusioncharts';\n\n// Load FusionCharts\nimport * as FusionCharts from 'fusioncharts';\n// Load Charts module\nimport * as Charts from 'fusioncharts/fusioncharts.charts';\n// Load themes\nimport * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';\n\n// Add dependencies to FusionChartsModule\nFusionChartsModule.fcRoot(\n FusionCharts,\n Charts,\n FusionTheme\n)\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n FusionChartsModule\n ],\n providers: [\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule {\n}\n`,
+ component: `// In app.component.ts\nimport {\n Component,\n NgZone\n} from '@angular/core';\nimport * as FusionCharts from 'fusioncharts';\n\n@Component({\n selector: 'app',\n templateUrl: './app.component.html',\n})\nexport class AppComponent {\n dataSource: any;\n type: string;\n width: string;\n height: string;\n constructor() {\n this.type = 'timeseries';\n this.width = '100%';\n this.height = '400';\n // This is the dataSource of the chart\n this.dataSource = {\n // Initially data is set as null\n data: null,\n chart: {\n showLegend: 0\n },\n caption: {\n text: 'Daily Visitors Count of a Website'\n },\n yAxis: [\n {\n plot: {\n value: 'Daily Visitors',\n type: 'area'\n },\n title: 'Daily Visitors (in thousand)'\n }\n ]\n };\n this.fetchData();\n }\n\n // In this method we will create our DataStore and using that we will create a custom DataTable which takes two\n // parameters, one is data another is schema.\n fetchData() {\n var jsonify = res => res.json();\n var dataFetch = fetch(\n 'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/area-chart-with-time-axis-data.json'\n ).then(jsonify);\n var schemaFetch = fetch(\n 'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/area-chart-with-time-axis-schema.json'\n ).then(jsonify);\n\n Promise.all([dataFetch, schemaFetch]).then(res => {\n const data = res[0];\n const schema = res[1];\n // First we are creating a DataStore\n const fusionDataStore = new FusionCharts.DataStore();\n // After that we are creating a DataTable by passing our data and schema as arguments\n const fusionTable = fusionDataStore.createDataTable(data, schema);\n // Afet that we simply mutated our timeseries datasource by attaching the above\n // DataTable into its data property.\n this.dataSource.data = fusionTable;\n });\n }\n\n ngOnInit() {\n \n }\n}\n`,
+ template: `\n\n\n`
+};
+
+fcDemos['ex32'] = {
+ type: 'FusionTime',
+ title: 'Interactive candlestick chart',
+ description:
+ 'Time-series chart plotted as candlestick, with 4 different values for each plot (open, high, low, close)',
+ data: `// A shortened version of the data is given here.\n// Please check the link below to see the complete data:\n// https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/candlestick-chart-data.json\n[\n [\n "1980-12-12",\n 0.513393,\n 0.515625,\n 0.513393,\n 0.513393,\n 117258400\n ],\n [\n "1980-12-15",\n 0.488839,\n 0.488839,\n 0.486607,\n 0.486607,\n 43971200\n ],\n [\n "1980-12-16",\n 0.453125,\n 0.453125,\n 0.450893,\n 0.450893,\n 26432000\n ],\n [\n "1980-12-17",\n 0.462054,\n 0.464286,\n 0.462054,\n 0.462054,\n 21610400\n ],\n [\n "1980-12-18",\n 0.475446,\n 0.477679,\n 0.475446,\n 0.475446,\n 18362400\n ],\n [\n "1980-12-19",\n 0.504464,\n 0.506696,\n 0.504464,\n 0.504464,\n 12157600\n ],\n [\n "1980-12-22",\n 0.529018,\n 0.53125,\n 0.529018,\n 0.529018,\n 9340800\n ],\n [\n "1980-12-23",\n 0.551339,\n 0.553571,\n 0.551339,\n 0.551339,\n 11737600\n ],\n [\n "1980-12-24",\n 0.580357,\n 0.582589,\n 0.580357,\n 0.580357,\n 12000800\n ],\n [\n "1980-12-26",\n 0.633929,\n 0.636161,\n 0.633929,\n 0.633929,\n 13893600\n ],\n [\n "1980-12-29",\n 0.642857,\n 0.645089,\n 0.642857,\n 0.642857,\n 23290400\n ],\n [\n "1980-12-30",\n 0.629464,\n 0.629464,\n 0.627232,\n 0.627232,\n 17220000\n ],\n [\n "1980-12-31",\n 0.611607,\n 0.611607,\n 0.609375,\n 0.609375,\n 8937600\n ],\n [\n "1981-01-02",\n 0.616071,\n 0.620536,\n 0.616071,\n 0.616071,\n 5415200\n ],\n [\n "1981-01-05",\n 0.604911,\n 0.604911,\n 0.602679,\n 0.602679,\n 8932000\n ],\n [\n "1981-01-06",\n 0.578125,\n 0.578125,\n 0.575893,\n 0.575893,\n 11289600\n ],\n [\n "1981-01-07",\n 0.553571,\n 0.553571,\n 0.551339,\n 0.551339,\n 13921600\n ],\n [\n "1981-01-08",\n 0.542411,\n 0.542411,\n 0.540179,\n 0.540179,\n 9956800\n ],\n [\n "1981-01-09",\n 0.569196,\n 0.571429,\n 0.569196,\n 0.569196,\n 5376000\n ],\n [\n "1981-01-12",\n 0.569196,\n 0.569196,\n 0.564732,\n 0.564732,\n 5924800\n ],\n [\n "1981-01-13",\n 0.546875,\n 0.546875,\n 0.544643,\n 0.544643,\n 5762400\n ],\n [\n "1981-01-14",\n 0.546875,\n 0.549107,\n 0.546875,\n 0.546875,\n 3572800\n ],\n [\n "1981-01-15",\n 0.558036,\n 0.5625,\n 0.558036,\n 0.558036,\n 3516800\n ],\n [\n "1981-01-16",\n 0.555804,\n 0.555804,\n 0.553571,\n 0.553571,\n 3348800\n ],\n [\n "1981-01-19",\n 0.587054,\n 0.589286,\n 0.587054,\n 0.587054,\n 10393600\n ],\n [\n "1981-01-20",\n 0.571429,\n 0.571429,\n 0.569196,\n 0.569196,\n 7520800\n ],\n [\n "1981-01-21",\n 0.580357,\n 0.584821,\n 0.580357,\n 0.580357,\n 3976000\n ],\n [\n "1981-01-22",\n 0.587054,\n 0.591518,\n 0.587054,\n 0.587054,\n 8887200\n ],\n [\n "1981-01-23",\n 0.587054,\n 0.589286,\n 0.584821,\n 0.584821,\n 2805600\n ],\n [\n "1981-01-26",\n 0.578125,\n 0.578125,\n 0.575893,\n 0.575893,\n 6160000\n ],\n [\n "1981-01-27",\n 0.575893,\n 0.575893,\n 0.571429,\n 0.571429,\n 5924800\n ],\n [\n "1981-01-28",\n 0.555804,\n 0.555804,\n 0.553571,\n 0.553571,\n 7039200\n ],\n [\n "1981-01-29",\n 0.535714,\n 0.535714,\n 0.533482,\n 0.533482,\n 10976000\n ],\n [\n "1981-01-30",\n 0.508929,\n 0.508929,\n 0.504464,\n 0.504464,\n 11547200\n ],\n [\n "1981-02-02",\n 0.477679,\n 0.477679,\n 0.475446,\n 0.475446,\n 5941600\n ],\n [\n "1981-02-03",\n 0.493304,\n 0.495536,\n 0.493304,\n 0.493304,\n 4788000\n ],\n [\n "1981-02-04",\n 0.511161,\n 0.513393,\n 0.511161,\n 0.511161,\n 6966400\n ],\n [\n "1981-02-05",\n 0.511161,\n 0.515625,\n 0.511161,\n 0.511161,\n 1982400\n ],\n [\n "1981-02-06",\n 0.513393,\n 0.515625,\n 0.513393,\n 0.513393,\n 3466400\n ],\n [\n "1981-02-09",\n 0.491071,\n 0.491071,\n 0.486607,\n 0.486607,\n 4188800\n ],\n [\n "1981-02-10",\n 0.486607,\n 0.488839,\n 0.486607,\n 0.486607,\n 4586400\n ],\n [\n "1981-02-11",\n 0.473214,\n 0.473214,\n 0.470982,\n 0.470982,\n 3460800\n ],\n [\n "1981-02-12",\n 0.46875,\n 0.46875,\n 0.466518,\n 0.466518,\n 3640000\n ],\n [\n "1981-02-13",\n 0.459821,\n 0.459821,\n 0.455357,\n 0.455357,\n 2788800\n ],\n [\n "1981-02-17",\n 0.466518,\n 0.46875,\n 0.466518,\n 0.466518,\n 3068800\n ],\n [\n "1981-02-18",\n 0.486607,\n 0.491071,\n 0.486607,\n 0.486607,\n 4810400\n ],\n [\n "1981-02-19",\n 0.459821,\n 0.459821,\n 0.457589,\n 0.457589,\n 5577600\n ],\n [\n "1981-02-20",\n 0.435268,\n 0.435268,\n 0.433036,\n 0.433036,\n 6092800\n ],\n [\n "1981-02-23",\n 0.439732,\n 0.441964,\n 0.439732,\n 0.439732,\n 3528000\n ],\n [\n "1981-02-24",\n 0.428571,\n 0.428571,\n 0.424107,\n 0.424107,\n 4244800\n ],\n [\n "1981-02-25",\n 0.450893,\n 0.453125,\n 0.450893,\n 0.450893,\n 4872000\n ],\n [\n "1981-02-26",\n 0.457589,\n 0.459821,\n 0.457589,\n 0.457589,\n 2710400\n ],\n [\n "1981-02-27",\n 0.473214,\n 0.477679,\n 0.473214,\n 0.473214,\n 3690400\n ],\n [\n "1981-03-02",\n 0.475446,\n 0.477679,\n 0.475446,\n 0.475446,\n 2940000\n ],\n [\n "1981-03-03",\n 0.470982,\n 0.470982,\n 0.46875,\n 0.46875,\n 4043200\n ],\n [\n "1981-03-04",\n 0.466518,\n 0.466518,\n 0.464286,\n 0.464286,\n 3427200\n ],\n [\n "1981-03-05",\n 0.464286,\n 0.464286,\n 0.462054,\n 0.462054,\n 1344000\n ],\n [\n "1981-03-06",\n 0.462054,\n 0.462054,\n 0.457589,\n 0.457589,\n 2900800\n ],\n [\n "1981-03-09",\n 0.424107,\n 0.424107,\n 0.421875,\n 0.421875,\n 3830400\n ],\n [\n "1981-03-10",\n 0.404018,\n 0.404018,\n 0.401786,\n 0.401786,\n 7095200\n ],\n [\n "1981-03-11",\n 0.390625,\n 0.390625,\n 0.386161,\n 0.386161,\n 7464800\n ],\n [\n "2018-09-11",\n 218.009995,\n 224.300003,\n 216.559998,\n 223.850006,\n 35749000\n ],\n [\n "2018-09-12",\n 224.940002,\n 225,\n 219.839996,\n 221.070007,\n 49278700\n ],\n [\n "2018-09-13",\n 223.520004,\n 228.350006,\n 222.570007,\n 226.410004,\n 41706400\n ],\n [\n "2018-09-14",\n 225.75,\n 226.839996,\n 222.520004,\n 223.839996,\n 31999300\n ],\n [\n "2018-09-17",\n 222.149994,\n 222.949997,\n 217.270004,\n 217.880005,\n 37195100\n ],\n [\n "2018-09-18",\n 217.789993,\n 221.850006,\n 217.119995,\n 218.240005,\n 31571700\n ],\n [\n "2018-09-19",\n 218.5,\n 219.619995,\n 215.300003,\n 218.369995,\n 27123800\n ],\n [\n "2018-09-20",\n 220.240005,\n 222.279999,\n 219.149994,\n 220.029999,\n 26608800\n ],\n [\n "2018-09-21",\n 220.779999,\n 221.360001,\n 217.289993,\n 217.660004,\n 96246700\n ],\n [\n "2018-09-24",\n 216.820007,\n 221.259995,\n 216.630005,\n 220.789993,\n 27693400\n ],\n [\n "2018-09-25",\n 219.75,\n 222.820007,\n 219.699997,\n 222.190002,\n 24554400\n ],\n [\n "2018-09-26",\n 221,\n 223.75,\n 219.759995,\n 220.419998,\n 23984700\n ],\n [\n "2018-09-27",\n 223.820007,\n 226.440002,\n 223.539993,\n 224.949997,\n 30181200\n ],\n [\n "2018-09-28",\n 224.789993,\n 225.839996,\n 224.020004,\n 225.740005,\n 22929400\n ],\n [\n "2018-10-01",\n 227.949997,\n 229.419998,\n 226.350006,\n 227.259995,\n 23600800\n ],\n [\n "2018-10-02",\n 227.25,\n 230,\n 226.630005,\n 229.279999,\n 24788200\n ],\n [\n "2018-10-03",\n 230.050003,\n 233.470001,\n 229.779999,\n 232.070007,\n 28654800\n ],\n [\n "2018-10-04",\n 230.779999,\n 232.350006,\n 226.729996,\n 227.990005,\n 32042000\n ],\n [\n "2018-10-05",\n 227.960007,\n 228.410004,\n 220.580002,\n 224.289993,\n 33580500\n ],\n [\n "2018-10-08",\n 222.210007,\n 224.800003,\n 220.199997,\n 223.770004,\n 29663900\n ],\n [\n "2018-10-09",\n 223.639999,\n 227.270004,\n 222.25,\n 226.869995,\n 26891000\n ],\n [\n "2018-10-10",\n 225.460007,\n 226.350006,\n 216.050003,\n 216.360001,\n 41990600\n ],\n [\n "2018-10-11",\n 214.520004,\n 219.5,\n 212.320007,\n 214.449997,\n 53124400\n ],\n [\n "2018-10-12",\n 220.419998,\n 222.880005,\n 216.839996,\n 222.110001,\n 40337900\n ],\n [\n "2018-10-15",\n 221.160004,\n 221.830002,\n 217.270004,\n 217.360001,\n 30791000\n ],\n [\n "2018-10-16",\n 218.929993,\n 222.990005,\n 216.759995,\n 222.149994,\n 29184000\n ],\n [\n "2018-10-17",\n 222.300003,\n 222.639999,\n 219.339996,\n 221.190002,\n 22885400\n ],\n [\n "2018-10-18",\n 217.860001,\n 219.740005,\n 213,\n 216.020004,\n 32581300\n ],\n [\n "2018-10-19",\n 218.059998,\n 221.259995,\n 217.429993,\n 219.309998,\n 33078700\n ],\n [\n "2018-10-22",\n 219.789993,\n 223.360001,\n 218.940002,\n 220.649994,\n 28792100\n ],\n [\n "2018-10-23",\n 215.830002,\n 223.25,\n 214.699997,\n 222.729996,\n 38767800\n ],\n [\n "2018-10-24",\n 222.600006,\n 224.229996,\n 214.539993,\n 215.089996,\n 40925500\n ],\n [\n "2018-10-25",\n 217.710007,\n 221.380005,\n 216.75,\n 219.800003,\n 29855800\n ],\n [\n "2018-10-26",\n 215.899994,\n 220.190002,\n 212.669998,\n 216.300003,\n 47258400\n ],\n [\n "2018-10-29",\n 219.190002,\n 219.690002,\n 206.089996,\n 212.240005,\n 45935500\n ],\n [\n "2018-10-30",\n 211.149994,\n 215.179993,\n 209.270004,\n 213.300003,\n 36660000\n ],\n [\n "2018-10-31",\n 216.880005,\n 220.449997,\n 216.619995,\n 218.860001,\n 38358900\n ],\n [\n "2018-11-01",\n 219.050003,\n 222.360001,\n 216.809998,\n 222.220001,\n 58323200\n ],\n [\n "2018-11-02",\n 209.550003,\n 213.649994,\n 205.429993,\n 207.479996,\n 91328700\n ],\n [\n "2018-11-05",\n 204.300003,\n 204.389999,\n 198.169998,\n 201.589996,\n 66163700\n ],\n [\n "2018-11-06",\n 201.919998,\n 204.720001,\n 201.690002,\n 203.770004,\n 31882900\n ],\n [\n "2018-11-07",\n 205.970001,\n 210.059998,\n 204.130005,\n 209.949997,\n 33424400\n ],\n [\n "2018-11-08",\n 209.979996,\n 210.119995,\n 206.75,\n 208.490005,\n 25362600\n ],\n [\n "2018-11-09",\n 205.550003,\n 206.009995,\n 202.25,\n 204.470001,\n 34365800\n ],\n [\n "2018-11-12",\n 199,\n 199.850006,\n 193.789993,\n 194.169998,\n 51135500\n ],\n [\n "2018-11-13",\n 191.630005,\n 197.179993,\n 191.449997,\n 192.229996,\n 46882900\n ],\n [\n "2018-11-14",\n 193.899994,\n 194.479996,\n 185.929993,\n 186.800003,\n 60801000\n ],\n [\n "2018-11-15",\n 188.389999,\n 191.970001,\n 186.899994,\n 191.410004,\n 46478800\n ],\n [\n "2018-11-16",\n 190.5,\n 194.970001,\n 189.460007,\n 193.529999,\n 36208500\n ]\n]`,
+ schema: `[\n {\n "name": "Date",\n "type": "date",\n "format": "%Y-%m-%d"\n },\n {\n "name": "Open",\n "type": "number"\n },\n {\n "name": "High",\n "type": "number"\n },\n {\n "name": "Low",\n "type": "number"\n },\n {\n "name": "Close",\n "type": "number"\n },\n {\n "name": "Volume",\n "type": "number"\n }\n]`,
+ module: `// Setup needed in app.module.ts\n\nimport { NgModule, enableProdMode } from '@angular/core'\nimport { AppComponent } from './app.component';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FusionChartsModule } from 'angular-fusioncharts';\n\n// Load FusionCharts\nimport * as FusionCharts from 'fusioncharts';\n// Load Charts module\nimport * as Charts from 'fusioncharts/fusioncharts.charts';\n// Load themes\nimport * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';\n\n// Add dependencies to FusionChartsModule\nFusionChartsModule.fcRoot(\n FusionCharts,\n Charts,\n FusionTheme\n)\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n FusionChartsModule\n ],\n providers: [\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule {\n}\n`,
+ component: `// In app.component.ts\nimport {\n Component,\n NgZone\n} from '@angular/core';\nimport * as FusionCharts from 'fusioncharts';\n\n@Component({\n selector: 'app',\n templateUrl: './app.component.html',\n})\nexport class AppComponent {\n dataSource: any;\n type: string;\n width: string;\n height: string;\n constructor() {\n this.type = 'timeseries';\n this.width = '100%';\n this.height = '400';\n // This is the dataSource of the chart\n this.dataSource = {\n // Initially data is set as null\n data: null,\n caption: {\n text: 'Apple Inc. Stock Price'\n },\n yAxis: {\n plot: {\n open: 'Open',\n high: 'High',\n low: 'Low',\n close: 'Close',\n type: 'candlestick'\n },\n title: 'Value'\n }\n };\n this.fetchData();\n }\n\n // In this method we will create our DataStore and using that we will create a custom DataTable which takes two\n // parameters, one is data another is schema.\n fetchData() {\n var jsonify = res => res.json();\n var dataFetch = fetch(\n 'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/candlestick-chart-data.json'\n ).then(jsonify);\n var schemaFetch = fetch(\n 'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/candlestick-chart-schema.json'\n ).then(jsonify);\n\n Promise.all([dataFetch, schemaFetch]).then(res => {\n const data = res[0];\n const schema = res[1];\n // First we are creating a DataStore\n const fusionDataStore = new FusionCharts.DataStore();\n // After that we are creating a DataTable by passing our data and schema as arguments\n const fusionTable = fusionDataStore.createDataTable(data, schema);\n // Afet that we simply mutated our timeseries datasource by attaching the above\n // DataTable into its data property.\n this.dataSource.data = fusionTable;\n });\n }\n\n ngOnInit() {\n \n }\n}\n`,
+ template: `\n\n\n`
+};
+
+fcDemos['ex33'] = {
+ type: 'FusionTime',
+ title: 'Annotating single data point',
+ description:
+ 'Annotating specific data point using data markers on line series',
+ data: `// A shortened version of the data is given here.\n// Please check the link below to see the complete data:\n// https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/annotating-single-data-point-data.json\n[\n [\n "Jan-1980",\n 14\n ],\n [\n "Feb-1980",\n 20\n ],\n [\n "Mar-1980",\n 20\n ],\n [\n "Apr-1980",\n 11.5\n ],\n [\n "May-1980",\n 11.5\n ],\n [\n "Jun-1980",\n 9.75\n ],\n [\n "Jul-1980",\n 9.5\n ],\n [\n "Aug-1980",\n 10\n ],\n [\n "Sep-1980",\n 12\n ],\n [\n "Oct-1980",\n 13.75\n ],\n [\n "Nov-1980",\n 18\n ],\n [\n "Dec-1980",\n 18\n ],\n [\n "Jan-1981",\n 16\n ],\n [\n "Feb-1981",\n 16\n ],\n [\n "Mar-1981",\n 16\n ],\n [\n "Apr-1981",\n 16\n ],\n [\n "May-1981",\n 20\n ],\n [\n "Jun-1981",\n 20\n ],\n [\n "Jul-1981",\n 20\n ],\n [\n "Aug-1981",\n 20\n ],\n [\n "Sep-1981",\n 20\n ],\n [\n "Oct-1981",\n 20\n ],\n [\n "Nov-1981",\n 13\n ],\n [\n "Dec-1981",\n 12\n ],\n [\n "Jan-1982",\n 15\n ],\n [\n "Feb-1982",\n 15\n ],\n [\n "Mar-1982",\n 15\n ],\n [\n "Apr-1982",\n 13\n ],\n [\n "May-1982",\n 13\n ],\n [\n "Jun-1982",\n 13\n ],\n [\n "Jul-1982",\n 12\n ],\n [\n "Aug-1982",\n 9.5\n ],\n [\n "Sep-1982",\n 10\n ],\n [\n "Oct-1982",\n 9.5\n ],\n [\n "Nov-1982",\n 9\n ],\n [\n "Dec-1982",\n 8.5\n ],\n [\n "Jan-1983",\n 8.5\n ],\n [\n "Feb-1983",\n 8.5\n ],\n [\n "Mar-1983",\n 8.5\n ],\n [\n "Apr-1983",\n 8.5\n ],\n [\n "May-1983",\n 9.63\n ],\n [\n "Jun-1983",\n 9.63\n ],\n [\n "Jul-1983",\n 9.63\n ],\n [\n "Aug-1983",\n 9.5\n ],\n [\n "Sep-1983",\n 9.5\n ],\n [\n "Oct-1983",\n 9.5\n ],\n [\n "Nov-1983",\n 9.5\n ],\n [\n "Dec-1983",\n 9.5\n ],\n [\n "Jan-1984",\n 9.5\n ],\n [\n "Feb-1984",\n 9.5\n ],\n [\n "Mar-1984",\n 10.5\n ],\n [\n "Apr-1984",\n 10.5\n ],\n [\n "May-1984",\n 10.5\n ],\n [\n "Jun-1984",\n 11\n ],\n [\n "Jul-1984",\n 11.75\n ],\n [\n "Aug-1984",\n 11.75\n ],\n [\n "Sep-1984",\n 10\n ],\n [\n "Oct-1984",\n 10\n ],\n [\n "Nov-1984",\n 9\n ],\n [\n "Dec-1984",\n 8.25\n ],\n [\n "Jan-1985",\n 8.25\n ],\n [\n "Feb-1985",\n 9\n ],\n [\n "Mar-1985",\n 8.5\n ],\n [\n "Apr-1985",\n 8.25\n ],\n [\n "May-1985",\n 7.75\n ],\n [\n "Jun-1985",\n 7.75\n ],\n [\n "Jul-1985",\n 8\n ],\n [\n "Aug-1985",\n 8\n ],\n [\n "May-2001",\n 4\n ],\n [\n "Jun-2001",\n 3.75\n ],\n [\n "Jul-2001",\n 3.75\n ],\n [\n "Aug-2001",\n 3.5\n ],\n [\n "Sep-2001",\n 3\n ],\n [\n "Oct-2001",\n 2.5\n ],\n [\n "Nov-2001",\n 2\n ],\n [\n "Dec-2001",\n 1.75\n ],\n [\n "Jan-2002",\n 1.75\n ],\n [\n "Feb-2002",\n 1.75\n ],\n [\n "Mar-2002",\n 1.75\n ],\n [\n "Apr-2002",\n 1.75\n ],\n [\n "May-2002",\n 1.75\n ],\n [\n "Jun-2002",\n 1.75\n ],\n [\n "Jul-2002",\n 1.75\n ],\n [\n "Aug-2002",\n 1.75\n ],\n [\n "Sep-2002",\n 1.75\n ],\n [\n "Oct-2002",\n 1.75\n ],\n [\n "Nov-2002",\n 1.25\n ],\n [\n "Dec-2002",\n 1.25\n ],\n [\n "Jan-2003",\n 1.25\n ],\n [\n "Feb-2003",\n 1.25\n ],\n [\n "Mar-2003",\n 1.25\n ],\n [\n "Apr-2003",\n 1.25\n ],\n [\n "May-2003",\n 1.25\n ],\n [\n "Jun-2003",\n 1\n ],\n [\n "Jul-2003",\n 1\n ],\n [\n "Aug-2003",\n 1\n ],\n [\n "Sep-2003",\n 1\n ],\n [\n "Oct-2003",\n 1\n ],\n [\n "Nov-2003",\n 1\n ],\n [\n "Dec-2003",\n 1\n ],\n [\n "Jan-2004",\n 1\n ],\n [\n "Feb-2004",\n 1\n ],\n [\n "Mar-2004",\n 1\n ],\n [\n "Apr-2004",\n 1\n ],\n [\n "May-2004",\n 1\n ],\n [\n "Jun-2004",\n 1.25\n ],\n [\n "Jul-2004",\n 1.25\n ],\n [\n "Aug-2004",\n 1.5\n ],\n [\n "Sep-2004",\n 1.75\n ],\n [\n "Oct-2004",\n 1.75\n ],\n [\n "Nov-2004",\n 2\n ],\n [\n "Dec-2004",\n 2.25\n ],\n [\n "Jan-2005",\n 2.25\n ],\n [\n "Feb-2005",\n 2.5\n ],\n [\n "Mar-2005",\n 2.75\n ],\n [\n "Apr-2005",\n 2.75\n ],\n [\n "May-2005",\n 3\n ],\n [\n "Jun-2005",\n 3.25\n ],\n [\n "Jul-2005",\n 3.25\n ],\n [\n "Aug-2005",\n 3.5\n ],\n [\n "Sep-2005",\n 3.75\n ],\n [\n "Oct-2005",\n 3.75\n ],\n [\n "Nov-2005",\n 4\n ],\n [\n "Dec-2005",\n 4.25\n ],\n [\n "Jan-2006",\n 4.5\n ],\n [\n "Feb-2006",\n 4.5\n ],\n [\n "Mar-2006",\n 4.75\n ],\n [\n "Apr-2006",\n 4.75\n ],\n [\n "May-2006",\n 5\n ],\n [\n "Jun-2006",\n 5.25\n ],\n [\n "Jul-2006",\n 5.25\n ],\n [\n "Aug-2006",\n 5.25\n ],\n [\n "Sep-2006",\n 5.25\n ],\n [\n "Oct-2006",\n 5.25\n ],\n [\n "Nov-2006",\n 5.25\n ],\n [\n "Dec-2006",\n 5.25\n ],\n [\n "Jan-2007",\n 5.25\n ],\n [\n "Feb-2007",\n 5.25\n ],\n [\n "Mar-2007",\n 5.25\n ],\n [\n "Apr-2007",\n 5.25\n ],\n [\n "May-2007",\n 5.25\n ],\n [\n "Jun-2007",\n 5.25\n ],\n [\n "Jul-2007",\n 5.25\n ],\n [\n "Aug-2007",\n 5.25\n ],\n [\n "Sep-2007",\n 4.75\n ],\n [\n "Oct-2007",\n 4.5\n ],\n [\n "Nov-2007",\n 4.5\n ],\n [\n "Dec-2007",\n 4.25\n ],\n [\n "Jan-2008",\n 3\n ],\n [\n "Feb-2008",\n 3\n ],\n [\n "Mar-2008",\n 2.25\n ],\n [\n "Apr-2008",\n 2\n ],\n [\n "May-2008",\n 2\n ],\n [\n "Jun-2008",\n 2\n ],\n [\n "Jul-2008",\n 2\n ],\n [\n "Aug-2008",\n 2\n ],\n [\n "Sep-2008",\n 2\n ],\n [\n "Oct-2008",\n 1\n ],\n [\n "Nov-2008",\n 1\n ],\n [\n "Dec-2008",\n 0.125\n ],\n [\n "Jan-2009",\n 0.125\n ],\n [\n "Feb-2009",\n 0.125\n ],\n [\n "Mar-2009",\n 0.125\n ],\n [\n "Apr-2009",\n 0.125\n ],\n [\n "May-2009",\n 0.125\n ],\n [\n "Jun-2009",\n 0.125\n ],\n [\n "Jul-2009",\n 0.125\n ],\n [\n "Aug-2009",\n 0.125\n ],\n [\n "Sep-2009",\n 0.125\n ],\n [\n "Oct-2009",\n 0.125\n ],\n [\n "Nov-2009",\n 0.125\n ],\n [\n "Dec-2009",\n 0.125\n ],\n [\n "Jan-2010",\n 0.125\n ],\n [\n "Feb-2010",\n 0.125\n ],\n [\n "Mar-2010",\n 0.125\n ],\n [\n "Apr-2010",\n 0.125\n ],\n [\n "May-2010",\n 0.125\n ],\n [\n "Jun-2010",\n 0.125\n ],\n [\n "Jul-2010",\n 0.125\n ],\n [\n "Aug-2010",\n 0.125\n ],\n [\n "Sep-2010",\n 0.125\n ],\n [\n "Oct-2010",\n 0.125\n ],\n [\n "Nov-2010",\n 0.125\n ],\n [\n "Dec-2010",\n 0.125\n ],\n [\n "Jan-2011",\n 0.125\n ],\n [\n "Feb-2011",\n 0.125\n ],\n [\n "Mar-2011",\n 0.125\n ],\n [\n "Apr-2011",\n 0.125\n ],\n [\n "May-2011",\n 0.125\n ],\n [\n "Jun-2011",\n 0.125\n ],\n [\n "Jul-2011",\n 0.125\n ],\n [\n "Aug-2011",\n 0.125\n ],\n [\n "Sep-2011",\n 0.125\n ],\n [\n "Oct-2011",\n 0.125\n ]\n]`,
+ schema: `[\n {\n "name": "Time",\n "type": "date",\n "format": "%b-%Y"\n },\n {\n "name": "Interest Rate",\n "type": "number"\n }\n]`,
+ module: `// Setup needed in app.module.ts\n\nimport { NgModule, enableProdMode } from '@angular/core'\nimport { AppComponent } from './app.component';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FusionChartsModule } from 'angular-fusioncharts';\n\n// Load FusionCharts\nimport * as FusionCharts from 'fusioncharts';\n// Load Charts module\nimport * as Charts from 'fusioncharts/fusioncharts.charts';\n// Load themes\nimport * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';\n\n// Add dependencies to FusionChartsModule\nFusionChartsModule.fcRoot(\n FusionCharts,\n Charts,\n FusionTheme\n)\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n FusionChartsModule\n ],\n providers: [\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule {\n}\n`,
+ component: `// In app.component.ts\nimport {\n Component,\n NgZone\n} from '@angular/core';\nimport * as FusionCharts from 'fusioncharts';\n\n@Component({\n selector: 'app',\n templateUrl: './app.component.html',\n})\nexport class AppComponent {\n dataSource: any;\n type: string;\n width: string;\n height: string;\n constructor() {\n this.type = 'timeseries';\n this.width = '100%';\n this.height = '400';\n // This is the dataSource of the chart\n this.dataSource = {\n // Initially data is set as null\n data: null,\n caption: {\n text: 'Interest Rate Analysis'\n },\n subCaption: {\n text: 'Federal Reserve (USA)'\n },\n yAxis: [\n {\n plot: 'Interest Rate',\n format: {\n suffix: '%'\n },\n title: 'Interest Rate'\n }\n ],\n dataMarker: [\n {\n seriesName: 'Interest Rate',\n time: 'Mar-1980',\n identifier: 'H',\n timeFormat: '%b-%Y',\n tooltext:\n 'As a part of credit control program, under the leadership of Paul Volcker, the Fed tightened the money supply, allowing the federal fund rates to approach 20 percent.'\n },\n {\n seriesName: 'Interest Rate',\n time: 'Aug-1982',\n identifier: 'L',\n timeFormat: '%b-%Y',\n tooltext:\n 'The FED eases off the monetary brakes, allowing interest rates to fall and the economy to begin a strong recovery.'\n },\n {\n seriesName: 'Interest Rate',\n time: 'Oct-1987',\n identifier: 'L',\n timeFormat: '%b-%Y',\n tooltext:\n 'The FED is forced to ease rate after the stock market crash.'\n },\n {\n seriesName: 'Interest Rate',\n time: 'May-1989',\n identifier: 'H',\n timeFormat: '%b-%Y',\n tooltext:\n 'Liquidity problem forced the Fed to increase rate to nearly 10%.'\n },\n {\n seriesName: 'Interest Rate',\n time: 'Sept-1992',\n identifier: 'L',\n timeFormat: '%b-%Y',\n tooltext:\n 'To fight the jobless economy growth the Fed had to reduce the interest rate to 3%.'\n },\n {\n seriesName: 'Interest Rate',\n time: 'Jun-2003',\n identifier: 'L',\n timeFormat: '%b-%Y',\n tooltext:\n 'Struggling to revive the economy, the FED cuts it’s benchmark rate to 1%.'\n },\n {\n seriesName: 'Interest Rate',\n time: 'Sep-2007',\n identifier: 'L',\n timeFormat: '%b-%Y',\n tooltext: 'Fed started reducing the Federal Fund Rate.'\n },\n {\n seriesName: 'Interest Rate',\n time: 'Dec-2008',\n identifier: 'L',\n timeFormat: '%b-%Y',\n tooltext:\n 'Fed reduced the interest rates to sub 0.25% to manage the menace of longest economic downturn since World War 2'\n }\n ]\n };\n this.fetchData();\n }\n\n // In this method we will create our DataStore and using that we will create a custom DataTable which takes two\n // parameters, one is data another is schema.\n fetchData() {\n var jsonify = res => res.json();\n var dataFetch = fetch(\n 'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/annotating-single-data-point-data.json'\n ).then(jsonify);\n var schemaFetch = fetch(\n 'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/annotating-single-data-point-schema.json'\n ).then(jsonify);\n\n Promise.all([dataFetch, schemaFetch]).then(res => {\n const data = res[0];\n const schema = res[1];\n // First we are creating a DataStore\n const fusionDataStore = new FusionCharts.DataStore();\n // After that we are creating a DataTable by passing our data and schema as arguments\n const fusionTable = fusionDataStore.createDataTable(data, schema);\n // Afet that we simply mutated our timeseries datasource by attaching the above\n // DataTable into its data property.\n this.dataSource.data = fusionTable;\n });\n }\n\n ngOnInit() {\n \n }\n}\n`,
+ template: `\n\n\n`
+};
+
+fcDemos['ex34'] = {
+ type: 'FusionTime',
+ title: 'Single event overlay',
+ description:
+ 'Plotting an event marker to indicate an event for a specific date.',
+ data: `// A shortened version of the data is given here.\n// Please check the link below to see the complete data:\n// https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/single-event-overlay-data.json\n[\n [\n "Jan-1980",\n 14\n ],\n [\n "Feb-1980",\n 20\n ],\n [\n "Mar-1980",\n 20\n ],\n [\n "Apr-1980",\n 11.5\n ],\n [\n "May-1980",\n 11.5\n ],\n [\n "Jun-1980",\n 9.75\n ],\n [\n "Jul-1980",\n 9.5\n ],\n [\n "Aug-1980",\n 10\n ],\n [\n "Sep-1980",\n 12\n ],\n [\n "Oct-1980",\n 13.75\n ],\n [\n "Nov-1980",\n 18\n ],\n [\n "Dec-1980",\n 18\n ],\n [\n "Jan-1981",\n 16\n ],\n [\n "Feb-1981",\n 16\n ],\n [\n "Mar-1981",\n 16\n ],\n [\n "Apr-1981",\n 16\n ],\n [\n "May-1981",\n 20\n ],\n [\n "Jun-1981",\n 20\n ],\n [\n "Jul-1981",\n 20\n ],\n [\n "Aug-1981",\n 20\n ],\n [\n "Sep-1981",\n 20\n ],\n [\n "Oct-1981",\n 20\n ],\n [\n "Nov-1981",\n 13\n ],\n [\n "Dec-1981",\n 12\n ],\n [\n "Jan-1982",\n 15\n ],\n [\n "Feb-1982",\n 15\n ],\n [\n "Mar-1982",\n 15\n ],\n [\n "Apr-1982",\n 13\n ],\n [\n "May-1982",\n 13\n ],\n [\n "Jun-1982",\n 13\n ],\n [\n "Jul-1982",\n 12\n ],\n [\n "Aug-1982",\n 9.5\n ],\n [\n "Sep-1982",\n 10\n ],\n [\n "Oct-1982",\n 9.5\n ],\n [\n "Nov-1982",\n 9\n ],\n [\n "Dec-1982",\n 8.5\n ],\n [\n "Jan-1983",\n 8.5\n ],\n [\n "Feb-1983",\n 8.5\n ],\n [\n "Mar-1983",\n 8.5\n ],\n [\n "Apr-1983",\n 8.5\n ],\n [\n "May-1983",\n 9.63\n ],\n [\n "Jun-1983",\n 9.63\n ],\n [\n "Jul-1983",\n 9.63\n ],\n [\n "Aug-1983",\n 9.5\n ],\n [\n "Sep-1983",\n 9.5\n ],\n [\n "Oct-1983",\n 9.5\n ],\n [\n "Nov-1983",\n 9.5\n ],\n [\n "Dec-1983",\n 9.5\n ],\n [\n "Jan-1984",\n 9.5\n ],\n [\n "Feb-1984",\n 9.5\n ],\n [\n "Mar-1984",\n 10.5\n ],\n [\n "Apr-1984",\n 10.5\n ],\n [\n "May-1984",\n 10.5\n ],\n [\n "Dec-2001",\n 1.75\n ],\n [\n "Jan-2002",\n 1.75\n ],\n [\n "Feb-2002",\n 1.75\n ],\n [\n "Mar-2002",\n 1.75\n ],\n [\n "Apr-2002",\n 1.75\n ],\n [\n "May-2002",\n 1.75\n ],\n [\n "Jun-2002",\n 1.75\n ],\n [\n "Jul-2002",\n 1.75\n ],\n [\n "Aug-2002",\n 1.75\n ],\n [\n "Sep-2002",\n 1.75\n ],\n [\n "Oct-2002",\n 1.75\n ],\n [\n "Nov-2002",\n 1.25\n ],\n [\n "Dec-2002",\n 1.25\n ],\n [\n "Jan-2003",\n 1.25\n ],\n [\n "Feb-2003",\n 1.25\n ],\n [\n "Mar-2003",\n 1.25\n ],\n [\n "Apr-2003",\n 1.25\n ],\n [\n "May-2003",\n 1.25\n ],\n [\n "Jun-2003",\n 1\n ],\n [\n "Jul-2003",\n 1\n ],\n [\n "Aug-2003",\n 1\n ],\n [\n "Sep-2003",\n 1\n ],\n [\n "Oct-2003",\n 1\n ],\n [\n "Nov-2003",\n 1\n ],\n [\n "Dec-2003",\n 1\n ],\n [\n "Jan-2004",\n 1\n ],\n [\n "Feb-2004",\n 1\n ],\n [\n "Mar-2004",\n 1\n ],\n [\n "Apr-2004",\n 1\n ],\n [\n "May-2004",\n 1\n ],\n [\n "Jun-2004",\n 1.25\n ],\n [\n "Jul-2004",\n 1.25\n ],\n [\n "Aug-2004",\n 1.5\n ],\n [\n "Sep-2004",\n 1.75\n ],\n [\n "Oct-2004",\n 1.75\n ],\n [\n "Nov-2004",\n 2\n ],\n [\n "Dec-2004",\n 2.25\n ],\n [\n "Jan-2005",\n 2.25\n ],\n [\n "Feb-2005",\n 2.5\n ],\n [\n "Mar-2005",\n 2.75\n ],\n [\n "Apr-2005",\n 2.75\n ],\n [\n "May-2005",\n 3\n ],\n [\n "Jun-2005",\n 3.25\n ],\n [\n "Jul-2005",\n 3.25\n ],\n [\n "Aug-2005",\n 3.5\n ],\n [\n "Sep-2005",\n 3.75\n ],\n [\n "Oct-2005",\n 3.75\n ],\n [\n "Nov-2005",\n 4\n ],\n [\n "Dec-2005",\n 4.25\n ],\n [\n "Jan-2006",\n 4.5\n ],\n [\n "Feb-2006",\n 4.5\n ],\n [\n "Mar-2006",\n 4.75\n ],\n [\n "Apr-2006",\n 4.75\n ],\n [\n "May-2006",\n 5\n ],\n [\n "Jun-2006",\n 5.25\n ],\n [\n "Jul-2006",\n 5.25\n ],\n [\n "Aug-2006",\n 5.25\n ],\n [\n "Sep-2006",\n 5.25\n ],\n [\n "Oct-2006",\n 5.25\n ],\n [\n "Nov-2006",\n 5.25\n ],\n [\n "Dec-2006",\n 5.25\n ],\n [\n "Jan-2007",\n 5.25\n ],\n [\n "Feb-2007",\n 5.25\n ],\n [\n "Mar-2007",\n 5.25\n ],\n [\n "Apr-2007",\n 5.25\n ],\n [\n "May-2007",\n 5.25\n ],\n [\n "Jun-2007",\n 5.25\n ],\n [\n "Jul-2007",\n 5.25\n ],\n [\n "Aug-2007",\n 5.25\n ],\n [\n "Sep-2007",\n 4.75\n ],\n [\n "Oct-2007",\n 4.5\n ],\n [\n "Nov-2007",\n 4.5\n ],\n [\n "Dec-2007",\n 4.25\n ],\n [\n "Jan-2008",\n 3\n ],\n [\n "Feb-2008",\n 3\n ],\n [\n "Mar-2008",\n 2.25\n ],\n [\n "Apr-2008",\n 2\n ],\n [\n "May-2008",\n 2\n ],\n [\n "Jun-2008",\n 2\n ],\n [\n "Jul-2008",\n 2\n ],\n [\n "Aug-2008",\n 2\n ],\n [\n "Sep-2008",\n 2\n ],\n [\n "Oct-2008",\n 1\n ],\n [\n "Nov-2008",\n 1\n ],\n [\n "Dec-2008",\n 0.125\n ],\n [\n "Jan-2009",\n 0.125\n ],\n [\n "Feb-2009",\n 0.125\n ],\n [\n "Mar-2009",\n 0.125\n ],\n [\n "Apr-2009",\n 0.125\n ],\n [\n "May-2009",\n 0.125\n ],\n [\n "Jun-2009",\n 0.125\n ],\n [\n "Jul-2009",\n 0.125\n ],\n [\n "Aug-2009",\n 0.125\n ],\n [\n "Sep-2009",\n 0.125\n ],\n [\n "Oct-2009",\n 0.125\n ],\n [\n "Nov-2009",\n 0.125\n ],\n [\n "Dec-2009",\n 0.125\n ],\n [\n "Jan-2010",\n 0.125\n ],\n [\n "Feb-2010",\n 0.125\n ],\n [\n "Mar-2010",\n 0.125\n ],\n [\n "Apr-2010",\n 0.125\n ],\n [\n "May-2010",\n 0.125\n ],\n [\n "Jun-2010",\n 0.125\n ],\n [\n "Jul-2010",\n 0.125\n ],\n [\n "Aug-2010",\n 0.125\n ],\n [\n "Sep-2010",\n 0.125\n ],\n [\n "Oct-2010",\n 0.125\n ],\n [\n "Nov-2010",\n 0.125\n ],\n [\n "Dec-2010",\n 0.125\n ],\n [\n "Jan-2011",\n 0.125\n ],\n [\n "Feb-2011",\n 0.125\n ],\n [\n "Mar-2011",\n 0.125\n ],\n [\n "Apr-2011",\n 0.125\n ],\n [\n "May-2011",\n 0.125\n ],\n [\n "Jun-2011",\n 0.125\n ],\n [\n "Jul-2011",\n 0.125\n ],\n [\n "Aug-2011",\n 0.125\n ],\n [\n "Sep-2011",\n 0.125\n ],\n [\n "Oct-2011",\n 0.125\n ]\n]`,
+ schema: `[\n {\n "name": "Time",\n "type": "date",\n "format": "%b-%Y"\n },\n {\n "name": "Interest Rate",\n "type": "number"\n }\n]`,
+ module: `// Setup needed in app.module.ts\n\nimport { NgModule, enableProdMode } from '@angular/core'\nimport { AppComponent } from './app.component';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FusionChartsModule } from 'angular-fusioncharts';\n\n// Load FusionCharts\nimport * as FusionCharts from 'fusioncharts';\n// Load Charts module\nimport * as Charts from 'fusioncharts/fusioncharts.charts';\n// Load themes\nimport * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';\n\n// Add dependencies to FusionChartsModule\nFusionChartsModule.fcRoot(\n FusionCharts,\n Charts,\n FusionTheme\n)\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n FusionChartsModule\n ],\n providers: [\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule {\n}\n`,
+ component: `// In app.component.ts\nimport { Component, NgZone } from '@angular/core';\nimport * as FusionCharts from 'fusioncharts';\n\n@Component({\n selector: 'app',\n templateUrl: './app.component.html'\n})\nexport class AppComponent {\n dataSource: any;\n type: string;\n width: string;\n height: string;\n constructor() {\n this.type = 'timeseries';\n this.width = '100%';\n this.height = '400';\n // This is the dataSource of the chart\n this.dataSource = {\n data: null,\n yAxis: null,\n xAxis: null,\n caption: null,\n subCaption: null\n };\n this.fetchData();\n }\n\n // In this method we will create our DataStore and using that we will create a custom DataTable which takes two\n // parameters, one is data another is schema.\n fetchData() {\n var jsonify = res => res.json();\n var dataFetch = fetch(\n 'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/single-event-overlay-data.json'\n ).then(jsonify);\n var schemaFetch = fetch(\n 'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/single-event-overlay-schema.json'\n ).then(jsonify);\n\n Promise.all([dataFetch, schemaFetch]).then(res => {\n const data = res[0];\n const schema = res[1];\n // First we are creating a DataStore\n const fusionDataStore = new FusionCharts.DataStore();\n // After that we are creating a DataTable by passing our data and schema as arguments\n const fusionTable = fusionDataStore.createDataTable(data, schema);\n // Afet that we simply mutated our timeseries datasource by attaching the above\n // DataTable into its data property.\n this.dataSource.data = fusionTable;\n this.dataSource.yAxis = {\n plot: 'Interest Rate',\n format: {\n suffix: '%'\n },\n title: 'Interest Rate'\n };\n this.dataSource.xAxis = {\n plot: 'Time',\n timemarker: [\n {\n start: 'Mar-1980',\n label: 'US inflation peaked at 14.8%.',\n timeFormat: '%b-%Y',\n style: {\n marker: {\n fill: '#D0D6F4'\n }\n }\n },\n {\n start: 'May-1981',\n label:\n 'To control inflation, the Fed started {br} raising interest rates to over {br} 20%.',\n timeFormat: '%b-%Y'\n },\n {\n start: 'Jun-1983',\n label:\n 'By proactive actions of Mr.Volcker, {br} the inflation falls to 2.4% {br} from the peak of over 14% {br} just three years ago.',\n timeFormat: '%b-%Y',\n style: {\n marker: {\n fill: '#D0D6F4'\n }\n }\n },\n {\n start: 'Oct-1987',\n label:\n 'The Dow Jones Industrial Average lost {br} about 30% of it’s value.',\n timeFormat: '%b-%Y',\n style: {\n marker: {\n fill: '#FBEFCC'\n }\n }\n },\n {\n start: 'Jan-1989',\n label: 'George H.W. Bush becomes {br} the 41st president of US!',\n timeFormat: '%b-%Y'\n },\n {\n start: 'Aug-1990',\n label:\n 'The oil prices spiked to $35 {br} per barrel from $15 per barrel {br} because of the Gulf War.',\n timeFormat: '%b-%Y'\n },\n {\n start: 'Dec-1996',\n label:\n 'Alan Greenspan warns of the dangers {br} of "irrational exuberance" in financial markets, {br} an admonition that goes unheeded',\n timeFormat: '%b-%Y'\n },\n {\n start: 'Sep-2008',\n label: 'Lehman Brothers collapsed!',\n timeFormat: '%b-%Y'\n },\n {\n start: 'Mar-2009',\n label:\n 'The net worth of US households {br} stood at a trough of $55 trillion.',\n timeFormat: '%b-%Y',\n style: {\n marker: {\n fill: '#FBEFCC'\n }\n }\n },\n {\n start: 'Oct-2009',\n label: 'Unemployment rate peaked {br} in given times to 10%.',\n timeFormat: '%b-%Y'\n }\n ]\n };\n this.dataSource.caption = {\n text: 'Interest Rate Analysis'\n };\n this.dataSource.subCaption = {\n text: 'Federal Reserve (USA)'\n };\n });\n }\n\n ngOnInit() {}\n}\n`,
+ template: `\n\n\n`
+};
+
+fcDemos['ex35'] = {
+ type: 'FusionTime',
+ title: 'Date range event overlay',
+ description:
+ 'Plotting an event marker as a band, to indicate an event that spans a data range.',
+ data: `// A shortened version of the data is given here.\n// Please check the link below to see the complete data:\n// https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/date-range-event-overlay-data.json\n[\n [\n "Jan-1980",\n 14\n ],\n [\n "Feb-1980",\n 20\n ],\n [\n "Mar-1980",\n 20\n ],\n [\n "Apr-1980",\n 11.5\n ],\n [\n "May-1980",\n 11.5\n ],\n [\n "Jun-1980",\n 9.75\n ],\n [\n "Jul-1980",\n 9.5\n ],\n [\n "Aug-1980",\n 10\n ],\n [\n "Sep-1980",\n 12\n ],\n [\n "Oct-1980",\n 13.75\n ],\n [\n "Nov-1980",\n 18\n ],\n [\n "Dec-1980",\n 18\n ],\n [\n "Jan-1981",\n 16\n ],\n [\n "Feb-1981",\n 16\n ],\n [\n "Mar-1981",\n 16\n ],\n [\n "Apr-1981",\n 16\n ],\n [\n "May-1981",\n 20\n ],\n [\n "Jun-1981",\n 20\n ],\n [\n "Jul-1981",\n 20\n ],\n [\n "Aug-1981",\n 20\n ],\n [\n "Sep-1981",\n 20\n ],\n [\n "Oct-1981",\n 20\n ],\n [\n "Nov-1981",\n 13\n ],\n [\n "Dec-1981",\n 12\n ],\n [\n "Jan-1982",\n 15\n ],\n [\n "Feb-1982",\n 15\n ],\n [\n "Mar-1982",\n 15\n ],\n [\n "Apr-1982",\n 13\n ],\n [\n "May-1982",\n 13\n ],\n [\n "Jun-1982",\n 13\n ],\n [\n "Jul-1982",\n 12\n ],\n [\n "Aug-1982",\n 9.5\n ],\n [\n "Sep-1982",\n 10\n ],\n [\n "Oct-1982",\n 9.5\n ],\n [\n "Nov-1982",\n 9\n ],\n [\n "Dec-1982",\n 8.5\n ],\n [\n "Jan-1983",\n 8.5\n ],\n [\n "Feb-1983",\n 8.5\n ],\n [\n "Mar-1983",\n 8.5\n ],\n [\n "Apr-1983",\n 8.5\n ],\n [\n "May-1983",\n 9.63\n ],\n [\n "Jun-1983",\n 9.63\n ],\n [\n "Jul-1983",\n 9.63\n ],\n [\n "Aug-1983",\n 9.5\n ],\n [\n "Sep-1983",\n 9.5\n ],\n [\n "Oct-1983",\n 9.5\n ],\n [\n "Nov-1983",\n 9.5\n ],\n [\n "Dec-1983",\n 9.5\n ],\n [\n "Jan-1984",\n 9.5\n ],\n [\n "Feb-1984",\n 9.5\n ],\n [\n "Mar-1984",\n 10.5\n ],\n [\n "Apr-1984",\n 10.5\n ],\n [\n "May-1984",\n 10.5\n ],\n [\n "Jun-1984",\n 11\n ],\n [\n "Jul-1984",\n 11.75\n ],\n [\n "Aug-1984",\n 11.75\n ],\n [\n "Sep-1984",\n 10\n ],\n [\n "Oct-1984",\n 10\n ],\n [\n "Nov-1984",\n 9\n ],\n [\n "Dec-1984",\n 8.25\n ],\n [\n "Jan-1985",\n 8.25\n ],\n [\n "Feb-1985",\n 9\n ],\n [\n "Mar-1985",\n 8.5\n ],\n [\n "Apr-1985",\n 8.25\n ],\n [\n "May-1985",\n 7.75\n ],\n [\n "Jun-1985",\n 7.75\n ],\n [\n "Jul-1985",\n 8\n ],\n [\n "Aug-1985",\n 8\n ],\n [\n "Sep-1985",\n 8\n ],\n [\n "Oct-1985",\n 8\n ],\n [\n "Nov-1985",\n 8\n ],\n [\n "Dec-1985",\n 7.75\n ],\n [\n "Jan-1986",\n 7.75\n ],\n [\n "Feb-1986",\n 7.75\n ],\n [\n "Mar-1986",\n 7.25\n ],\n [\n "Apr-1986",\n 6.75\n ],\n [\n "May-1986",\n 6.88\n ],\n [\n "Jun-1986",\n 6.88\n ],\n [\n "Jul-1986",\n 6.38\n ],\n [\n "Aug-1986",\n 5.88\n ],\n [\n "Sep-1986",\n 5.88\n ],\n [\n "Oct-1986",\n 5.88\n ],\n [\n "Nov-1986",\n 5.88\n ],\n [\n "Dec-1986",\n 6\n ],\n [\n "Jan-1987",\n 6\n ],\n [\n "Feb-1987",\n 6\n ],\n [\n "Mar-1987",\n 6\n ],\n [\n "Apr-1987",\n 6.75\n ],\n [\n "May-1987",\n 6.75\n ],\n [\n "Jun-1987",\n 6.75\n ],\n [\n "Jul-1987",\n 6.75\n ]\n]`,
+ schema: `[\n {\n "name": "Time",\n "type": "date",\n "format": "%b-%Y"\n },\n {\n "name": "Interest Rate",\n "type": "number"\n }\n]`,
+ module: `// Setup needed in app.module.ts\n\nimport { NgModule, enableProdMode } from '@angular/core'\nimport { AppComponent } from './app.component';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FusionChartsModule } from 'angular-fusioncharts';\n\n// Load FusionCharts\nimport * as FusionCharts from 'fusioncharts';\n// Load Charts module\nimport * as Charts from 'fusioncharts/fusioncharts.charts';\n// Load themes\nimport * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';\n\n// Add dependencies to FusionChartsModule\nFusionChartsModule.fcRoot(\n FusionCharts,\n Charts,\n FusionTheme\n)\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n FusionChartsModule\n ],\n providers: [\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule {\n}\n`,
+ component: `// In app.component.ts\nimport { Component, NgZone } from '@angular/core';\nimport * as FusionCharts from 'fusioncharts';\n\n@Component({\n selector: 'app',\n templateUrl: './app.component.html'\n})\nexport class AppComponent {\n dataSource: any;\n type: string;\n width: string;\n height: string;\n constructor() {\n this.type = 'timeseries';\n this.width = '100%';\n this.height = '400';\n // This is the dataSource of the chart\n this.dataSource = {\n data: null,\n caption: {\n text: 'Interest Rate Analysis'\n },\n subCaption: {\n text: 'Federal Reserve (USA)'\n },\n yAxis: [\n {\n plot: 'Interest Rate',\n format: {\n suffix: '%'\n },\n title: 'Interest Rate'\n }\n ],\n xAxis: {\n plot: 'Time',\n timemarker: [\n {\n start: 'Jul-1981',\n end: 'Nov-1982',\n label:\n 'Economic downturn was triggered by {br} tight monetary policy in an effort to {br} fight mounting inflation.',\n timeFormat: '%b-%Y'\n },\n {\n start: 'Jul-1990',\n end: 'Mar-1991',\n label:\n 'This eight month recession period {br} was characterized by a sluggish employment recovery, {br} most commonly referred to as a jobless recovery.',\n timeFormat: '%b-%Y'\n },\n {\n start: 'Jun-2004',\n end: 'Jul-2006',\n label:\n 'The Fed after raising interest rates {br} at 17 consecutive meetings, ends its campaign {br} to slow the economy and forestall inflation.',\n timeFormat: '%b-%Y'\n },\n {\n start: 'Dec-2007',\n end: 'Jun-2009',\n label:\n 'Recession caused by the worst {br} collapse of financial system in recent {br} times.',\n timeFormat: '%b-%Y'\n }\n ]\n }\n };\n this.fetchData();\n }\n\n // In this method we will create our DataStore and using that we will create a custom DataTable which takes two\n // parameters, one is data another is schema.\n fetchData() {\n var jsonify = res => res.json();\n var dataFetch = fetch(\n 'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/date-range-event-overlay-data.json'\n ).then(jsonify);\n var schemaFetch = fetch(\n 'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/date-range-event-overlay-schema.json'\n ).then(jsonify);\n\n Promise.all([dataFetch, schemaFetch]).then(res => {\n const data = res[0];\n const schema = res[1];\n // First we are creating a DataStore\n const fusionDataStore = new FusionCharts.DataStore();\n // After that we are creating a DataTable by passing our data and schema as arguments\n const fusionTable = fusionDataStore.createDataTable(data, schema);\n // Afet that we simply mutated our timeseries datasource by attaching the above\n // DataTable into its data property.\n this.dataSource.data = fusionTable;\n });\n }\n\n ngOnInit() {}\n}\n`,
+ template: `\n\n\n`
+};
+
+fcDemos['ex36'] = {
+ type: 'FusionTime',
+ title: 'Adding a reference line',
+ description:
+ 'Adding a static reference line (by value) to indicate targets or threshold.',
+ data: `// A shortened version of the data is given here.\n// Please check the link below to see the complete data:\n// https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/adding-a-reference-line-data.json\n[\n [\n "3/10/2004 18:00:00",\n 2.6,\n 150,\n 11.9,\n 113,\n 13.6\n ],\n [\n "3/10/2004 19:00:00",\n 2,\n 112,\n 9.4,\n 92,\n 13.3\n ],\n [\n "3/10/2004 20:00:00",\n 2.2,\n 88,\n 9,\n 114,\n 11.9\n ],\n [\n "3/10/2004 21:00:00",\n 2.2,\n 80,\n 9.2,\n 122,\n 11\n ],\n [\n "3/10/2004 22:00:00",\n 1.6,\n 51,\n 6.5,\n 116,\n 11.2\n ],\n [\n "3/10/2004 23:00:00",\n 1.2,\n 38,\n 4.7,\n 96,\n 11.2\n ],\n [\n "3/11/2004 0:00:00",\n 1.2,\n 31,\n 3.6,\n 77,\n 11.3\n ],\n [\n "3/11/2004 1:00:00",\n 1,\n 31,\n 3.3,\n 76,\n 10.7\n ],\n [\n "3/11/2004 2:00:00",\n 0.9,\n 24,\n 2.3,\n 60,\n 10.7\n ],\n [\n "3/11/2004 3:00:00",\n 0.6,\n 19,\n 1.7,\n 45,\n 10.3\n ],\n [\n "3/11/2004 4:00:00",\n 2,\n 14,\n 1.3,\n 34,\n 10.1\n ],\n [\n "3/11/2004 5:00:00",\n 0.7,\n 8,\n 1.1,\n 28,\n 11\n ],\n [\n "3/11/2004 6:00:00",\n 0.7,\n 16,\n 1.6,\n 48,\n 10.5\n ],\n [\n "3/11/2004 7:00:00",\n 1.1,\n 29,\n 3.2,\n 82,\n 10.2\n ],\n [\n "3/11/2004 8:00:00",\n 2,\n 64,\n 8,\n 112,\n 10.8\n ],\n [\n "3/11/2004 9:00:00",\n 2.2,\n 87,\n 9.5,\n 101,\n 10.5\n ],\n [\n "3/11/2004 10:00:00",\n 1.7,\n 77,\n 6.3,\n 98,\n 10.8\n ],\n [\n "3/11/2004 11:00:00",\n 1.5,\n 43,\n 5,\n 92,\n 10.5\n ],\n [\n "3/11/2004 12:00:00",\n 1.6,\n 61,\n 5.2,\n 95,\n 9.5\n ],\n [\n "3/11/2004 13:00:00",\n 1.9,\n 63,\n 7.3,\n 112,\n 8.3\n ],\n [\n "3/11/2004 14:00:00",\n 2.9,\n 164,\n 11.5,\n 128,\n 8\n ],\n [\n "3/11/2004 15:00:00",\n 2.2,\n 79,\n 8.8,\n 126,\n 8.3\n ],\n [\n "3/11/2004 16:00:00",\n 2.2,\n 95,\n 8.3,\n 131,\n 9.7\n ],\n [\n "3/11/2004 17:00:00",\n 2.9,\n 150,\n 11.2,\n 135,\n 9.8\n ],\n [\n "3/11/2004 18:00:00",\n 4.8,\n 307,\n 20.8,\n 151,\n 10.3\n ],\n [\n "3/11/2004 19:00:00",\n 6.9,\n 461,\n 27.4,\n 172,\n 9.7\n ],\n [\n "3/11/2004 20:00:00",\n 6.1,\n 401,\n 24,\n 165,\n 9.6\n ],\n [\n "3/11/2004 21:00:00",\n 3.9,\n 197,\n 12.8,\n 136,\n 9.1\n ],\n [\n "3/11/2004 22:00:00",\n 1.5,\n 61,\n 4.7,\n 85,\n 8.2\n ],\n [\n "3/11/2004 23:00:00",\n 1,\n 26,\n 2.6,\n 53,\n 8.2\n ],\n [\n "3/12/2004 0:00:00",\n 1.7,\n 55,\n 5.9,\n 97,\n 8.3\n ],\n [\n "3/12/2004 1:00:00",\n 1.9,\n 53,\n 6.4,\n 110,\n 7.7\n ],\n [\n "3/12/2004 2:00:00",\n 1.4,\n 40,\n 4.1,\n 91,\n 7.1\n ],\n [\n "3/12/2004 3:00:00",\n 0.8,\n 21,\n 1.9,\n 70,\n 7\n ],\n [\n "3/12/2004 4:00:00",\n 5,\n 10,\n 1.1,\n 32,\n 6.1\n ],\n [\n "3/12/2004 5:00:00",\n 0.6,\n 7,\n 1,\n 44,\n 6.3\n ],\n [\n "3/12/2004 6:00:00",\n 0.8,\n 17,\n 1.8,\n 71,\n 6.8\n ],\n [\n "3/12/2004 7:00:00",\n 1.4,\n 33,\n 4.4,\n 104,\n 6.4\n ],\n [\n "3/14/2004 1:00:00",\n 2.8,\n 131,\n 11.9,\n 119,\n 14.6\n ],\n [\n "3/14/2004 2:00:00",\n 2.5,\n 92,\n 8.6,\n 104,\n 12.5\n ],\n [\n "3/14/2004 3:00:00",\n 2.4,\n 132,\n 9.7,\n 97,\n 11.6\n ],\n [\n "3/14/2004 4:00:00",\n 3,\n 56,\n 5.2,\n 82,\n 12.1\n ],\n [\n "3/14/2004 5:00:00",\n 1.2,\n 32,\n 3.7,\n 70,\n 11.5\n ],\n [\n "3/14/2004 6:00:00",\n 1,\n 29,\n 2.5,\n 63,\n 11.6\n ],\n [\n "3/14/2004 7:00:00",\n 0.9,\n 27,\n 2.4,\n 67,\n 10.4\n ],\n [\n "3/14/2004 8:00:00",\n 1.4,\n 36,\n 4.2,\n 84,\n 11.6\n ],\n [\n "3/14/2004 9:00:00",\n 1.6,\n 57,\n 6.4,\n 83,\n 12.4\n ],\n [\n "3/14/2004 10:00:00",\n 2.2,\n 129,\n 8.6,\n 98,\n 14.5\n ],\n [\n "3/14/2004 11:00:00",\n 2.8,\n 148,\n 10.9,\n 114,\n 16.9\n ],\n [\n "3/14/2004 12:00:00",\n 2.8,\n 145,\n 10.7,\n 119,\n 19.3\n ],\n [\n "3/14/2004 13:00:00",\n 2,\n 93,\n 7.5,\n 104,\n 21.2\n ],\n [\n "3/14/2004 14:00:00",\n 1.8,\n 84,\n 7.5,\n 102,\n 21.4\n ],\n [\n "3/14/2004 15:00:00",\n 1.9,\n 99,\n 8.2,\n 107,\n 21.9\n ],\n [\n "3/14/2004 16:00:00",\n 3,\n 150,\n 11.9,\n 129,\n 22.2\n ],\n [\n "3/14/2004 17:00:00",\n 2.9,\n 156,\n 12,\n 128,\n 21.3\n ],\n [\n "3/14/2004 18:00:00",\n 2.5,\n 122,\n 12.2,\n 121,\n 19.7\n ],\n [\n "3/14/2004 19:00:00",\n 4.6,\n 262,\n 20.6,\n 157,\n 18.4\n ],\n [\n "3/14/2004 20:00:00",\n 5.9,\n 341,\n 23.1,\n 173,\n 17.6\n ],\n [\n "3/14/2004 21:00:00",\n 3.4,\n 214,\n 14.7,\n 146,\n 16.7\n ],\n [\n "3/14/2004 22:00:00",\n 2.1,\n 100,\n 9,\n 121,\n 16.3\n ],\n [\n "3/14/2004 23:00:00",\n 2.2,\n 79,\n 8.8,\n 119,\n 14.7\n ],\n [\n "3/15/2004 0:00:00",\n 1.8,\n 66,\n 7.4,\n 99,\n 14.8\n ],\n [\n "3/15/2004 1:00:00",\n 1.8,\n 73,\n 6.9,\n 93,\n 14\n ],\n [\n "3/15/2004 2:00:00",\n 1.8,\n 66,\n 7,\n 88,\n 13.4\n ],\n [\n "3/15/2004 3:00:00",\n 1.1,\n 44,\n 4.4,\n 80,\n 12.6\n ],\n [\n "3/15/2004 4:00:00",\n 9,\n 44,\n 4,\n 71,\n 12.3\n ],\n [\n "3/15/2004 5:00:00",\n 1,\n 39,\n 3.9,\n 74,\n 11.9\n ],\n [\n "3/15/2004 6:00:00",\n 1.4,\n 51,\n 6.4,\n 80,\n 11.4\n ],\n [\n "3/15/2004 7:00:00",\n 2.2,\n 107,\n 9.7,\n 89,\n 11.3\n ],\n [\n "3/15/2004 8:00:00",\n 5.5,\n 336,\n 25.9,\n 114,\n 12.4\n ],\n [\n "3/15/2004 9:00:00",\n 8.1,\n 618,\n 36.7,\n 149,\n 14.8\n ],\n [\n "3/15/2004 10:00:00",\n 5.8,\n 438,\n 26.6,\n 157,\n 17.4\n ],\n [\n "3/15/2004 11:00:00",\n 4.2,\n 334,\n 20.1,\n 155,\n 19.8\n ],\n [\n "3/15/2004 12:00:00",\n 3.1,\n 221,\n 14.1,\n 134,\n 22\n ],\n [\n "3/15/2004 13:00:00",\n 2.9,\n 207,\n 14.9,\n 119,\n 23.3\n ],\n [\n "3/15/2004 14:00:00",\n 2.9,\n 191,\n 15.4,\n 111,\n 23.9\n ],\n [\n "3/15/2004 15:00:00",\n 2.5,\n 185,\n 12.1,\n 104,\n 24.4\n ],\n [\n "3/15/2004 16:00:00",\n 2.3,\n 141,\n 11.5,\n 99,\n 24.4\n ],\n [\n "3/15/2004 17:00:00",\n 2.8,\n 214,\n 14.8,\n 110,\n 23.8\n ],\n [\n "3/15/2004 18:00:00",\n 6.1,\n 471,\n 32.1,\n 162,\n 22.5\n ],\n [\n "3/15/2004 19:00:00",\n 8,\n 685,\n 39.2,\n 187,\n 20.4\n ],\n [\n "3/15/2004 20:00:00",\n 6.5,\n 538,\n 31,\n 165,\n 18.3\n ],\n [\n "3/15/2004 21:00:00",\n 4.2,\n 319,\n 19.9,\n 145,\n 16.7\n ],\n [\n "3/15/2004 22:00:00",\n 3.2,\n 224,\n 15.3,\n 125,\n 15.7\n ],\n [\n "3/15/2004 23:00:00",\n 1.4,\n 67,\n 6.9,\n 101,\n 15.3\n ],\n [\n "3/16/2004 0:00:00",\n 2.1,\n 155,\n 11.1,\n 103,\n 14.1\n ],\n [\n "3/16/2004 1:00:00",\n 1.2,\n 49,\n 5.4,\n 88,\n 14.8\n ],\n [\n "3/16/2004 2:00:00",\n 0.8,\n 29,\n 2.8,\n 61,\n 14.8\n ],\n [\n "3/16/2004 3:00:00",\n 0.7,\n 25,\n 2.3,\n 60,\n 13.6\n ],\n [\n "3/16/2004 4:00:00",\n 10,\n 25,\n 2.6,\n 59,\n 12.3\n ],\n [\n "3/16/2004 5:00:00",\n 0.6,\n 17,\n 2,\n 52,\n 12.8\n ],\n [\n "3/16/2004 6:00:00",\n 0.9,\n 27,\n 3.5,\n 64,\n 11.2\n ],\n [\n "3/16/2004 7:00:00",\n 1.3,\n 50,\n 5.1,\n 70,\n 11\n ],\n [\n "3/16/2004 8:00:00",\n 3.4,\n 218,\n 16.2,\n 97,\n 11.7\n ],\n [\n "3/16/2004 9:00:00",\n 3.7,\n 285,\n 19.7,\n 95,\n 13.6\n ],\n [\n "3/16/2004 10:00:00",\n 5.3,\n 437,\n 25.1,\n 150,\n 17.8\n ],\n [\n "3/16/2004 11:00:00",\n 4.1,\n 327,\n 20,\n 162,\n 21.4\n ],\n [\n "3/16/2004 12:00:00",\n 3.3,\n 283,\n 18.3,\n 154,\n 24.4\n ]\n]`,
+ schema: `[\n {\n "name": "Time",\n "type": "date",\n "format": "%-m/%-d/%Y %H:%M:%S"\n },\n {\n "name": "Carbon mono-oxide (mg/m^3)",\n "type": "number"\n },\n {\n "name": "Non methane hydrocarbons (microg/m^3)",\n "type": "number"\n },\n {\n "name": "Benzene",\n "type": "number"\n },\n {\n "name": "Nitrogen dioxide",\n "type": "number"\n },\n {\n "name": "Temperature",\n "type": "number"\n }\n]`,
+ module: `// Setup needed in app.module.ts\n\nimport { NgModule, enableProdMode } from '@angular/core'\nimport { AppComponent } from './app.component';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FusionChartsModule } from 'angular-fusioncharts';\n\n// Load FusionCharts\nimport * as FusionCharts from 'fusioncharts';\n// Load Charts module\nimport * as Charts from 'fusioncharts/fusioncharts.charts';\n// Load themes\nimport * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';\n\n// Add dependencies to FusionChartsModule\nFusionChartsModule.fcRoot(\n FusionCharts,\n Charts,\n FusionTheme\n)\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n FusionChartsModule\n ],\n providers: [\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule {\n}\n`,
+ component: `// In app.component.ts\nimport { Component, NgZone } from '@angular/core';\nimport * as FusionCharts from 'fusioncharts';\n\n@Component({\n selector: 'app',\n templateUrl: './app.component.html'\n})\nexport class AppComponent {\n dataSource: any;\n type: string;\n width: string;\n height: string;\n constructor() {\n this.type = 'timeseries';\n this.width = '100%';\n this.height = '400';\n // This is the dataSource of the chart\n this.dataSource = {\n data: null,\n caption: {\n text: 'Temperature readings in Italy'\n },\n yAxis: [\n {\n plot: 'Temperature',\n title: 'Temperature',\n format: {\n suffix: '°C'\n },\n style: {\n title: {\n 'font-size': '14px'\n }\n },\n referenceLine: [\n {\n label: 'Controlled Temperature',\n value: '10'\n }\n ]\n }\n ]\n };\n this.fetchData();\n }\n\n // In this method we will create our DataStore and using that we will create a custom DataTable which takes two\n // parameters, one is data another is schema.\n fetchData() {\n var jsonify = res => res.json();\n var dataFetch = fetch(\n 'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/adding-a-reference-line-data.json'\n ).then(jsonify);\n var schemaFetch = fetch(\n 'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/adding-a-reference-line-schema.json'\n ).then(jsonify);\n\n Promise.all([dataFetch, schemaFetch]).then(res => {\n const data = res[0];\n const schema = res[1];\n // First we are creating a DataStore\n const fusionDataStore = new FusionCharts.DataStore();\n // After that we are creating a DataTable by passing our data and schema as arguments\n const fusionTable = fusionDataStore.createDataTable(data, schema);\n // Afet that we simply mutated our timeseries datasource by attaching the above\n // DataTable into its data property.\n this.dataSource.data = fusionTable;\n });\n }\n\n ngOnInit() {}\n}\n`,
+ template: `\n\n\n`
+};
+
+export default fcDemos;
diff --git a/src/app/fusioncharts/tabbedComponent/tabbed.code.component.ts b/src/app/fusioncharts/tabbedComponent/tabbed.code.component.ts
index fe98d6f..5d4aec4 100644
--- a/src/app/fusioncharts/tabbedComponent/tabbed.code.component.ts
+++ b/src/app/fusioncharts/tabbedComponent/tabbed.code.component.ts
@@ -1,28 +1,22 @@
-import {
- Component,
- Input
-} from '@angular/core';
-
-
+import { Component, Input } from '@angular/core';
@Component({
- selector:'tabbed-code',
+ selector: 'tabbed-code',
templateUrl: './tabbed.code.html'
})
export class TabbedCode {
@Input() moduleCode;
@Input() componentCode;
@Input() templateCode;
+ @Input() schemaCode;
+ @Input() dataCode;
cSelected = 'component';
- constructor () {}
+ constructor() {}
- ngOnInit(){
- }
+ ngOnInit() {}
- selectCode(type){
+ selectCode(type) {
this.cSelected = type;
}
-
-
-}
\ No newline at end of file
+}
diff --git a/src/app/fusioncharts/tabbedComponent/tabbed.code.html b/src/app/fusioncharts/tabbedComponent/tabbed.code.html
index 51b5bb4..03bca5f 100644
--- a/src/app/fusioncharts/tabbedComponent/tabbed.code.html
+++ b/src/app/fusioncharts/tabbedComponent/tabbed.code.html
@@ -1,49 +1,127 @@
-
-
-
-
-
-
-