Skip to content

Commit cb4f427

Browse files
ashok1994ashok1994
committed
samples added and WIP
1 parent 2ca3818 commit cb4f427

File tree

22 files changed

+2244
-357
lines changed

22 files changed

+2244
-357
lines changed

‎src/app/app.component.html‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,10 +64,10 @@ <h4>A Column, Line and Area Combi Chart</h4>
6464
<p>A column, line and area combination chart using the datasource attribute</p>
6565
</a>
6666

67-
<a [routerLinkActive]="['active']" [routerLink]="['/ex4']" href="#/demos/ex4" class="list-group-item" (click)="updateId('ex4')">
67+
<!-- <a [routerLinkActive]="['active']" [routerLink]="['/ex4']" href="#/demos/ex4" class="list-group-item" (click)="updateId('ex4')">
6868
<h4>Different ways to use the directive</h4>
6969
<p>Use the fc-chart as a tag or as an attribute</p>
70-
</a>
70+
</a> -->
7171

7272
<a [routerLinkActive]="['active']" [routerLink]="['/ex5']" href="#/demos/ex5" class="list-group-item" (click)="updateId('ex5')">
7373
<h4>Fetch data from a JSON URL</h4>
@@ -103,6 +103,17 @@ <h4>Separate objects for attributes</h4>
103103
<h4>Percentage Calculation</h4>
104104
<p>Click on a plot to see the percentage value with respect to total</p>
105105
</a>
106+
107+
<a [routerLinkActive]="['active']" [routerLink]="['/ex10']" href="#/demos/ex10" class="list-group-item" (click)="updateId('ex10')">
108+
<h4>Export Chart</h4>
109+
<p>Click on the button to export the chart</p>
110+
</a>
111+
112+
113+
<a [routerLinkActive]="['active']" [routerLink]="['/ex11']" href="#/demos/ex11" class="list-group-item" (click)="updateId('ex11')">
114+
<h4>Drill Down Chart</h4>
115+
<p>Click on the plot to drill down chart</p>
116+
</a>
106117
</nav>
107118
</div>
108119
</div>

‎src/app/app.component.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ import '../../node_modules/prismjs/prism.js';
66
styleUrls: [
77
'./app.component.css',
88
'../../node_modules/bootstrap/dist/css/bootstrap.css',
9-
'../../node_modules/prismjs/themes/prism.css'
9+
'../../node_modules/prismjs/themes/prism.css',
10+
'./themes/fusioncharts.theme.fusion.css'
1011
],
1112
encapsulation: ViewEncapsulation.None,
1213
templateUrl: './app.component.html',

‎src/app/app.module.ts‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { NgModule } from '@angular/core'
1+
import { NgModule, enableProdMode } from '@angular/core'
22
import { RouterModule } from '@angular/router';
33
import { rootRouterConfig } from './app.routes';
44
import { AppComponent } from './app.component';
@@ -20,7 +20,8 @@ import { Ex6 } from './fusioncharts/ex6/ex6';
2020
import { Ex7 } from './fusioncharts/ex7/ex7';
2121
import { Ex8 } from './fusioncharts/ex8/ex8';
2222
import { Ex9 } from './fusioncharts/ex9/ex9';
23-
// import { Ex10 } from './fusioncharts/ex10/ex10';
23+
import { Ex10 } from './fusioncharts/ex10/ex10';
24+
import { Ex11 } from './fusioncharts/ex11/ex11';
2425
import { Navigation, NavService, ObservingComponent, MyAppComponent } from './observable/observable.component';
2526

2627
import { FusionChartsSample } from './fusioncharts/fusioncharts.component';
@@ -31,24 +32,25 @@ import { LocationStrategy, HashLocationStrategy } from '@angular/common';
3132
import * as FusionCharts from 'fusioncharts';
3233

3334
// Load charts module
34-
let Charts = require('fusioncharts/fusioncharts.charts');
35+
import * as Charts from 'fusioncharts/fusioncharts.charts';
3536
// import * as Charts from 'fusioncharts/fusioncharts.charts';
3637
// Load PowerCharts module
37-
let PowerCharts = require('fusioncharts/fusioncharts.powercharts');
38+
import * as PowerCharts from 'fusioncharts/fusioncharts.powercharts';
3839
// import * as PowerCharts from 'fusioncharts/fusioncharts.powercharts';
3940
// Load Widgets module
40-
let Widgets = require('fusioncharts/fusioncharts.widgets');
41+
import * as Widgets from 'fusioncharts/fusioncharts.widgets';
4142
// import * as Widgets from 'fusioncharts/fusioncharts.widgets';
4243
// Load Maps module
43-
let Maps = require('fusioncharts/fusioncharts.maps');
44+
import * as Maps from 'fusioncharts/fusioncharts.maps';
4445
// import * as Maps from 'fusioncharts/fusioncharts.maps';
4546
// Load WorldMap module
46-
let WorldMap = require('fusioncharts/maps/fusioncharts.world');
47+
import * as WorldMap from 'fusioncharts/maps/fusioncharts.world';
4748
// import * as WorldMap from 'fusioncharts/maps/fusioncharts.world';
4849
// Load Ocean theme
49-
let Ocean = require('fusioncharts/themes/fusioncharts.theme.ocean');
50+
import * as Ocean from 'fusioncharts/themes/fusioncharts.theme.ocean';
5051
// import * as Ocean from 'fusioncharts/themes/fusioncharts.theme.ocean';
5152

