You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
### 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
+
<divng-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('angularjs-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' ]);
0 commit comments