Skip to content

Commit acb6676

Browse files
ashok1994ashok1994
authored
Merge pull request #50 from rohanoid5/sample-add/timeseries-samples
Added new samples in gh-pages for fusiontime
2 parents f50f34c + 3419167 commit acb6676

File tree

29 files changed

+2006
-253
lines changed

29 files changed

+2006
-253
lines changed

‎src/app/app.component.css‎

Lines changed: 33 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.codepreview pre {
2-
height: 592px;
2+
height: 592px;
33
}
44

55
/* From the passportjs.org website */
@@ -15,7 +15,7 @@
1515
}
1616

1717
.masthead h3 a {
18-
color: #333333;;
18+
color: #333333;
1919
text-decoration: none;
2020
}
2121

@@ -33,35 +33,35 @@
3333
}
3434

3535
.jumbotron p {
36-
margin-left: 133px;
36+
margin-left: 133px;
3737
}
3838

3939
.jumbotron p {
40-
margin-left: 133px;
40+
margin-left: 133px;
4141
}
4242

4343
tabset {
44-
display: none;
44+
display: none;
4545
}
4646

4747
.tabset {
48-
display: none;
48+
display: none;
4949
}
5050
.tabset .nav-tabs {
51-
overflow: hidden;
52-
list-style: none;
53-
margin: 0;
54-
padding: 0;
55-
border-bottom: 1px solid #ccc;
51+
overflow: hidden;
52+
list-style: none;
53+
margin: 0;
54+
padding: 0;
55+
border-bottom: 1px solid #ccc;
5656
}
5757

5858
.tabset .nav-tabs li {
59-
float: left;
59+
float: left;
6060
}
6161

6262
.tabset .nav-tabs li.active {
63-
border: 1px solid #ccc;
64-
border-bottom-color: #fff;
63+
border: 1px solid #ccc;
64+
border-bottom-color: #fff;
6565
}
6666

