Skip to content

Commit 227b216

Browse files
ashok1994ashok1994
committed
Changed content for angular
1 parent 57b5973 commit 227b216

File tree

1 file changed

+39
-53
lines changed

1 file changed

+39
-53
lines changed

‎src/app/app.component.html‎

Lines changed: 39 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -4,44 +4,43 @@
44
<ul class="nav nav-pills pull-right">
55
<li><a href="http://fusioncharts.com/">FusionCharts Home</a></li>
66
</ul>
7-
<h3><a href="http://fusioncharts.github.io/angular2-fusioncharts/"><img src="http://www.fusioncharts.com/theme/210x38xlogo.png.pagespeed.ic.KZD9tJ7qIK.png" class="logo"></a></h3>
7+
<h3><a href="http://fusioncharts.github.io/angular-fusioncharts/"><img src="http://www.fusioncharts.com/theme/210x38xlogo.png.pagespeed.ic.KZD9tJ7qIK.png" class="logo"></a></h3>
88
</div>
99
<div class="jumbotron">
1010
<img src="./assets/images/ng-fc-logo.png" class="logo">
11-
<h1>Angular2-FusionCharts</h1>
12-
<p>Simple and effective AngularJS bindings for FusionCharts JavaScript Charting Library.</p>
11+
<h1>Angular FusionCharts</h1>
12+
<p>Simple and effective Angular wrapper for FusionCharts JavaScript Charting Library.</p>
1313
</div>
1414
<div class="row">
1515
<div class="col-md-4">
16-
<h3>About Angular2-FusionCharts</h3>
16+
<h3>About Angular FusionCharts</h3>
1717
<p>
18-
This Angular 2 component provides bindings for <a href="http://fusioncharts.com">FusionCharts JavaScript Charting Library</a>. It easily adds rich and interactive charting to your Angular JS Projects.
18+
This Angular component provides bindings for <a href="http://fusioncharts.com">FusionCharts JavaScript Charting Library</a>. It easily adds rich and interactive charting to your Angular ( 2 and onwards) Projects.
1919
</p>
2020
</div>
2121
<div class="col-md-4 ">
2222
<h3>Features</h3>
2323
<!-- <p> -->
2424
<ul>
2525
<li>Add a chart using just a single directive.</li>
26-
<li>Auto-updates the chart object on modifying scope.</li>
27-
<li>Angular-friendly events allow you to call controller functions directly from the chart.</li>
26+
<li>Auto-updates the chart object on modifying component.</li>
27+
<li>Angular friendly events(emitters) allow you to call component functions directly from the chart.</li>
2828
<li>Offers advanced control by giving you access to full FusionCharts object.</li>
29-
<li>Provides variety of ways to add a chart, from JSON URL to Scope Array Binding.</li>
3029
</ul>
3130
<!-- </p> -->
3231
</div>
3332
<div class="col-md-4">
3433
<h3>Community</h3>
3534
<!-- <p> -->
3635
<ul>
37-
<li><a href="http://github.com/fusioncharts/angular2-fusioncharts">Github Repo</a></li>
38-
<li><a href="http://github.com/fusioncharts/angular2-fusioncharts/issues">Issues</a></li>
36+
<li><a href="http://github.com/fusioncharts/angular-fusioncharts">Github Repo</a></li>
37+
<li><a href="http://github.com/fusioncharts/angular-fusioncharts/issues">Issues</a></li>
3938
<li><a href="http://twitter.com/fusioncharts">FusionCharts Twitter</a></li>
4039
<li><a href="http://stackoverflow.com/questions/tagged/fusioncharts">Stack Overflow</a></li>
4140
</ul>
4241
<!-- </p> -->
4342
<h3>Support</h3>
44-
<p>Simply open up <a href="https://github.com/fusioncharts/angular2-fusioncharts/issues/new">a github issue</a> with your question/bug report/suggestion.</p>
43+
<p>Simply open up <a href="https://github.com/fusioncharts/angular-fusioncharts/issues/new">a github issue</a> with your question/bug report/suggestion.</p>
4544
</div>
4645
</div>
4746
</div>
@@ -141,46 +140,42 @@ <h4>Using a theme</h4>
141140
<div class="col-md-12">
142141
<h2>QuickStart</h2>
143142

144-
<h3>Step 1: Install <code>angular2-fusioncharts</code></h3>
143+
<h3>Step 1: Install <code>angular-fusioncharts</code></h3>
145144
<p>In the terminal run the following command:</p>
146-
<pre class="code-tab language-javascript"><code>$ npm install angular2-fusioncharts --save</code></pre>
145+
<pre class="code-tab language-javascript"><code>$ npm install angular-fusioncharts --save</code></pre>
147146

148147

