Skip to content

Commit cac01cb

Browse files
ashok1994ashok1994
committed
Samples added for all examples
1 parent cb4f427 commit cac01cb

File tree

10 files changed

+340
-14
lines changed

10 files changed

+340
-14
lines changed

‎src/app/app.component.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,15 @@ <h4>Export Chart</h4>
114114
<h4>Drill Down Chart</h4>
115115
<p>Click on the plot to drill down chart</p>
116116
</a>
117+
118+
<a [routerLinkActive]="['active']" [routerLink]="['/ex12']" href="#/demos/ex12" class="list-group-item" (click)="updateId('ex12')">
119+
<h4>Render a widget</h4>
120+
<p>A simple widget with data embedded in the component</p>
121+
</a>
122+
<a [routerLinkActive]="['active']" [routerLink]="['/ex13']" href="#/demos/ex13" class="list-group-item" (click)="updateId('ex13')">
123+
<h4>Render a map</h4>
124+
<p>A simple map with embedded data </p>
125+
</a>
117126
</nav>
118127
</div>
119128
</div>

‎src/app/app.module.ts‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,8 @@ import { Ex8 } from './fusioncharts/ex8/ex8';
2222
import { Ex9 } from './fusioncharts/ex9/ex9';
2323
import { Ex10 } from './fusioncharts/ex10/ex10';
2424
import { Ex11 } from './fusioncharts/ex11/ex11';
25+
import { Ex12 } from "./fusioncharts/ex12/ex12";
26+
import { Ex13 } from "./fusioncharts/ex13/ex13";
2527
import { Navigation, NavService, ObservingComponent, MyAppComponent } from './observable/observable.component';
2628

2729
import { FusionChartsSample } from './fusioncharts/fusioncharts.component';
@@ -52,15 +54,8 @@ import * as Ocean from 'fusioncharts/themes/fusioncharts.theme.ocean';
5254

5355
let Fusion = require('./themes/fusioncharts.theme.fusion.js');
5456

55-
export function FusionChartsProvider () {
56-
Charts(FusionCharts);
57-
Ocean(FusionCharts);
58-
PowerCharts(FusionCharts);
59-
Widgets(FusionCharts);
60-
Maps(FusionCharts);
61-
WorldMap(FusionCharts);
62-
return FusionCharts;
63-
}
57+
58+
FusionChartsModule.fcRoot(FusionCharts, Charts, Ocean, PowerCharts, Widgets, Maps, WorldMap)
6459

