diff --git a/src/app/fusioncharts/samplecode.ts b/src/app/fusioncharts/samplecode.ts index d06f77e..efbca40 100644 --- a/src/app/fusioncharts/samplecode.ts +++ b/src/app/fusioncharts/samplecode.ts @@ -384,7 +384,7 @@ fcDemos['ex26'] = { 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]`, + schema: `[\n {\n "name": "Time",\n "type": "date",\n "format": "%d-%b-%y"\n },\n {\n "name": "Grocery 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';\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`