Skip to content

Commit 59bed39

Browse files
rohitkrrohitkr
authored
Merge pull request #53 from ashok1994/develop
Changed readme
2 parents 07fa181 + 00b9bc0 commit 59bed39

File tree

1 file changed

+167
-0
lines changed

1 file changed

+167
-0
lines changed

‎README.md

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,176 @@ Use this AngularJS charts plugin to add interactive charts to your web and mobil
77

88
You can access all the rich charting features like events, annotations, macros, themes, image-export etc. to make your visualizations stand-out.
99

10+
### Installation
11+
12+
13+
Install fusioncharts library
14+
```bash
15+
$ npm install fusioncharts --save
16+
```
17+
Alternatively you can use downloaded fusioncharts files.
18+
19+
20+
Install angular 1.x.x
21+
```bash
22+
# Any angular 1.x version is compatible
23+
$ npm install [email protected] --save
24+
```
25+
26+
Install angularjs-fusioncharts module
27+
```bash
28+
$ npm install angularjs-fusioncharts --save
29+
```
30+
Alternatively you can use downloaded angularjs-fusioncharts wrapper.
31+
32+
1033
### Demos
1134
To learn what you can do using this Angular charts plugin, explore some [live demos](http://www.fusioncharts.com/angularjs-charts/).
1235

36+
### Usage
37+
#### Step 1: Include angularjs-fusioncharts.js and fusioncharts
38+
In your index.html
39+
```xml
40+
<script type="text/javascript" src="node_modules/fusioncharts/fusioncharts.js"></script>
41+
<script type="text/javascript" src="node_modules/fusioncharts/themes/fusioncharts.theme.fusion.js"></script>
42+
<script type="text/javascript" src="node_modules/angular/angular.js"></script>
43+
<script type="text/javascript" src="node_modules/angularjs-fusioncharts/angularjs-fusioncharts.js"></script>
44+
```
45+
46+
### Step 2: Include ng-fusioncharts in your module
47+
In the app, include ng-fusioncharts as a dependency. If you looking for where to add the dependency, look for the call to angular.module in your code.
48+
49+
```javascript
50+
angular.module("myApp", ["ng-fusioncharts"]);
51+
```
52+
53+
### Step 3: Add the fusioncharts directive
54+
In your HTML, find the section where you wish to add the chart and add a <div> with the fusioncharts directive. We are assuming it's inside a controller called MyController which would change based on your usage.
55+
56+
```xml
57+
<div ng-controller="MyController">
58+
<div
59+
fusioncharts
60+
width="600"
61+
height="400"
62+
type="column2d"
63+
datasource="{{myDataSource}}">
64+
</div>
65+
</div>
66+
```
67+
68+
### Step 4:Populate required variables in controller
69+
In the previous code, we are binding to a scope variable myDataSource, but that hasn't been defined yet. In your controller, set the DataSource as you would for a regular FusionCharts JSON format DataSource ([see this](http://docs.fusioncharts.com/tutorial-getting-started-your-first-charts-building-your-first-chart.html) tutorial for a general introduction to this format).
70+
71+
72+
```javascript
73+
app.controller('MyController', function($scope){
74+
$scope.dataSource = {
75+
"chart": {
76+
"caption": "Countries With Most Oil Reserves [2017-18]",
77+
"subCaption": "In MMbbl = One Million barrels",
78+
"xAxisName": "Country",
79+
"yAxisName": "Reserves (MMbbl)",
80+
"numberSuffix": "K",
81+
"theme": "fusion"
82+
},
83+
"data": [
84+
{ "label": "Venezuela", "value": "290" },
85+
{ "label": "Saudi", "value": "260" },
86+
{ "label": "Canada", "value": "180" },
87+
{ "label": "Iran", "value": "140" },
88+
{ "label": "Russia", "value": "115" },
89+
{ "label": "UAE", "value": "100" },
90+
{ "label": "US", "value": "30" },
91+
{ "label": "China", "value": "30" }
92+
]
93+
};
94+
95+
});
96+
```
97+
And your chart should display when you load the page.
98+
99+
### Using `require()` syntax
100+
In script.js
101+
```javascript
102+
// Require AngularJS
103+
var angular = require('angular');
104+
105+
// Require FusionCharts
106+
var FusionCharts = require('fusioncharts');
107+
108+
// Include angularjs-fusioncharts
109+
require('angular-fusioncharts');
110+
111+
// Require Chart modules
112+
var Charts = require('fusioncharts/fusioncharts.charts');
113+
114+
// Require Fusion theme
115+
var FusionTheme = require('fusioncharts/themes/fusioncharts.theme.fusion');
116+
117+
// Initialize Charts with FusionCharts instance
118+
Charts(FusionCharts);
119+
120+
// Initialize FusionTheme with FusionCharts instance
121+
FusionTheme(FusionCharts);
122+
123+
var app = angular.module('myApp', [ 'ng-fusioncharts' ]);
124+
125+
app.controller('MyController', ['$scope', function($scope) {
126+
$scope.dataSource = {
127+
"chart": {
128+
"caption": "Countries With Most Oil Reserves [2017-18]",
129+
"subCaption": "In MMbbl = One Million barrels",
130+
"xAxisName": "Country",
131+
"yAxisName": "Reserves (MMbbl)",
132+
"numberSuffix": "K",
133+
"theme": "fusion"
134+
},
135+
"data": [
136+
{ "label": "Venezuela", "value": "290" },
137+
{ "label": "Saudi", "value": "260" },
138+
{ "label": "Canada", "value": "180" },
139+
{ "label": "Iran", "value": "140" },
140+
{ "label": "Russia", "value": "115" },
141+
{ "label": "UAE", "value": "100" },
142+
{ "label": "US", "value": "30" },
143+
{ "label": "China", "value": "30" }
144+
]
145+
};
146+
}]);
147+
```
148+
Use a bundler like `browserify` to bundle the script
149+
See the installation docs [here](http://browserify.org/)
150+
151+
```bash
152+
$ browserify script.js -o bundle.js
153+
```
154+
In `index.html`
155+
```xml
156+
<html>
157+
<head>
158+
159+
<!-- Include compiled bundle in script tag -->
160+
<script type="text/javascript" src="./bundle.js"></script>
161+
</head>
162+
163+
<body ng-app="myApp">
164+
<div ng-controller="MyController">
165+
<div
166+
fusioncharts
167+
width="600"
168+
height="400"
169+
type="column2d"
170+
datasource="{{myDataSource}}">
171+
</div>
172+
</div>
173+
</body>
174+
</html>
175+
176+
177+
```
178+
Load it in browser , Chart should get displayed
179+
13180
### Tutorial
14181

15182
Following tutorials will help you get started:

0 commit comments

Comments
 (0)