Skip to content

Commit a6b3ad7

Browse files
ashok1994ashok1994
authored
Merge pull request #54 from rohanoid5/sample-add/timeseries-samples
Added FusionTime Integration section
2 parents 324d005 + cf641b6 commit a6b3ad7

File tree

3 files changed

+156
-51
lines changed

3 files changed

+156
-51
lines changed

‎src/app/app.component.html‎

Lines changed: 101 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -687,10 +687,10 @@
687687
</div>
688688
</div>
689689
</div>
690-
<p class="code-desc">In the template</p>
690+
<p class="code-desc pt-1">In the template</p>
691691
<div class="row">
692-
<div class="col-12 pt-1">
693-
<div class="code-view mt-2">
692+
<div class="col-12">
693+
<div class="code-view">
694694
<div class="card-shadow">
695695
<div class="card-body p-0">
696696
<div class="code-panel">
@@ -712,6 +712,104 @@
712712
</div>
713713
</div>
714714

715+
<div class="row">
716+
<div class="col">
717+
<div class="h2 mt-2">Usage and integration of FusionTime</div>
718+
</div>
719+
</div>
720+
<div class="row">
721+
<div class="col-12">
722+
<p class="code-desc">From <code>fusioncharts@3.13.3-sr.1</code> and <code>angular-fusioncharts@3.0.0</code>, You can visualize timeseries data easily with angular.
723+
</p>
724+
</div>
725+
</div>
726+
<div class="row">
727+
<div class="col-12 pt-3">
728+
<div class="h5">
729+
<span>Setup for FusionTime
730+
</span>
731+
</div>
732+
</div>
733+
<div class="col-12">
734+
<div class="code-view mt-2">
735+
<div class="card-shadow">
736+
<div class="card-body p-0">
737+
<div class="code-panel">
738+
<div class="codeMirrorDiv" id="c3">
739+
<codemirror [(ngModel)]="setupFusionTime" [config]="{
740+
lineNumbers: true,
741+
theme:'dracula',
742+
tabSize: '4',
743+
smartIndent: true,
744+
readOnly: true,
745+
mode:'javascript'
746+
}">
747+
</codemirror>
748+
</div>
749+
</div>
750+
</div>
751+
</div>
752+
</div>
753+
</div>
754+
</div>
755+
<div class="row">
756+
<div class="col-12 pt-3">
757+
<div class="h5">
758+
<span>Component code
759+
</span>
760+
</div>
761+
</div>
762+
<div class="col-12">
763+
<div class="code-view mt-2">
764+
<div class="card-shadow">
765+
<div class="card-body p-0">
766+
<div class="code-panel">
767+
<div class="codeMirrorDiv" id="c3">
768+
<codemirror [(ngModel)]="fusionTimeComponentCode" [config]="{
769+
lineNumbers: true,
770+
theme:'dracula',
771+
tabSize: '4',
772+
smartIndent: true,
773+
readOnly: true,
774+
mode:'javascript'
775+
}">
776+
</codemirror>
777+
</div>
778+
</div>
779+
</div>
780+
</div>
781+
</div>
782+
</div>
783+
</div>
784+
<div class="row">
785+
<div class="col-12 pt-3">
786+
<div class="h5">
787+
<span>Template Code
788+
</span>
789+
</div>
790+
</div>
791+
<div class="col-12">
792+
<div class="code-view mt-2">
793+
<div class="card-shadow">
794+
<div class="card-body p-0">
795+
<div class="code-panel">
796+
<div class="codeMirrorDiv" id="c3">
797+
<codemirror [(ngModel)]="fusionTimeTemplateCode" [config]="{
798+
lineNumbers: true,
799+
theme:'dracula',
800+
tabSize: '4',
801+
smartIndent: true,
802+
readOnly: true,
803+
mode:'htmlembedded'
804+
}">
805+
</codemirror>
806+
</div>
807+
</div>
808+
</div>
809+
</div>
810+
</div>
811+
</div>
812+
</div>
715813

716814
<div class="row">
717815
<div class="col-12 pt-3">

‎src/app/app.component.ts‎