6767
.ng2-tabs {
@@ -93,3 +93,22 @@ tabset {
9393
background-color: #f1f1f1;
9494
}
9595

96+
.nav-group {
97+
display: flex;
98+
justify-content: space-between;
99+
}
100+
101+
.badge {
102+
font-size: 12px !important;
103+
border-radius: 5px;
104+
align-self: center;
105+
}
106+
107+
.badge-selected {
108+
background-color: white;
109+
}
110+
111+
.badge-normal {
112+
background-color: rgb(75, 63, 160);
113+
color: white;
114+
}

‎src/app/app.component.html‎

Lines changed: 180 additions & 19 deletions
Large diffs are not rendered by default.

‎src/app/app.module.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,18 @@ import { Ex22 } from './fusioncharts/ex22/ex22';
3737
import { Ex23 } from './fusioncharts/ex23/ex23';
3838
import { Ex24 } from './fusioncharts/ex24/ex24';
3939
import { Ex25 } from './fusioncharts/ex25/ex25';
40+
import { Ex26 } from './fusioncharts/ex26/ex26';
41+
import { Ex27 } from './fusioncharts/ex27/ex27';
42+
import { Ex28 } from './fusioncharts/ex28/ex28';
43+
import { Ex29 } from './fusioncharts/ex29/ex29';
44+
import { Ex30 } from './fusioncharts/ex30/ex30';
45+
import { Ex31 } from './fusioncharts/ex31/ex31';
46+
import { Ex32 } from './fusioncharts/ex32/ex32';
47+
import { Ex33 } from './fusioncharts/ex33/ex33';
48+
import { Ex34 } from './fusioncharts/ex34/ex34';
49+
import { Ex35 } from './fusioncharts/ex35/ex35';
50+
import { Ex36 } from './fusioncharts/ex36/ex36';
51+
4052
import { FusionTime } from './fusiontime/fusiontime';
4153

4254
import { SafeHtmlPipe } from './pipes/trustAsHtml';
@@ -93,6 +105,7 @@ import * as Carbon from 'fusioncharts/themes/fusioncharts.theme.carbon';
93105
FusionChartsModule.fcRoot(
94106
FusionCharts,
95107
Charts,
108+
TimeSeries,
96109
PowerCharts,
97110
Widgets,
98111
Maps,
@@ -134,6 +147,17 @@ FusionChartsModule.fcRoot(
134147
Ex23,
135148
Ex24,
136149
Ex25,
150+
Ex26,
151+
Ex27,
152+
Ex28,
153+
Ex29,
154+
Ex30,
155+
Ex31,
156+
Ex32,
157+
Ex33,
158+
Ex34,
159+
Ex35,
160+
Ex36,
137161
SafeHtmlPipe,
138162
Navigation,
139163
ObservingComponent,

‎src/app/app.routes.ts‎

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,12 @@ import { Ex6 } from './fusioncharts/ex6/ex6';
1010
import { Ex7 } from './fusioncharts/ex7/ex7';
1111
import { Ex8 } from './fusioncharts/ex8/ex8';
1212
import { Ex9 } from './fusioncharts/ex9/ex9';
13-
import { Ex10 } from "./fusioncharts/ex10/ex10";
13+
import { Ex10 } from './fusioncharts/ex10/ex10';
1414
import { Ex11 } from './fusioncharts/ex11/ex11';
1515
import { Ex12 } from './fusioncharts/ex12/ex12';
1616
import { Ex13 } from './fusioncharts/ex13/ex13';
1717
import { Ex14 } from './fusioncharts/ex14/ex14';
18-
import { Ex15} from './fusioncharts/ex15/ex15';
18+
import { Ex15 } from './fusioncharts/ex15/ex15';
1919
import { Ex16 } from './fusioncharts/ex16/ex16';
2020
import { Ex17 } from './fusioncharts/ex17/ex17';
2121
import { Ex18 } from './fusioncharts/ex18/ex18';
@@ -26,6 +26,18 @@ import { Ex22 } from './fusioncharts/ex22/ex22';
2626
import { Ex23 } from './fusioncharts/ex23/ex23';
2727
import { Ex24 } from './fusioncharts/ex24/ex24';
2828
import { Ex25 } from './fusioncharts/ex25/ex25';
29+
import { Ex26 } from './fusioncharts/ex26/ex26';
30+
import { Ex27 } from './fusioncharts/ex27/ex27';
31+
import { Ex28 } from './fusioncharts/ex28/ex28';
32+
import { Ex29 } from './fusioncharts/ex29/ex29';
33+
import { Ex30 } from './fusioncharts/ex30/ex30';
34+
import { Ex31 } from './fusioncharts/ex31/ex31';
35+
import { Ex32 } from './fusioncharts/ex32/ex32';
36+
import { Ex33 } from './fusioncharts/ex33/ex33';
37+
import { Ex34 } from './fusioncharts/ex34/ex34';
38+
import { Ex35 } from './fusioncharts/ex35/ex35';
39+
import { Ex36 } from './fusioncharts/ex36/ex36';
40+
2941
// import { Ex10 } from './fusioncharts/ex10/ex10';
3042
import { MyAppComponent } from './observable/observable.component';
3143

@@ -60,7 +72,17 @@ export const rootRouterConfig: Routes = [
6072
{ path: 'ex23', component: Ex23 },
6173
{ path: 'ex24', component: Ex24 },
6274
{ path: 'ex25', component: Ex25 },
75+
{ path: 'ex26', component: Ex26 },
76+
{ path: 'ex27', component: Ex27 },
77+
{ path: 'ex28', component: Ex28 },
78+
{ path: 'ex29', component: Ex29 },
79+
{ path: 'ex30', component: Ex30 },
80+
{ path: 'ex31', component: Ex31 },
81+
{ path: 'ex32', component: Ex32 },
82+
{ path: 'ex33', component: Ex33 },
83+
{ path: 'ex34', component: Ex34 },
84+
{ path: 'ex35', component: Ex35 },
85+
{ path: 'ex36', component: Ex36 },
6386
{ path: 'fusioncharts', component: MyAppComponent },
6487
{ path: 'fusioncharts', component: FusionChartsSample }
6588
];
66-

‎src/app/fusioncharts/ex26/ex26.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<div class="card shadow">
2+
<div class="card-body chart-wrapper">
3+
<div class="chart-wrapper-inner">
4+
<fusioncharts
5+
[type]="type"
6+
[width]="width"
7+
[height]="height"
8+
[dataSource]="dataSource"
9+
>
10+
</fusioncharts>
11+
</div>
12+
</div>
13+
</div>
14+
15+
<tabbed-code
16+
moduleCode="{{ sampleCode[demoId].module }}"
17+
componentCode="{{ sampleCode[demoId].component }}"
18+
templateCode="{{ sampleCode[demoId].template }}"
19+
schemaCode="{{ sampleCode[demoId].schema }}"
20+
dataCode="{{ sampleCode[demoId].data }}"
21+
>
22+
</tabbed-code>

‎src/app/fusioncharts/ex26/ex26.ts‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import { Component, NgZone } from '@angular/core';
2+
3+
import fcDemos from '../samplecode';
4+
import SelectedSingleton from '../services/selected.singleton';
5+
import * as FusionCharts from 'fusioncharts';
6+
7+
declare var Prism;
8+
9+
@Component({
10+
selector: 'chart',
11+
templateUrl: './ex26.html',
12+
styleUrls: ['../ex.css']
13+
})
14+
export class Ex26 {
15+
demoId = 'ex26';
16+
sampleCode = fcDemos;
17+
dataSource: any;
18+
type: string;
19+
width: string;
20+
height: string;
21+
constructor() {
22+
this.type = 'timeseries';
23+
this.width = '100%';
24+
this.height = '400';
25+
// This is the dataSource of the chart
26+
this.dataSource = {
27+
// Initially data is set as null
28+
data: null,
29+
caption: {
30+
text: 'Sales Analysis'
31+
},
32+
subcaption: {
33+
text: 'Grocery'
34+
},
35+
yAxis: [
36+
{
37+
plot: {
38+
value: 'Grocery Sales Value',
39+
type: 'line'
40+
},
41+
format: {
42+
prefix: '$'
43+
},
44+
title: 'Sale Value'
45+
}
46+
]
47+
};
48+
this.fetchData();
49+
}
50+
51+
// In this method we will create our DataStore and using that we will create a custom DataTable which takes two
52+
// parameters, one is data another is schema.
53+
fetchData() {
54+
var jsonify = res => res.json();
55+
var dataFetch = fetch(
56+
'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/line-chart-with-time-axis-data.json'
57+
).then(jsonify);
58+
var schemaFetch = fetch(
59+
'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/line-chart-with-time-axis-schema.json'
60+
).then(jsonify);
61+
62+
Promise.all([dataFetch, schemaFetch]).then(res => {
63+
const data = res[0];
64+
const schema = res[1];
65+
// First we are creating a DataStore
66+
const fusionDataStore = new FusionCharts.DataStore();
67+
// After that we are creating a DataTable by passing our data and schema as arguments
68+
const fusionTable = fusionDataStore.createDataTable(data, schema);
69+
// Afet that we simply mutated our timeseries datasource by attaching the above
70+
// DataTable into its data property.
71+
this.dataSource.data = fusionTable;
72+
});
73+
}
74+
75+
ngOnInit() {
76+
setTimeout(() => {
77+
SelectedSingleton.change(this.sampleCode['ex26'].title);
78+
});
79+
}
80+
}

‎src/app/fusioncharts/ex27/ex27.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<div class="card shadow">
2+
<div class="card-body chart-wrapper">
3+
<div class="chart-wrapper-inner">
4+
<fusioncharts
5+
[type]="type"
6+
[width]="width"
7+
[height]="height"
8+
[dataSource]="dataSource"
9+
>
10+
</fusioncharts>
11+
</div>
12+
</div>
13+
</div>
14+
15+
<tabbed-code
16+
moduleCode="{{ sampleCode[demoId].module }}"
17+
componentCode="{{ sampleCode[demoId].component }}"
18+
templateCode="{{ sampleCode[demoId].template }}"
19+
schemaCode="{{ sampleCode[demoId].schema }}"
20+
dataCode="{{ sampleCode[demoId].data }}"
21+
>
22+
</tabbed-code>

‎src/app/fusioncharts/ex27/ex27.ts‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import { Component, NgZone } from '@angular/core';
2+
3+
import fcDemos from '../samplecode';
4+
import SelectedSingleton from '../services/selected.singleton';
5+
import * as FusionCharts from 'fusioncharts';
6+
7+
declare var Prism;
8+
9+
@Component({
10+
selector: 'chart',
11+
templateUrl: './ex27.html',
12+
styleUrls: ['../ex.css']
13+
})
14+
export class Ex27 {
15+
demoId = 'ex27';
16+
sampleCode = fcDemos;
17+
dataSource: any;
18+
type: string;
19+
width: string;
20+
height: string;
21+
constructor() {
22+
this.type = 'timeseries';
23+
this.width = '100%';
24+
this.height = '400';
25+
// This is the dataSource of the chart
26+
this.dataSource = {
27+
// Initially data is set as null
28+
data: null,
29+
caption: {
30+
text: 'Sales Analysis'
31+
},
32+
subcaption: {
33+
text: 'Grocery & Footwear'
34+
},
35+
series: 'Type',
36+
yAxis: [
37+
{
38+
plot: 'Sales Value',
39+
title: 'Sale Value',
40+
format: {
41+
prefix: '$'
42+
}
43+
}
44+
]
45+
};
46+
this.fetchData();
47+
}
48+
49+
// In this method we will create our DataStore and using that we will create a custom DataTable which takes two
50+
// parameters, one is data another is schema.
51+
fetchData() {
52+
var jsonify = res => res.json();
53+
var dataFetch = fetch(
54+
'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/plotting-multiple-series-on-time-axis-data.json'
55+
).then(jsonify);
56+
var schemaFetch = fetch(
57+
'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/plotting-multiple-series-on-time-axis-schema.json'
58+
).then(jsonify);
59+
60+
Promise.all([dataFetch, schemaFetch]).then(res => {
61+
const data = res[0];
62+
const schema = res[1];
63+
// First we are creating a DataStore
64+
const fusionDataStore = new FusionCharts.DataStore();
65+
// After that we are creating a DataTable by passing our data and schema as arguments
66+
const fusionTable = fusionDataStore.createDataTable(data, schema);
67+
// Afet that we simply mutated our timeseries datasource by attaching the above
68+
// DataTable into its data property.
69+
this.dataSource.data = fusionTable;
70+
});
71+
}
72+
73+
ngOnInit() {
74+
setTimeout(() => {
75+
SelectedSingleton.change(this.sampleCode['ex27'].title);
76+
});
77+
}
78+
}

0 commit comments

Comments
 (0)