Skip to content

Commit 500da45

Browse files
ashok1994ashok1994
committed
Sample refactored and added theme sample
1 parent cac01cb commit 500da45

File tree

20 files changed

+184
-76
lines changed

20 files changed

+184
-76
lines changed

‎src/app/app.component.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,10 @@ <h4>Render a widget</h4>
123123
<h4>Render a map</h4>
124124
<p>A simple map with embedded data </p>
125125
</a>
126+
<a [routerLinkActive]="['active']" [routerLink]="['/ex14']" href="#/demos/ex14" class="list-group-item" (click)="updateId('ex14')">
127+
<h4>Using a theme</h4>
128+
<p>Simple example of applying a theme</p>
129+
</a>
126130
</nav>
127131
</div>
128132
</div>

‎src/app/app.module.ts‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import { Ex10 } from './fusioncharts/ex10/ex10';
2424
import { Ex11 } from './fusioncharts/ex11/ex11';
2525
import { Ex12 } from "./fusioncharts/ex12/ex12";
2626
import { Ex13 } from "./fusioncharts/ex13/ex13";
27+
import { Ex14 } from "./fusioncharts/ex14/ex14";
2728
import { Navigation, NavService, ObservingComponent, MyAppComponent } from './observable/observable.component';
2829

2930
import { FusionChartsSample } from './fusioncharts/fusioncharts.component';
@@ -50,12 +51,13 @@ import * as WorldMap from 'fusioncharts/maps/fusioncharts.world';
5051
// import * as WorldMap from 'fusioncharts/maps/fusioncharts.world';
5152
// Load Ocean theme
5253
import * as Ocean from 'fusioncharts/themes/fusioncharts.theme.ocean';
54+
import * as Fint from 'fusioncharts/themes/fusioncharts.theme.fint';
5355
// import * as Ocean from 'fusioncharts/themes/fusioncharts.theme.ocean';
5456

55-
let Fusion = require('./themes/fusioncharts.theme.fusion.js');
5657

58+
require('./themes/fusioncharts.theme.fusion.js');
5759

58-
FusionChartsModule.fcRoot(FusionCharts, Charts, Ocean, PowerCharts, Widgets, Maps, WorldMap)
60+
FusionChartsModule.fcRoot(FusionCharts, Charts, Ocean, PowerCharts, Widgets, Maps, WorldMap, Fint)
5961

