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
if (service.chart) // If a chart has been successfully instantiated.
120
+
if (service.chart) // If a chart is successfully instantiated.
121
121
service.chart.data(response.data);
122
122
});
123
123
}]);
124
124
```
125
125
126
126
127
-
## Available directives
127
+
## Available Directives
128
128
129
129
Directive | Code sample | Description
130
130
--- | --- | ---
131
-
anychart | `<div anychart></div>` | Supports attributes specific to this directive and generates a chart belonging to anychart module (not gantt, map or stock chart types)
132
-
anygantt | `<div anygantt></div>` | Supports specific attributes and generates a chart belonging to anygantt module (`ganttResource` and `ganttProject`)
133
-
anymap | `<div anymap></div>` |Supports specific attributes and generates a chart with map-specific series (`choropleth`, `bubbleMap`, etc.).
134
-
anystock | `<div anystock></div>` | Supports specific attributes and generates a Stock-Chart.
135
-
anychart-stage | `<div anychart-stage></div>` | Generates anychart [stage](http://docs.anychart.com/7.12.0/Dashboards/Stage-Based_Layout) to provide any kind of custom drawing (including dashboards)
131
+
anychart | `<div anychart></div>` | Supports attributes specific to this directive and generates a chart from anychart module (not gantt, map or stock chart types)
132
+
anygantt | `<div anygantt></div>` | Supports attributes specific to this directive and generates a chart from anygantt module (`ganttResource` and `ganttProject`)
133
+
anymap | `<div anymap></div>` |Supports attributes specific to this directive and generates a chart from anymap module (`choropleth`, `bubbleMap`, etc.).
134
+
anystock | `<div anystock></div>` | Supports attributes specific to this directive and generates a chart from anystock module (`anychart.stock`).
135
+
anychart-stage | `<div anychart-stage></div>` | Generates anychart [stage](http://docs.anychart.com/latest/Dashboards/Stage-Based_Layout) to deal with complex charts and any kind of custom drawing.
136
136
137
137
138
-
#### `anychart`-directive attributes
139
-
We use this directive to deal with charts included in anychart-module.
138
+
#### `anychart`directive attributes
139
+
This directive is used to work with charts from anychartmodule.
ac-type | `<div anychart ac-type="line"></div>` | - | Literally means what kind of simple chart will be created. In current sample, `anychart.line()`-constructor will be called.
144
-
ac-data | `<div anychart ac-data="myData"></div>` | `$scope.myData = [ ... ];`| This means that data must be put into a `$scope` of your controller in a field named `myData`. This value becomes a data source for chart. Please note, that for `anychart` directive we set the data with `chart.data()`-method. If chart doesn't have this method, then just use `ac-instance` directive instead (described below).
143
+
ac-type | `<div anychart ac-type="line"></div>` | - | Kind of chart to create. In a sample, `anychart.line()`constructor is called.
144
+
ac-data | `<div anychart ac-data="myData"></div>` | `$scope.myData = [ ... ];`| Data to be put into a `$scope` of your controller in a field named `myData`. This value is a data source for a chart. Please note that for `anychart` directive we set the data with `chart.data()`-method. If chart doesn't have this method, use `ac-instance` directive instead (described below).
145
145
ac-title | `<div anychart ac-title="My Custom Title"></div>` | - | Sets a string value to a chart title.
146
-
ac-legend | `<div anychart ac-legend="true"></div>` | - | Takes a string representation of boolean flag. Literally means whether to enable or disable the legend.
147
-
ac-instance | `<div anychart ac-instance="myChart"></div>` | `$scope.myChart = chart;` | It means that we create a chart instance in our controller manually and want to use it instead of auto-created. In this case we can configure a chart using [Anychart API](https://api.anychart.com/) and access the settings not available via these `ac`-attributes. To make it work, just create an instance manually, configure it and put into a `$scope` in specified field.
148
-
ac-chart-draw | `<div anychart ac-chart-draw="afterDrawHandler"></div>` | `$scope.afterDrawHandler = function(chart) { ... };` | Function called after the chart if drawn. Takes as argument that chart itself.
146
+
ac-legend | `<div anychart ac-legend="true"></div>` | - | A string representation of a boolean flag. Enables/disables a legend.
147
+
ac-instance | `<div anychart ac-instance="myChart"></div>` | `$scope.myChart = chart;` | Chart instance is created in a controller manually and it is used instead of auto-created. In this case a chart can be configired using [Anychart API](https://api.anychart.com/) and access to the settings is not available via these `ac`-attributes. To make it work, create an instance manually, configure it and put into a `$scope` in specified field.
148
+
ac-chart-draw | `<div anychart ac-chart-draw="afterDrawHandler"></div>` | `$scope.afterDrawHandler = function(chart) { ... };` | Function called after the chart is drawn. Takes a chart itself as and argument.
149
149
150
-
**Please note:**Here's no need to set a container of chart and call `chart.draw()`. This integration makes if automatically.
150
+
**Please note:**No need to set a container of a chart and call `chart.draw()`. The plugin does it automatically.
151
151
152
152
#### Sample:
153
153
```html
@@ -172,17 +172,14 @@ angular
172
172
```
173
173
174
174
175
-
#### `anychart-stage`-directive attributes
176
-
We use this directive to deal with anychart stage for custom drawing
177
-
and dashboarding purposes.
175
+
#### `anychart-stage` directive attributes
176
+
This directive is used to draw anychart stage for custom drawing and complex charts.
ac-instance | `<div anychart-stage ac-instance="myStage"></div>` | `$scope.myStage = stage;` | It means that we create a stage instance in our controller manually and want to use it instead of auto-created. In this case we can configure a stage using [Anychart API](https://api.anychart.com/) and access the settings not available via these `ac`-attributes. To make it work, just create an instance manually, configure it and put into a `$scope`in specified field.
180
+
ac-instance | `<div anychart-stage ac-instance="myStage"></div>` | `$scope.myStage = stage;` | A stage instances is created in a controller manually and it is used instead of auto-created. In this case a stage is configured using [Anychart API](https://api.anychart.com/) and access to the settings is not available via these `ac`-attributes. To make it work, create an instance manually, configure it and put into a `$scope`into a specified field.
182
181
183
-
184
-
We already know about AnychartService, well we can use it to deal with
185
-
anychart-stage for dashboarding purposes. Take a look on this sample:
182
+
[AnychartService](#anychartservice) can be used it to deal with anychart stage. Take a look at this sample:
186
183
187
184
```javascript
188
185
angular
@@ -218,75 +215,68 @@ angular
218
215
219
216
}]);
220
217
```
221
-
What's going on here?
222
-
* We create instances of `anychart.pie` and `anychart.line`.
223
-
*We configure it (data, bounds, title).
224
-
*We put it in `AnychartService.charts`. Please, note that we wrap `pie`-chart
225
-
with object with one more additional field `chartDraw`. Here `chartDraw` is
226
-
just a function that will be called after `pie`-chart is drawn with a single argument
227
-
that is `pie`-chart itself.
228
-
* Controller of `anychart-stage`-directive will process an `AnychartService.charts`-array
229
-
itself.
218
+
219
+
This is what happens in the sample above:
220
+
*Instances of `anychart.pie` and `anychart.line` are created.
221
+
*Data, bounds, title and so one are configured.
222
+
* Charts art put into `AnychartService.charts`. Note that we wrap `pie`-chart
223
+
into an object with one additional field:: `chartDraw`. `chartDraw` is
224
+
a function that is called after `pie`chart is drawn with a single argument
225
+
that is `pie` chart itself.
226
+
* Controller of `anychart-stage` directive processes the `AnychartService.charts` array.
230
227
231
228
232
-
#### `anygantt`-directive attributes
233
-
We use this directive to deal with charts included in anygantt-module
234
-
(`ganttResource`, `ganttProject`).
229
+
#### `anygantt` directive attributes
230
+
This directive is used to deal with charts from anygantt module (`ganttResource`, `ganttProject`).
ac-type | `<div anygantt ac-type="ganttProject"></div>` | - | Literally means what kind of gantt chart will be created. In current sample, `anychart.ganttProject()`-constructor will be called.
239
-
ac-data | `<div anygantt ac-data="myData"></div>` | `$scope.myData = tree;` | By analogue with corresponding directive of `anychart`-directive, we have to put created data tree into `$scope` in specified field.
234
+
ac-type | `<div anygantt ac-type="ganttProject"></div>` | - | Kind of gantt chart to be created. In a sample, `anychart.ganttProject()`-constructor will be called.
235
+
ac-data | `<div anygantt ac-data="myData"></div>` | `$scope.myData = tree;` | Just as the corresponding directive of `anychart`-directive, data tree is put into a `$scope` in a specified field.
240
236
ac-title | `<div anygantt ac-title="My Custom Title"></div>` | - | Sets a string value to a chart title.
241
-
ac-instance | `<div anygantt ac-instance="myChart"></div>` | `$scope.myChart = chart;` | Works with predefined chart instance (see `anychart`-directive).
242
-
ac-chart-draw | `<div anygantt ac-chart-draw="afterDrawHandler"></div>` | `$scope.afterDrawHandler = function(chart) { ... };` | Works the same way as described in `anychart`-directive.
243
-
ac-splitter-position | `<div anygantt ac-splitter-position="300"></div>` | - | Sets gantt chart splitter position. Does the same as `chart.splitterPosition(300)`.
244
-
245
-
246
-
247
-
#### `anymap`-directive attributes
248
-
We use this directive to deal with charts included in anymap-module
249
-
(`choropleth`, `bubbleMap`, etc).
237
+
ac-instance | `<div anygantt ac-instance="myChart"></div>` | `$scope.myChart = chart;` | Works with a predefined chart instance (see `anychart` directive).
238
+
ac-chart-draw | `<div anygantt ac-chart-draw="afterDrawHandler"></div>` | `$scope.afterDrawHandler = function(chart) { ... };` | Works the same way as described in `anychart` directive.
ac-geo-data | `<div anymap ac-geo-data="anychart.maps.australia"></div>` | - | Required attribute. Differs from `ac-data`: `ac-geo-data` sets the data all chart, while `ac-data` is a data for default map series.
ac-geo-data | `<div anymap ac-geo-data="anychart.maps.australia"></div>` | - | Required attribute. Differs from `ac-data`: `ac-geo-data` sets geo data source, `ac-data` is a data for the default map series.
262
253
263
-
#### `anystock`-directive attributes
264
-
Works only with `ac-instance` and `ac-chart-draw` attributes because of very specific
265
-
Stock Chart setup.
266
254
255
+
#### `anystock` directive attributes
256
+
Works only with `ac-instance` and `ac-chart-draw` attributes because of the specifics of Stock Chart setup.
267
257
268
258
## Demos overview
269
-
Demos folder content overview.
259
+
See these samples to learn how things work:
270
260
***[Anychart_Load_Data_From_Json.html](https://github.com/AnyChart/AnyChart-AngularJS/blob/master/demos/Anychart_Load_Data_From_Json.html)**: Demo of async data loading. Also
271
-
shows how AnychartService can be used. **Please, note:** This demo can be run on a server only because of cross origin requests security issues.
272
-
***[Full_Custom_Stage.html](https://github.com/AnyChart/AnyChart-AngularJS/blob/master/demos/Full_Custom_Stage.html)**: Demonstrates how to create and use full custom stage.
273
-
***[Gantt_Project_After_Draw.html](https://github.com/AnyChart/AnyChart-AngularJS/blob/master/demos/Gantt_Project_After_Draw.html)**: Shows how to simply create Gantt Project
274
-
Chart and setup after-draw handler.
261
+
shows how AnychartService can be used. **Please, note:** This demo can launched only from a web-server, in browser window, because of cross origin requests security issues.
262
+
***[Custom_Stage.html](https://github.com/AnyChart/AnyChart-AngularJS/blob/master/demos/Full_Custom_Stage.html)**: Demonstrates how to create and use a custom stage.
263
+
***[Gantt_Project_After_Draw.html](https://github.com/AnyChart/AnyChart-AngularJS/blob/master/demos/Gantt_Project_After_Draw.html)**: Shows how to create Gantt Project
264
+
Chart and add the after-draw handler.
275
265
***[Gantt_Resource_Instance_Usage.html](https://github.com/AnyChart/AnyChart-AngularJS/blob/master/demos/Gantt_Resource_Instance_Usage.html)**: Shows how to use manually created
276
-
instance og Gantt Resource chart and how to add after draw handler.
266
+
instance of a Gantt Resource chart and how to add the after-draw handler.
277
267
***[Line_Chart_After_Draw.html](https://github.com/AnyChart/AnyChart-AngularJS/blob/master/demos/Line_Chart_After_Draw.html)**: Demonstrates how to create and use instance
***[Simple_Charts_On_Stage.html](https://github.com/AnyChart/AnyChart-AngularJS/blob/master/demos/Simple_Charts_On_Stage.html)**: Demonstrates how to create and add simple
281
-
charts on anychart stage and how to add after draw handler.
271
+
charts on the anychart stage and how to add the after-draw handler.
***[Software_Sales_Dashboard.html](https://github.com/AnyChart/AnyChart-AngularJS/blob/master/demos/Software_Sales_Dashboard.html)**: Demonstrates how to use `anychart-stage`
287
-
directive to build interactive dashboard.
277
+
directive to build the interactive dashboard.
288
278
***[World_Map_Instance_After_Draw.html](https://github.com/AnyChart/AnyChart-AngularJS/blob/master/demos/World_Map_Instance_After_Draw.html)**: World map demo. Shows how to
289
-
use map chart instance and how to add after draw handler.
279
+
use map chart instance and how to add the after-draw handler.
0 commit comments