Skip to content

Commit 201bfcd

Browse files
ashok1994ashok1994
committed
Changed and added new demos , samples changed to importing es5 fusioncharts, minor fixes
1 parent cdc63cd commit 201bfcd

File tree

19 files changed

+684
-190
lines changed

19 files changed

+684
-190
lines changed

‎src/angular-fusioncharts/src/fusioncharts.component.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -414,13 +414,15 @@ class FusionChartsComponent implements OnInit, OnChanges, DoCheck, AfterViewInit
414414
} else {
415415
configObj['events'] = Object.assign(events, configObj['events']);
416416
}
417-
_this.chartObj = FusionChartsConstructor(_this.fusionchartsService, configObj);
418-
this.initialized.emit({ chart: _this.chartObj });
417+
418+
419419
// configObj['renderAt'] = 'container-' + _this.chartObj.id;
420420
// _this.containerId = _this.chartObj.id;
421421

422422
this.zone.runOutsideAngular(() => {
423423
setTimeout(() => {
424+
_this.chartObj = FusionChartsConstructor(_this.fusionchartsService, configObj);
425+
this.initialized.emit({ chart: _this.chartObj });
424426
_this.chartObj.render(_this.element.nativeElement.querySelector('div'));
425427
}, 1);
426428
})

‎src/app/app.component.html‎

Lines changed: 61 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -141,12 +141,13 @@
141141
<div class="nav-item" (click)='openPage("/ex6")' [ngClass]="sampleCode['ex6'].title === selectedTitle ? 'selected' : ''">
142142
<div class="p">{{sampleCode['ex6'].title}}</div>
143143
</div>
144-
<div class="nav-item" (click)='openPage("/ex7")' [ngClass]="sampleCode['ex7'].title === selectedTitle ? 'selected' : ''">
145-
<div class="p">{{sampleCode['ex7'].title}}</div>
146-
</div>
147144
<div class="nav-item" (click)='openPage("/ex8")' [ngClass]="sampleCode['ex8'].title === selectedTitle ? 'selected' : ''">
148145
<div class="p">{{sampleCode['ex8'].title}}</div>
149146
</div>
147+
<div class="nav-item" (click)='openPage("/ex7")' [ngClass]="sampleCode['ex7'].title === selectedTitle ? 'selected' : ''">
148+
<div class="p">{{sampleCode['ex7'].title}}</div>
149+
</div>
150+
150151
<div class="nav-item" (click)='openPage("/ex9")' [ngClass]="sampleCode['ex9'].title === selectedTitle ? 'selected' : ''">
151152
<div class="p">{{sampleCode['ex9'].title}}</div>
152153
</div>
@@ -162,23 +163,23 @@
162163
<div class="nav-item" (click)='openPage("/ex13")' [ngClass]="sampleCode['ex13'].title === selectedTitle ? 'selected' : ''">
163164
<div class="p">{{sampleCode['ex13'].title}}</div>
164165
</div>
165-
<div class="nav-item" (click)='openPage("/ex14")' [ngClass]="sampleCode['ex14'].title === selectedTitle ? 'selected' : ''">
166+
<!-- <div class="nav-item" (click)='openPage("/ex14")' [ngClass]="sampleCode['ex14'].title === selectedTitle ? 'selected' : ''">
166167
<div class="p">{{sampleCode['ex14'].title}}</div>
167-
</div>
168-
<div class="nav-item" (click)='openPage("/ex15")' [ngClass]="sampleCode['ex15'].title === selectedTitle ? 'selected' : ''">
168+
</div> -->
169+
<!-- <div class="nav-item" (click)='openPage("/ex15")' [ngClass]="sampleCode['ex15'].title === selectedTitle ? 'selected' : ''">
169170
<div class="p">{{sampleCode['ex15'].title}}</div>
170-
</div>
171+
</div> -->
171172
<div class="nav-item" (click)='openPage("/ex16")' [ngClass]="sampleCode['ex16'].title === selectedTitle ? 'selected' : ''">
172173
<div class="p">{{sampleCode['ex16'].title}}</div>
173174
</div>
175+
<div class="nav-item" (click)='openPage("/ex23")' [ngClass]="sampleCode['ex23'].title === selectedTitle ? 'selected' : ''">
176+
<div class="p">{{sampleCode['ex23'].title}}</div>
177+
</div>
174178
<div class="nav-item" (click)='openPage("/ex17")' [ngClass]="sampleCode['ex17'].title === selectedTitle ? 'selected' : ''">
175179
<div class="p">{{sampleCode['ex17'].title}}</div>
176180
</div>
177-
<div class="nav-item" (click)='openPage("/ex18")' [ngClass]="sampleCode['ex18'].title === selectedTitle ? 'selected' : ''">
178-
<div class="p">{{sampleCode['ex18'].title}}</div>
179-
</div>
180-
<div class="nav-item" (click)='openPage("/ex19")' [ngClass]="sampleCode['ex19'].title === selectedTitle ? 'selected' : ''">
181-
<div class="p">{{sampleCode['ex19'].title}}</div>
181+
<div class="nav-item" (click)='openPage("/ex24")' [ngClass]="sampleCode['ex24'].title === selectedTitle ? 'selected' : ''">
182+
<div class="p">{{sampleCode['ex24'].title}}</div>
182183
</div>
183184
<div class="nav-item" (click)='openPage("/ex20")' [ngClass]="sampleCode['ex20'].title === selectedTitle ? 'selected' : ''">
184185
<div class="p">{{sampleCode['ex20'].title}}</div>
@@ -189,6 +190,12 @@
189190
<div class="nav-item" (click)='openPage("/ex22")' [ngClass]="sampleCode['ex22'].title === selectedTitle ? 'selected' : ''">
190191
<div class="p">{{sampleCode['ex22'].title}}</div>
191192
</div>
193+
<div class="nav-item" (click)='openPage("/ex25")' [ngClass]="sampleCode['ex25'].title === selectedTitle ? 'selected' : ''">
194+
<div class="p">{{sampleCode['ex25'].title}}</div>
195+
</div>
196+
<div class="nav-item" (click)='openPage("/ex18")' [ngClass]="sampleCode['ex18'].title === selectedTitle ? 'selected' : ''">
197+
<div class="p">{{sampleCode['ex18'].title}}</div>
198+
</div>
192199
</div>
193200
</div>
194201