Lines changed: 46 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,56 @@
1-
import {Component, ViewEncapsulation} from '@angular/core';
2-
import { Router } from "@angular/router";
1+
import { Component, ViewEncapsulation } from '@angular/core';
2+
import { Router } from '@angular/router';
33
import '../../node_modules/prismjs/prism.js';
44
import 'codemirror/mode/javascript/javascript';
55
import 'codemirror/mode/xml/xml';
6-
import CodeSnippets from "./quickstart-snippet";
6+
import CodeSnippets from './quickstart-snippet';
77
import SelectedSingleton from './fusioncharts/services/selected.singleton';
88
import SampleCode from './fusioncharts/samplecode';
99

1010
@Component({
11-
selector: 'app',
12-
styleUrls: [
13-
'./app.component.css',
14-
'../../node_modules/prismjs/themes/prism.css',
15-
'./themes/fusioncharts.theme.fusion.css',
16-
'./themes/github-css/codemirror.css',
17-
'./themes/github-css/dracula.css',
18-
'./themes/github-css/style.css'
19-
],
20-
encapsulation: ViewEncapsulation.None,
21-
templateUrl: './app.component.html',
11+
selector: 'app',
12+
styleUrls: [
13+
'./app.component.css',
14+
'../../node_modules/prismjs/themes/prism.css',
15+
'./themes/fusioncharts.theme.fusion.css',
16+
'./themes/github-css/codemirror.css',
17+
'./themes/github-css/dracula.css',
18+
'./themes/github-css/style.css'
19+
],
20+
encapsulation: ViewEncapsulation.None,
21+
templateUrl: './app.component.html'
2222
})
2323
export class AppComponent {
24-
25-
installCode = CodeSnippets.installCode;
26-
installFusionCharts = CodeSnippets.installFusionCharts;
27-
includeInModule = CodeSnippets.importCode;
28-
useDirective = CodeSnippets.useDirective;
29-
renderFusionMaps = CodeSnippets.renderFusionMaps;
30-
mapHtml = CodeSnippets.mapHtml;
31-
32-
modalClasses = 'show fade in';
33-
isModalOpen = false;
34-
35-
sampleCode = SampleCode;
36-
selectedTitle = '';
37-
38-
toggleModal = (state) => {
39-
this.isModalOpen = state;
40-
}
41-
42-
openPage = (route) =>{
43-
this.isModalOpen = false;
44-
this.router.navigate([route]);
45-
}
46-
47-
constructor(private router:Router){
48-
SelectedSingleton.on = (value) => {
49-
this.selectedTitle = value;
50-
}
51-
}
52-
53-
updateId (id) {
54-
55-
}
24+
installCode = CodeSnippets.installCode;
25+
installFusionCharts = CodeSnippets.installFusionCharts;
26+
includeInModule = CodeSnippets.importCode;
27+
useDirective = CodeSnippets.useDirective;
28+
renderFusionMaps = CodeSnippets.renderFusionMaps;
29+
mapHtml = CodeSnippets.mapHtml;
30+
setupFusionTime = CodeSnippets.setupFusionTime;
31+
fusionTimeComponentCode = CodeSnippets.fusionTimeComponentCode;
32+
fusionTimeTemplateCode = CodeSnippets.fusionTimeTemplateCode;
33+
34+
modalClasses = 'show fade in';
35+
isModalOpen = false;
36+
37+
sampleCode = SampleCode;
38+
selectedTitle = '';
39+
40+
toggleModal = state => {
41+
this.isModalOpen = state;
42+
};
43+
44+
openPage = route => {
45+
this.isModalOpen = false;
46+
this.router.navigate([route]);
47+
};
48+
49+
constructor(private router: Router) {
50+
SelectedSingleton.on = value => {
51+
this.selectedTitle = value;
52+
};
53+
}
54+
55+
updateId(id) {}
5656
}