149-
<h3>Step 2: Import <code>angular2-fusioncharts</code> in the root @NgModule </h3>
150-
<p>In the root Angular <code>@NgModule</code> import <code>FusionChartsModule</code> from <code>angular2-fusioncharts</code> and add the FusionChartsModule as a dependency.</p>
148+
<h3>Step 2: Import <code>angular-fusioncharts</code> in the root @NgModule </h3>
149+
<p>In the root Angular <code>@NgModule</code> import <code>FusionChartsModule</code> from <code>angular-fusioncharts</code> and add the FusionChartsModule as a dependency.</p>
151150
<pre class="code-tab language-javascript"><code>import {{ '{' }} NgModule } from '@angular/core';
152151
import {{ '{' }} BrowserModule } from '@angular/platform-browser';
153-
// Import the library
154-
import {{ '{' }} FusionChartsModule } from 'angular2-fusioncharts';
155-
import {{ '{' }} AppComponent } from './app.component';
156152

157-
// Import angular2-fusioncharts
158-
import {{ '{' }} FusionChartsModule } from 'angular2-fusioncharts';
153+
// Import angular-fusioncharts
154+
import {{ '{' }} FusionChartsModule } from 'angular-fusioncharts';
159155

160156
// Import FusionCharts library
161157
import * as FusionCharts from 'fusioncharts';
158+
162159
// Load FusionCharts Charts module
163-
let Charts = require('fusioncharts/fusioncharts.charts');
164-
165-
// Create FusionCharts provider function
166-
export function FusionChartsProvider () {{ '{' }}
167-
// Resolve charts dependency
168-
// You can pass all other FusionCharts modules such as Charts, PowerCharts
169-
// Maps, Widgets e.t.c.
170-
Charts(FusionCharts);
171-
172-
return FusionCharts;
173-
}
160+
import * as Charts from 'fusioncharts/fusioncharts.charts';
161+
// Add other dependecies like Themes, other charts, maps
162+
// import * as Fusion from 'fusioncharts/themes/fusioncharts.theme.fusion';
163+
// import * as World from 'fusioncharts/maps/fusioncharts.world';
164+
165+
166+
167+
// Use fcRoot function to inject FusionCharts library, and the modules
168+
// you want to use
169+
//FusionChartsModule.fcRoot(FusionCharts, [Comma separated modules])
170+
FusionChartsModule.fcRoot(FusionCharts, Charts)
174171

175172
@NgModule({{ '{' }}
176173
declarations: [
177174
AppComponent
178175
],
179176
imports: [
180-
BrowserModule,
181-
// Specify FusionChartsModule as an import
182-
// and pass FusionChartsProvider as a dependency
183-
FusionChartsModule.forRoot(FusionChartsProvider)
177+
BrowserModule,
178+
FusionChartsModule // Include in imports
184179
],
185180
bootstrap: [AppComponent]
186181
})
@@ -226,40 +221,31 @@ <h3>Render FusionMaps</h3>
226221

227222
<pre class="code-tab language-javascript"><code class="ng-binding">import {{ '{' }} NgModule } from '@angular/core';
228223
import {{ '{' }} BrowserModule } from '@angular/platform-browser';
229-
// Import the library
230-
import {{ '{' }} FusionChartsModule } from 'angular2-fusioncharts';
231224
import {{ '{' }} AppComponent } from './app.component';
232225

233-
// Import angular2-fusioncharts
226+
// Import FusionChartsModule from angular-fusioncharts
234227
import {{ '{' }} FusionChartsModule } from 'angular2-fusioncharts';
235228

236229
// Import FusionCharts library
237230
import * as FusionCharts from 'fusioncharts';
231+
232+
238233
// Load FusionCharts Maps module
239-
let FusionMaps = require('fusioncharts/fusioncharts.maps');
240-
// Load WorldMap map definition module
241-
let WorldMap = require('fusioncharts/maps/fusioncharts.world');
234+
import * as Maps from 'fusioncharts/fusioncharts.maps';
242235

243-
// Create FusionCharts provider function
244-
export function FusionChartsProvider () {{ '{' }}
245-
// Resolve Maps dependency
246-
// You can pass all other FusionCharts modules such as Charts, PowerCharts
247-
// Maps, Widgets e.t.c.
248-
FusionMaps(FusionCharts);
249-
WorldMap(FusionCharts);
236+
// Load WorldMap map definition module
237+
import * as World from 'fusioncharts/maps/fusioncharts.world';
250238

251-
return FusionCharts;
252-
}
239+
// Use FusionChartsModule.fcRoot(FusionCharts, [Comma separated modules])
240+
FusionChartsModule.fcRoot(FusionCharts, Maps, World)
253241

254242
@NgModule({{ '{' }}
255243
declarations: [
256244
AppComponent
257245
],
258246
imports: [
259247
BrowserModule,
260-
// Specify FusionChartsModule as an import
261-
// and pass FusionChartsProvider as a dependency
262-
FusionChartsModule.forRoot(FusionChartsProvider)
248+
FusionChartsModule // Include in the imports
263249
],
264250
bootstrap: [AppComponent]
265251
})

0 commit comments

Comments
 (0)