diff --git a/src/app/fusioncharts/ex28/ex28.ts b/src/app/fusioncharts/ex28/ex28.ts index 6927e7e..4aa7082 100644 --- a/src/app/fusioncharts/ex28/ex28.ts +++ b/src/app/fusioncharts/ex28/ex28.ts @@ -27,21 +27,23 @@ export class Ex28 { // Initially data is set as null data: null, caption: { - text: 'Sales Analysis' + text: 'Web visits & downloads' }, subcaption: { - text: 'Grocery' + text: 'since 2015' }, yAxis: [ { - plot: { - value: 'Grocery Sales Value', - type: 'line' - }, - format: { - prefix: '$' - }, - title: 'Sale Value' + plot: [ + { + value: 'Downloads', + type: 'column' + }, + { + value: 'Web Visits', + type: 'line' + } + ] } ] }; diff --git a/src/app/fusioncharts/samplecode.ts b/src/app/fusioncharts/samplecode.ts index 5b1397d..d06f77e 100644 --- a/src/app/fusioncharts/samplecode.ts +++ b/src/app/fusioncharts/samplecode.ts @@ -410,7 +410,7 @@ fcDemos['ex28'] = { 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`, + 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: 'Web visits & downloads'\n },\n subcaption: {\n text: 'since 2015'\n },\n yAxis: [\n {\n plot: [\n {\n value: 'Downloads',\n type: 'column'\n },\n {\n value: 'Web Visits',\n type: 'line'\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/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` };