6560
@NgModule({
6661
declarations: [
@@ -76,6 +71,8 @@ export function FusionChartsProvider () {
7671
Ex9,
7772
Ex10,
7873
Ex11,
74+
Ex12,
75+
Ex13,
7976
Navigation, ObservingComponent, MyAppComponent,
8077

8178
CodePrev,
@@ -88,7 +85,7 @@ export function FusionChartsProvider () {
8885
ReactiveFormsModule,
8986
HttpModule,
9087
TabsModule,
91-
FusionChartsModule.forRoot(FusionChartsProvider),
88+
FusionChartsModule,
9289
RouterModule.forRoot(rootRouterConfig, { useHash: true })
9390
],
9491
providers: [

‎src/app/app.routes.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ import { Ex8 } from './fusioncharts/ex8/ex8';
1212
import { Ex9 } from './fusioncharts/ex9/ex9';
1313
import { Ex10 } from "./fusioncharts/ex10/ex10";
1414
import { Ex11 } from './fusioncharts/ex11/ex11';
15+
import { Ex12 } from './fusioncharts/ex12/ex12';
16+
import { Ex13 } from './fusioncharts/ex13/ex13';
1517
// import { Ex10 } from './fusioncharts/ex10/ex10';
1618
import { MyAppComponent } from './observable/observable.component';
1719

@@ -32,6 +34,8 @@ export const rootRouterConfig: Routes = [
3234
{ path: 'ex9', component: Ex9 },
3335
{ path: 'ex10', component: Ex10 },
3436
{ path: 'ex11', component: Ex11 },
37+
{ path: 'ex12', component: Ex12 },
38+
{ path: 'ex13', component: Ex13 },
3539
{ path: 'fusioncharts', component: MyAppComponent },
3640

3741
{ path: 'fusioncharts', component: FusionChartsSample }

‎src/app/fusioncharts/ex11/ex11.html‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11

2-
2+
<fusioncharts
3+
type="column2d"
4+
width="700"
5+
height="400"
6+
dataFormat="json"
7+
[dataSource]="dataSource"
8+
(initialized)="initialized($event)"
9+
></fusioncharts>
310

411
<tabs>
512
<tab tabTitle="JavaScript" title="JavaScript"><ng-prism class="codepreview language-javascript" >{{ sampleCode[demoId].js }}</ng-prism></tab>

‎src/app/fusioncharts/ex11/ex11.ts‎

Lines changed: 126 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,132 @@ export class Ex11 {
1616

1717
sampleCode = fcDemos;
1818

19-
dataSource = {};
19+
chartInstance: any = {};
20+
21+
initialized(e){
22+
this.chartInstance = e.chart;
23+
this.chartInstance.configureLink({
24+
type: "pie2d",
25+
width: "500",
26+
overlayButton: {
27+
message: 'close',
28+
fontColor: '880000',
29+
bgColor: 'FFEEEE',
30+
borderColor: '660000'
31+
}
32+
},0)
33+
}
34+
35+
dataSource = {
36+
"chart": {
37+
"caption": "Top 3 Juice Flavors",
38+
"subcaption": "Last year",
39+
"xaxisname": "Flavor",
40+
"yaxisname": "Amount (In USD)",
41+
"numberprefix": "$",
42+
"theme": "fusion",
43+
"rotateValues": "0"
44+
},
45+
"data": [
46+
{
47+
"label": "Apple",
48+
"value": "810000",
49+
"link": "newchart-xml-apple"
50+
},
51+
{
52+
"label": "Cranberry",
53+
"value": "620000",
54+
"link": "newchart-xml-cranberry"
55+
},
56+
{
57+
"label": "Grapes",
58+
"value": "350000",
59+
"link": "newchart-xml-grapes"
60+
}],
61+
"linkeddata": [
62+
{
63+
"id": "apple",
64+
"linkedchart": {
65+
"chart": {
66+
"caption": "Apple Juice - Quarterly Sales",
67+
"subcaption": "Last year",
68+
"numberprefix": "$",
69+
"theme": "fusion",
70+
"rotateValues": "0",
71+
"plottooltext": "$label, $dataValue, $percentValue"
72+
},
73+
"data": [{
74+
"label": "Q1",
75+
"value": "157000"
76+
}, {
77+
"label": "Q2",
78+
"value": "172000"
79+
}, {
80+
"label": "Q3",
81+
"value": "206000"
82+
}, {
83+
"label": "Q4",
84+
"value": "275000"
85+
}]
86+
}
87+
},
88+
{
89+
"id": "cranberry",
90+
"linkedchart": {
91+
"chart": {
92+
"caption": "Cranberry Juice - Quarterly Sales",
93+
"subcaption": "Last year",
94+
"numberprefix": "$",
95+
"theme": "fusion",
96+
"plottooltext": "$label, $dataValue, $percentValue"
97+
},
98+
"data": [
99+
{
100+
"label": "Q1",
101+
"value": "102000"
102+
},
103+
{
104+
"label": "Q2",
105+
"value": "142000"
106+
},
107+
{
108+
"label": "Q3",
109+
"value": "187000"
110+
},
111+
{
112+
"label": "Q4",
113+
"value": "189000"
114+
}]
115+
}
116+
},
117+
{
118+
"id": "grapes",
119+
"linkedchart": {
120+
"chart": {
121+
"caption": "Grapes Juice - Quarterly Sales",
122+
"subcaption": "Last year",
123+
"numberprefix": "$",
124+
"theme": "fusion",
125+
"rotateValues": "0",
126+
"plottooltext": "$label, $dataValue, $percentValue"
127+
},
128+
"data": [{
129+
"label": "Q1",
130+
"value": "45000"
131+
}, {
132+
"label": "Q2",
133+
"value": "72000"
134+
}, {
135+
"label": "Q3",
136+
"value": "95000"
137+
}, {
138+
"label": "Q4",
139+
"value": "108000"
140+
}]
141+
}
142+
}
143+
]
144+
};
20145

21146
constructor(private zone:NgZone){}
22147

‎src/app/fusioncharts/ex12/ex12.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<fusioncharts
2+
type="angulargauge"
3+
width="450"
4+
height="250"
5+
dataFormat="json"
6+
[dataSource]="dataSource"
7+
></fusioncharts>
8+
9+
<tabs>
10+
<tab tabTitle="JavaScript" title="JavaScript"><ng-prism class="codepreview language-javascript" >{{ sampleCode[demoId].js }}</ng-prism></tab>
11+
<tab tabTitle="HTML" title="HTML"><ng-prism class="codepreview language-html" >{{ sampleCode[demoId].html }}</ng-prism></tab>
12+
<tab tabTitle="Live" ><iframe style="width: 100%; height: 600px" src="https://embed.plnkr.co/5eirrg" frameborder="0" allowfullscren="allowfullscren"></iframe></tab>
13+
</tabs>

‎src/app/fusioncharts/ex12/ex12.ts‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import { Component, NgZone} from '@angular/core';
2+
3+
import fcDemos from '../samplecode';
4+
5+
declare var Prism;
6+
7+
@Component({
8+
selector: 'chart',
9+
templateUrl: 'ex12.html',
10+
styleUrls: [
11+
'../ex.css'
12+
]
13+
})
14+
export class Ex12 {
15+
demoId = 'ex12';
16+
17+
sampleCode = fcDemos;
18+
19+
dataSource = {
20+
"chart": {
21+
"caption": "Nordstorm's Customer Satisfaction Score for 2017",
22+
"lowerLimit": "0",
23+
"upperLimit": "100",
24+
"showValue": "1",
25+
"numberSuffix": "%",
26+
"theme": "fusion",
27+
"showToolTip": "0"
28+
},
29+
"colorRange": {
30+
"color": [{
31+
"minValue": "0",
32+
"maxValue": "50",
33+
"code": "#F2726F"
34+
}, {
35+
"minValue": "50",
36+
"maxValue": "75",
37+
"code": "#FFC533"
38+
}, {
39+
"minValue": "75",
40+
"maxValue": "100",
41+
"code": "#62B58F"
42+
}]
43+
},
44+
"dials": {
45+
"dial": [{
46+
"value": "81"
47+
}]
48+
}
49+
}
50+
51+
constructor(private zone:NgZone){}
52+
53+
ngAfterViewInit() {
54+
Prism && Prism.highlightAll();
55+
}
56+
}

‎src/app/fusioncharts/ex13/ex13.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<fusioncharts
2+
type="world"
3+
width="800"
4+
height="500"
5+
dataFormat="json"
6+
[dataSource]="dataSource"
7+
></fusioncharts>
8+
9+
<tabs>
10+
<tab tabTitle="JavaScript" title="JavaScript"><ng-prism class="codepreview language-javascript" >{{ sampleCode[demoId].js }}</ng-prism></tab>
11+
<tab tabTitle="HTML" title="HTML"><ng-prism class="codepreview language-html" >{{ sampleCode[demoId].html }}</ng-prism></tab>
12+
<tab tabTitle="Live" ><iframe style="width: 100%; height: 600px" src="https://embed.plnkr.co/5eirrg" frameborder="0" allowfullscren="allowfullscren"></iframe></tab>
13+
</tabs>

0 commit comments

Comments
 (0)