53+
let Fusion = require('./themes/fusioncharts.theme.fusion.js');
5254

5355
export function FusionChartsProvider () {
5456
Charts(FusionCharts);
@@ -72,7 +74,8 @@ export function FusionChartsProvider () {
7274
Ex7,
7375
Ex8,
7476
Ex9,
75-
77+
Ex10,
78+
Ex11,
7679
Navigation, ObservingComponent, MyAppComponent,
7780

7881
CodePrev,

‎src/app/app.routes.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ 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";
14+
import { Ex11 } from './fusioncharts/ex11/ex11';
1315
// import { Ex10 } from './fusioncharts/ex10/ex10';
1416
import { MyAppComponent } from './observable/observable.component';
1517

@@ -28,7 +30,8 @@ export const rootRouterConfig: Routes = [
2830
{ path: 'ex7', component: Ex7 },
2931
{ path: 'ex8', component: Ex8 },
3032
{ path: 'ex9', component: Ex9 },
31-
// { path: 'ex10', component: Ex10 },
33+
{ path: 'ex10', component: Ex10 },
34+
{ path: 'ex11', component: Ex11 },
3235
{ path: 'fusioncharts', component: MyAppComponent },
3336

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

‎src/app/fusioncharts/ex1/ex1.ts‎

Lines changed: 34 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -19,39 +19,46 @@ export class Ex1 implements AfterViewInit {
1919
this.sampleCode = fcDemos;
2020

2121
this.chartConfig = {
22-
width: "600",
23-
height: "400",
24-
type: "column3d",
22+
width: '700',
23+
height: '400',
24+
type: "column2d",
2525
dataFormat: "json",
2626
creditLabel: 'false'
2727
};
2828

2929
this.dataSource = {
30-
chart: {
31-
caption: "Harry's SuperMart",
32-
subCaption: "Top 5 stores in last month by revenue",
33-
numberPrefix: "$",
34-
theme: "ocean"
30+
"chart": {
31+
"caption": "Countries With Most Oil Reserves [2017-18]",
32+
"subCaption": "In MMbbl = One Million barrels",
33+
"xAxisName": "Country",
34+
"yAxisName": "Reserves (MMbbl)",
35+
"numberSuffix": "K",
36+
"theme": "fusion",
3537
},
36-
data:[{
37-
label: "Bakersfield Central",
38-
value: "880000"
39-
},
40-
{
41-
label: "Garden Groove harbour",
42-
value: "730000"
43-
},
44-
{
45-
label: "Los Angeles Topanga",
46-
value: "590000"
47-
},
48-
{
49-
label: "Compton-Rancho Dom",
50-
value: "520000"
51-
},
52-
{
53-
label: "Daly City Serramonte",
54-
value: "330000"
38+
"data": [{
39+
"label": "Venezuela",
40+
"value": "290"
41+
}, {
42+
"label": "Saudi",
43+
"value": "260"
44+
}, {
45+
"label": "Canada",
46+
"value": "180"
47+
}, {
48+
"label": "Iran",
49+
"value": "140"
50+
}, {
51+
"label": "Russia",
52+
"value": "115"
53+
}, {
54+
"label": "UAE",
55+
"value": "100"
56+
}, {
57+
"label": "US",
58+
"value": "30"
59+
}, {
60+
"label": "China",
61+
"value": "30"
5562
}]
5663
};
5764

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
2+
<fusioncharts
3+
width="700"
4+
height="400"
5+
type="column2D"
6+
[dataSource]="dataSource"
7+
>
8+
</fusioncharts>
9+
10+
<fusioncharts
11+
width="600"
12+
height="600"
13+
type="bar2d"
14+
dataFormat="json"
15+
[dataSource]="barDataSource">
16+
</fusioncharts>
17+
18+
<button (click)="exportChart($event)">Export chart in pdf</button>
19+
20+
<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>
24+
</tabs>

0 commit comments

Comments
 (0)