6062
@NgModule({
6163
declarations: [
@@ -73,6 +75,7 @@ FusionChartsModule.fcRoot(FusionCharts, Charts, Ocean, PowerCharts, Widgets, Map
7375
Ex11,
7476
Ex12,
7577
Ex13,
78+
Ex14,
7679
Navigation, ObservingComponent, MyAppComponent,
7780

7881
CodePrev,

‎src/app/app.routes.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ 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';
17+
import { Ex14 } from './fusioncharts/ex14/ex14';
1718
// import { Ex10 } from './fusioncharts/ex10/ex10';
1819
import { MyAppComponent } from './observable/observable.component';
1920

@@ -36,6 +37,7 @@ export const rootRouterConfig: Routes = [
3637
{ path: 'ex11', component: Ex11 },
3738
{ path: 'ex12', component: Ex12 },
3839
{ path: 'ex13', component: Ex13 },
40+
{ path: 'ex14', component: Ex14 },
3941
{ path: 'fusioncharts', component: MyAppComponent },
4042

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

‎src/app/fusioncharts/ex1/ex1.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
</fusioncharts>
66

77
<tabs>
8-
<tab tabTitle="JavaScript" ><ng-prism class="codepreview language-javascript" >{{ sampleCode[demoId].js }}</ng-prism></tab>
9-
<tab tabTitle="HTML" ><ng-prism class="codepreview language-html" >{{ sampleCode[demoId].html }}</ng-prism></tab>
10-
<tab tabTitle="Live" ><iframe style="width: 100%; height: 600px" src="https://embed.plnkr.co/F70SeRSv6B4gBNtR7mTA" frameborder="0" allowfullscren="allowfullscren"></iframe></tab>
8+
<tab tabTitle="Module"><ng-prism class="codepreview language-javascript" >{{ sampleCode[demoId].module }}</ng-prism></tab>
9+
<tab tabTitle="Component"><ng-prism class="codepreview language-javascript" >{{ sampleCode[demoId].component }}</ng-prism></tab>
10+
<tab tabTitle="Template" ><ng-prism class="codepreview language-html" >{{ sampleCode[demoId].template }}</ng-prism></tab>
1111
</tabs>

‎src/app/fusioncharts/ex10/ex10.html‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@
1818
<button (click)="exportChart($event)">Export chart in pdf</button>
1919

2020
<tabs>
21-
<tab tabTitle="JavaScript" title="JavaScript"><ng-prism class="codepreview language-javascript" >{{ sampleCode[demoId].js }}</ng-prism></tab>
22-
<tab tabTitle="HTML" title="HTML"><ng-prism class="codepreview language-html" >{{ sampleCode[demoId].html }}</ng-prism></tab>
23-
<tab tabTitle="Live" ><iframe style="width: 100%; height: 600px" src="https://embed.plnkr.co/5eirrg" frameborder="0" allowfullscren="allowfullscren"></iframe></tab>
21+
<tab tabTitle="Module"><ng-prism class="codepreview language-javascript" >{{ sampleCode[demoId].module }}</ng-prism></tab>
22+
<tab tabTitle="Component"><ng-prism class="codepreview language-javascript" >{{ sampleCode[demoId].component }}</ng-prism></tab>
23+
<tab tabTitle="Template" ><ng-prism class="codepreview language-html" >{{ sampleCode[demoId].template }}</ng-prism></tab>
2424
</tabs>
25+

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
></fusioncharts>
1010

1111
<tabs>
12-
<tab tabTitle="JavaScript" title="JavaScript"><ng-prism class="codepreview language-javascript" >{{ sampleCode[demoId].js }}</ng-prism></tab>
13-
<tab tabTitle="HTML" title="HTML"><ng-prism class="codepreview language-html" >{{ sampleCode[demoId].html }}</ng-prism></tab>
14-
<tab tabTitle="Live" ><iframe style="width: 100%; height: 600px" src="https://embed.plnkr.co/5eirrg" frameborder="0" allowfullscren="allowfullscren"></iframe></tab>
12+
<tab tabTitle="Module"><ng-prism class="codepreview language-javascript" >{{ sampleCode[demoId].module }}</ng-prism></tab>
13+
<tab tabTitle="Component"><ng-prism class="codepreview language-javascript" >{{ sampleCode[demoId].component }}</ng-prism></tab>
14+
<tab tabTitle="Template" ><ng-prism class="codepreview language-html" >{{ sampleCode[demoId].template }}</ng-prism></tab>
1515
</tabs>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
></fusioncharts>
88

99
<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>
10+
<tab tabTitle="Module"><ng-prism class="codepreview language-javascript" >{{ sampleCode[demoId].module }}</ng-prism></tab>
11+
<tab tabTitle="Component"><ng-prism class="codepreview language-javascript" >{{ sampleCode[demoId].component }}</ng-prism></tab>
12+
<tab tabTitle="Template" ><ng-prism class="codepreview language-html" >{{ sampleCode[demoId].template }}</ng-prism></tab>
1313
</tabs>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
></fusioncharts>
88

99
<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>
10+
<tab tabTitle="Module"><ng-prism class="codepreview language-javascript" >{{ sampleCode[demoId].module }}</ng-prism></tab>
11+
<tab tabTitle="Component"><ng-prism class="codepreview language-javascript" >{{ sampleCode[demoId].component }}</ng-prism></tab>
12+
<tab tabTitle="Template" ><ng-prism class="codepreview language-html" >{{ sampleCode[demoId].template }}</ng-prism></tab>
1313
</tabs>

‎src/app/fusioncharts/ex14/ex14.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<fusioncharts
2+
type="column2d"
3+
width="700"
4+
height="500"
5+
dataFormat="json"
6+
[dataSource]="dataSource"
7+
></fusioncharts>
8+
9+
<tabs>
10+
<tab tabTitle="Module"><ng-prism class="codepreview language-javascript" >{{ sampleCode[demoId].module }}</ng-prism></tab>
11+
<tab tabTitle="Component"><ng-prism class="codepreview language-javascript" >{{ sampleCode[demoId].component }}</ng-prism></tab>
12+
<tab tabTitle="Template" ><ng-prism class="codepreview language-html" >{{ sampleCode[demoId].template }}</ng-prism></tab>
13+
</tabs>

‎src/app/fusioncharts/ex14/ex14.ts‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
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: 'ex14.html',
10+
styleUrls: [
11+
'../ex.css'
12+
]
13+
})
14+
export class Ex14 {
15+
demoId = 'ex14';
16+
17+
sampleCode = fcDemos;
18+
19+
dataSource = {
20+
"chart": {
21+
"caption": "Countries With Most Oil Reserves [2017-18]",
22+
"subCaption": "In MMbbl = One Million barrels",
23+
"xAxisName": "Country",
24+
"yAxisName": "Reserves (MMbbl)",
25+
"numberSuffix": "K",
26+
"theme": "fint",
27+
},
28+
"data": [{
29+
"label": "Venezuela",
30+
"value": "290"
31+
}, {
32+
"label": "Saudi",
33+
"value": "260"
34+
}, {
35+
"label": "Canada",
36+
"value": "180"
37+
}, {
38+
"label": "Iran",
39+
"value": "140"
40+
}, {
41+
"label": "Russia",
42+
"value": "115"
43+
}, {
44+
"label": "UAE",
45+
"value": "100"
46+
}, {
47+
"label": "US",
48+
"value": "30"
49+
}, {
50+
"label": "China",
51+
"value": "30"
52+
}]
53+
};
54+
constructor(private zone:NgZone){}
55+
56+
ngAfterViewInit() {
57+
Prism && Prism.highlightAll();
58+
}
59+
}

0 commit comments

Comments
 (0)