‎src/app/quickstart-snippet.ts‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,18 @@ let installFusionCharts = '$ npm install fusioncharts --save';
44
let useDirective = `import { Component } from '@angular/core';\n\n@Component({\n selector: 'my-app',\n template: \`<fusioncharts\n width="500" \n height="300"\n type="column2d"\n dataFormat="json"\n [dataSource]="data" >\n </fusioncharts>\n \`,\n})\nexport class AppComponent {\n data: Object;\n \n constructor() {\n this.data = {\n chart: { },\n data: [\n {value: 500},\n {value: 600},\n {value: 700}\n ]\n };\n }\n}`;
55
let renderFusionMaps = `import { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { AppComponent } from './app.component';\n\n// Import FusionChartsModule from angular-fusioncharts\nimport { FusionChartsModule } from 'angular-fusioncharts';\n\n// Import FusionCharts library\nimport * as FusionCharts from 'fusioncharts';\n\n\n// Load FusionCharts Maps module\nimport * as Maps from 'fusioncharts/fusioncharts.maps';\n\n// Load WorldMap map definition module\nimport * as World from 'fusioncharts/maps/fusioncharts.world';\n\n// Use FusionChartsModule.fcRoot(FusionCharts, [Comma separated modules])\nFusionChartsModule.fcRoot(FusionCharts, Maps, World)\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule, \n FusionChartsModule // Include in the imports\n ],\n bootstrap: [AppComponent]\n})\nexport class AppModule { }`;
66
let mapHtml = `<!-- in app.component.html -->\n<fusioncharts\n type="world"\n width="800"\n height="500"\n dataFormat="json">\n</fusioncharts>`;
7+
let setupFusionTime = `// app.module.ts\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\nimport { AppComponent } from './app.component';\n// Import angular-fusioncharts\nimport { FusionChartsModule } from 'angular-fusioncharts';\n// Import FusionCharts library and chart modules\nimport * as FusionCharts from 'fusioncharts';\nimport * as Charts from 'fusioncharts/fusioncharts.charts';\nimport * as TimeSeries from 'fusioncharts/fusioncharts.timeseries'; // Import timeseries\n// Pass the fusioncharts library and chart modules\nFusionChartsModule.fcRoot(FusionCharts, Charts, TimeSeries);\n@NgModule({\n declarations: [AppComponent],\n imports: [\n BrowserModule,\n // Specify FusionChartsModule as import\n FusionChartsModule\n ],\n providers: [],\n bootstrap: [AppComponent]\n})\nexport class AppModule {}`;
8+
let fusionTimeComponentCode = `// In app.component.ts\nimport { Component } from '@angular/core';\nimport * as FusionCharts from 'fusioncharts';\nconst dataUrl =\n 'https://raw.githubusercontent.com/fusioncharts/dev_centre_docs/master/assets/datasources/fusiontime/online-sales-single-series-area-data-plot/data.json';\nconst schemaUrl =\n 'https://raw.githubusercontent.com/fusioncharts/dev_centre_docs/master/assets/datasources/fusiontime/online-sales-single-series-area-data-plot/schema.json';\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 = '400';\n this.height = '400';\n this.dataSource = {\n data: null,\n yAxis: {\n plot: [{ value: 'Sales' }]\n },\n caption: {\n text: 'Online Sales of a SuperStore in the US'\n }\n };\n this.fetchData();\n }\n fetchData() {\n let jsonify = res => res.json();\n let dataFetch = fetch(dataUrl).then(jsonify);\n let schemaFetch = fetch(schemaUrl).then(jsonify);\n Promise.all([dataFetch, schemaFetch]).then(res => {\n let data = res[0];\n let schema = res[1];\n let fusionTable = new FusionCharts.DataStore().createDataTable(\n data,\n schema\n ); // Instance of DataTable to be passed as data in dataSource\n this.dataSource.data = fusionTable;\n });\n }\n}`;
9+
let fusionTimeTemplateCode = `<div>\n <fusioncharts\n [type]="type"\n [width]="width"\n [height]="height"\n [dataSource]="dataSource"\n ></fusioncharts>\n</div>`;
10+
711
export default {
812
importCode,
913
installCode,
1014
installFusionCharts,
1115
useDirective,
1216
renderFusionMaps,
13-
mapHtml
14-
}
17+
mapHtml,
18+
setupFusionTime,
19+
fusionTimeComponentCode,
20+
fusionTimeTemplateCode
21+
};

0 commit comments

Comments
 (0)