@@ -236,18 +243,20 @@
236243
<div class="p item-desc">{{sampleCode['ex6'].description}}</div>
237244
</div>
238245
</a>
239-
<a [routerLinkActive]="['active']" [routerLink]="['/ex7']" href="#/demos/ex7" (click)="updateId('ex7')">
240-
<div class="nav-item">
241-
<div class="h5">{{sampleCode['ex7'].title}}</div>
242-
<div class="p item-desc">{{sampleCode['ex7'].description}}</div>
243-
</div>
244-
</a>
245246
<a [routerLinkActive]="['active']" [routerLink]="['/ex8']" href="#/demos/ex8" (click)="updateId('ex8')">
246247
<div class="nav-item">
247248
<div class="h5">{{sampleCode['ex8'].title}}</div>
248249
<div class="p item-desc">{{sampleCode['ex8'].description}}</div>
249250
</div>
250251
</a>
252+
253+
<a [routerLinkActive]="['active']" [routerLink]="['/ex7']" href="#/demos/ex7" (click)="updateId('ex7')">
254+
<div class="nav-item">
255+
<div class="h5">{{sampleCode['ex7'].title}}</div>
256+
<div class="p item-desc">{{sampleCode['ex7'].description}}</div>
257+
</div>
258+
</a>
259+
251260
<a [routerLinkActive]="['active']" [routerLink]="['/ex9']" href="#/demos/ex9" (click)="updateId('ex9')">
252261
<div class="nav-item">
253262
<div class="h5">{{sampleCode['ex9'].title}}</div>
@@ -278,40 +287,28 @@
278287
<div class="p item-desc">{{sampleCode['ex13'].description}}</div>
279288
</div>
280289
</a>
281-
<a [routerLinkActive]="['active']" [routerLink]="['/ex14']" href="#/demos/ex14" (click)="updateId('ex14')">
282-
<div class="nav-item">
283-
<div class="h5">{{sampleCode['ex14'].title}}</div>
284-
<div class="p item-desc">{{sampleCode['ex14'].description}}</div>
285-
</div>
286-
</a>
287-
<a [routerLinkActive]="['active']" [routerLink]="['/ex15']" href="#/demos/ex15" (click)="updateId('ex15')">
288-
<div class="nav-item">
289-
<div class="h5">{{sampleCode['ex15'].title}}</div>
290-
<div class="p item-desc">{{sampleCode['ex15'].description}}</div>
291-
</div>
292-
</a>
293290
<a [routerLinkActive]="['active']" [routerLink]="['/ex16']" href="#/demos/ex16" (click)="updateId('ex16')">
294291
<div class="nav-item">
295292
<div class="h5">{{sampleCode['ex16'].title}}</div>
296293
<div class="p item-desc">{{sampleCode['ex16'].description}}</div>
297294
</div>
298295
</a>
296+
<a [routerLinkActive]="['active']" [routerLink]="['/ex23']" href="#/demos/ex23" (click)="updateId('ex23')">
297+
<div class="nav-item">
298+
<div class="h5">{{sampleCode['ex23'].title}}</div>
299+
<div class="p item-desc">{{sampleCode['ex23'].description}}</div>
300+
</div>
301+
</a>
299302
<a [routerLinkActive]="['active']" [routerLink]="['/ex17']" href="#/demos/ex17" (click)="updateId('ex17')">
300303
<div class="nav-item">
301304
<div class="h5">{{sampleCode['ex17'].title}}</div>
302305
<div class="p item-desc">{{sampleCode['ex17'].description}}</div>
303306
</div>
304307
</a>
305-
<a [routerLinkActive]="['active']" [routerLink]="['/ex18']" href="#/demos/ex18" (click)="updateId('ex18')">
308+
<a [routerLinkActive]="['active']" [routerLink]="['/ex24']" href="#/demos/ex24" (click)="updateId('ex24')">
306309
<div class="nav-item">
307-
<div class="h5">{{sampleCode['ex18'].title}}</div>
308-
<div class="p item-desc">{{sampleCode['ex18'].description}}</div>
309-
</div>
310-
</a>
311-
<a [routerLinkActive]="['active']" [routerLink]="['/ex19']" href="#/demos/ex19" (click)="updateId('ex19')">
312-
<div class="nav-item">
313-
<div class="h5">{{sampleCode['ex19'].title}}</div>
314-
<div class="p item-desc">{{sampleCode['ex19'].description}}</div>
310+
<div class="h5">{{sampleCode['ex24'].title}}</div>
311+
<div class="p item-desc">{{sampleCode['ex24'].description}}</div>
315312
</div>
316313
</a>
317314
<a [routerLinkActive]="['active']" [routerLink]="['/ex20']" href="#/demos/ex20" (click)="updateId('ex20')">
@@ -332,6 +329,31 @@
332329
<div class="p item-desc">{{sampleCode['ex22'].description}}</div>
333330
</div>
334331
</a>
332+
<a [routerLinkActive]="['active']" [routerLink]="['/ex25']" href="#/demos/ex25" (click)="updateId('ex25')">
333+
<div class="nav-item">
334+
<div class="h5">{{sampleCode['ex25'].title}}</div>
335+
<div class="p item-desc">{{sampleCode['ex25'].description}}</div>
336+
</div>
337+
</a>
338+
<a [routerLinkActive]="['active']" [routerLink]="['/ex18']" href="#/demos/ex18" (click)="updateId('ex18')">
339+
<div class="nav-item">
340+
<div class="h5">{{sampleCode['ex18'].title}}</div>
341+
<div class="p item-desc">{{sampleCode['ex18'].description}}</div>
342+
</div>
343+
</a>
344+
345+
346+
347+
348+
<!-- <a [routerLinkActive]="['active']" [routerLink]="['/ex19']" href="#/demos/ex19" (click)="updateId('ex19')">
349+
<div class="nav-item">
350+
<div class="h5">{{sampleCode['ex19'].title}}</div>
351+
<div class="p item-desc">{{sampleCode['ex19'].description}}</div>
352+
</div>
353+
</a> -->
354+
355+
356+
335357
</div>
336358
</div>
337359
<div class="col-md-9 col-12" ng-controller="DemoController">

‎src/app/app.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import {Component, ViewEncapsulation} from '@angular/core';
22
import { Router } from "@angular/router";
33
import '../../node_modules/prismjs/prism.js';
44
import 'codemirror/mode/javascript/javascript';
5-
import 'codemirror/mode/htmlembedded/htmlembedded';
5+
import 'codemirror/mode/xml/xml';
66
import CodeSnippets from "./quickstart-snippet";
77
import SelectedSingleton from './fusioncharts/services/selected.singleton';
88
import SampleCode from './fusioncharts/samplecode';

‎src/app/app.module.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,9 @@ import { Ex19 } from "./fusioncharts/ex19/ex19";
3434
import { Ex20 } from "./fusioncharts/ex20/ex20";
3535
import { Ex21 } from "./fusioncharts/ex21/ex21";
3636
import { Ex22 } from "./fusioncharts/ex22/ex22";
37+
import { Ex23 } from "./fusioncharts/ex23/ex23";
38+
import { Ex24 } from "./fusioncharts/ex24/ex24";
39+
import { Ex25 } from "./fusioncharts/ex25/ex25";
3740

3841
import { SafeHtmlPipe } from "./pipes/trustAsHtml";
3942
import { TabbedCode } from "./fusioncharts/tabbedComponent/tabbed.code.component";
@@ -117,6 +120,9 @@ FusionChartsModule.fcRoot(
117120
Ex20,
118121
Ex21,
119122
Ex22,
123+
Ex23,
124+
Ex24,
125+
Ex25,
120126
SafeHtmlPipe,
121127
Navigation, ObservingComponent, MyAppComponent,
122128
CodePrev,

‎src/app/app.routes.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,9 @@ import { Ex19 } from './fusioncharts/ex19/ex19';
2323
import { Ex20 } from './fusioncharts/ex20/ex20';
2424
import { Ex21 } from './fusioncharts/ex21/ex21';
2525
import { Ex22 } from './fusioncharts/ex22/ex22';
26+
import { Ex23 } from './fusioncharts/ex23/ex23';
27+
import { Ex24 } from './fusioncharts/ex24/ex24';
28+
import { Ex25 } from './fusioncharts/ex25/ex25';
2629
// import { Ex10 } from './fusioncharts/ex10/ex10';
2730
import { MyAppComponent } from './observable/observable.component';
2831

@@ -54,8 +57,10 @@ export const rootRouterConfig: Routes = [
5457
{ path: 'ex20', component: Ex20 },
5558
{ path: 'ex21', component: Ex21 },
5659
{ path: 'ex22', component: Ex22 },
60+
{ path: 'ex23', component: Ex23 },
61+
{ path: 'ex24', component: Ex24 },
62+
{ path: 'ex25', component: Ex25 },
5763
{ path: 'fusioncharts', component: MyAppComponent },
58-
5964
{ path: 'fusioncharts', component: FusionChartsSample }
6065
];
6166

‎src/app/fusioncharts/ex16/ex16.ts‎

Lines changed: 67 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -24,79 +24,83 @@ export class Ex16 {
2424
message: any;
2525

2626
// Format message
27-
getMessage(datasetname, startvalue, finalvalue){
28-
return `You have dragged a plot of <b style='font-weight:bold;'>${datasetname || '______'}</b> dataset, its previous value was <b style='font-weight:bold'>${startvalue || '________'}</b> and its current value is <b style='font-weight:bold'>${finalvalue || '________'}</b>`
27+
getMessage(datasetname, startvalue, finalvalue, label){
28+
return `<b style='font-weight:bold';>${datasetname}</b> dataset, its previous value was <b style='font-weight:bold'>${startvalue}</b> and its current value is <b style='font-weight:bold'>${finalvalue}</b> for year ${label}`;
2929
}
3030

3131
constructor(private zone: NgZone) {
3232
this.dataSource = {
3333
"chart": {
34-
"caption": "App Publishing Trend",
35-
"subCaption": "2012-2016",
36-
"xAxisName": "Years",
37-
"yAxisName": "Total number of apps in store",
38-
"formatnumberscale": "1",
39-
"drawCrossLine": "1",
40-
"plotToolText": "<b>$dataValue</b> apps on $seriesName in $label",
41-
"theme": "fusion"
34+
"caption": "Android and iOS Devices Sales Projections",
35+
"subCaption": "Drag the top of columns to adjust projections for 2017 & 2018",
36+
"numberPrefix": "$",
37+
"numberSuffix": "M",
38+
"yaxismaxvalue": "200",
39+
"theme": "fusion",
40+
"plotToolText": "<b>$label</b><br>$seriesName: <b>$dataValue</b>"
4241
},
43-
4442
"categories": [{
45-
"category": [{
46-
"label": "2012"
47-
}, {
48-
"label": "2013"
49-
}, {
50-
"label": "2014"
51-
}, {
52-
"label": "2015"
53-
}, {
54-
"label": "2016"
55-
}]
43+
"category": [{
44+
"label": "2014",
45+
"fontItalic": "0"
46+
}, {
47+
"label": "2015",
48+
"fontItalic": "0"
49+
}, {
50+
"label": "2016",
51+
"fontItalic": "0"
52+
}, {
53+
"label": "2017 (Projected)"
54+
}, {
55+
"label": "2018 (Projected)"
56+
}]
5657
}],
5758
"dataset": [{
58-
"seriesname": "iOS App Store",
59-
"data": [{
60-
"value": "125000"
61-
}, {
62-
"value": "300000"
63-
}, {
64-
"value": "480000"
65-
}, {
66-
"value": "800000"
67-
}, {
68-
"value": "1100000"
69-
}]
70-
}, {
71-
"seriesname": "Google Play Store",
72-
"data": [{
73-
"value": "70000"
74-
}, {
75-
"value": "150000"
76-
}, {
77-
"value": "350000"
78-
}, {
79-
"value": "600000"
80-
}, {
81-
"value": "1400000"
82-
}]
59+
"seriesname": "Android Devices",
60+
"data": [{
61+
"value": "73",
62+
"alpha": "100",
63+
"allowDrag": "0"
64+
}, {
65+
"value": "80",
66+
"alpha": "100",
67+
"allowDrag": "0"
68+
}, {
69+
"value": "97",
70+
"alpha": "100",
71+
"allowDrag": "0"
72+
}, {
73+
"value": "110",
74+
"toolText": "<b>$label</b><br>$seriesName: <b>$dataValue</b>"
75+
}, {
76+
"value": "180",
77+
"toolText": "<b>$label</b><br>$seriesName: <b>$dataValue</b>"
78+
}]
8379
}, {
84-
"seriesname": "Amazon AppStore",
85-
"data": [{
86-
"value": "10000"
87-
}, {
88-
"value": "100000"
89-
}, {
90-
"value": "300000"
91-
}, {
92-
"value": "600000"
93-
}, {
94-
"value": "900000"
95-
}]
80+
"seriesname": "iOS Devices",
81+
"data": [{
82+
"value": "63.2",
83+
"alpha": "100",
84+
"allowDrag": "0"
85+
}, {
86+
"value": "68",
87+
"alpha": "100",
88+
"allowDrag": "0"
89+
}, {
90+
"value": "82",
91+
"alpha": "100",
92+
"allowDrag": "0"
93+
}, {
94+
"value": "99",
95+
"toolText": "<b>$label</b><br>$seriesName: <b>$dataValue</b>"
96+
}, {
97+
"value": "150",
98+
"toolText": "<b>$label</b><br>$seriesName: <b>$dataValue</b>"
99+
}]
96100
}]
97101
};
98102

99-
this.message = this.getMessage(null, null, null);
103+
this.message = "Drag any column for years 2017 or 2018 to see updated value along with the label";
100104
}
101105

102106

@@ -110,8 +114,10 @@ export class Ex16 {
110114
dragEnd($event){
111115
let dataObj = $event.dataObj;
112116
this.finalvalue = dataObj.endValue;
117+
let label = this.dataSource.categories[0].category[dataObj.dataIndex].label;
118+
113119
this.zone.run(() => {
114-
this.message = this.getMessage(this.datasetname, this.startvalue.toFixed(2), this.finalvalue.toFixed(2));
120+
this.message = this.getMessage(this.datasetname, this.startvalue.toFixed(2), this.finalvalue.toFixed(2), label);
115121
})
116122
}
117123

0 commit comments

Comments
 (0)