Skip to content

Commit

Permalink
Update README.md
Browse files Browse the repository at this point in the history 
proofread 99% ready
  • Loading branch information
@loki20beta
loki20beta authored Jan 16, 2017
1 parent 48f0455 commit 323830a
Showing 1 changed file with 64 additions and 74 deletions.
138 changes: 64 additions & 74 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,16 @@ AngularJS v1.x directives for AnyChart

=========

AngularJS v1.x directives for AnyChart provide and easy way to use [AnyChart JavaScript Charts](http://anychart.com)
AngularJS v1.x directives for AnyChart provide an easy way to use [AnyChart JavaScript Charts](http://anychart.com)
with [AngularJS Framework](https://angularjs.org/).

## Table of Contents

* [Download and install](#download-and-install)
* [Quick start](#quick-start)
* [AnychartService](#anychartservice)
* [Available directives](#available-directives)
* [Demos overview](#demos-overview)
* [Available Directives](#available-directives)
* [Demos Overview](#demos-overview)
* [Contacts](#contacts)
* [Links](#links)
* [License](#license)
Expand All @@ -30,7 +30,7 @@ You can install AngularJS-plugin using **npm**, **bower** or **yarn**:

#### Direct download

You can download AngularJS-plugin directly from the [dist](https://github.com/AnyChart/AnyChart-AngularJS/tree/master/dist) folder.
You can download AngularJS plugin directly from the [dist](https://github.com/AnyChart/AnyChart-AngularJS/tree/master/dist) folder.

## Quick start

Expand Down Expand Up @@ -108,7 +108,7 @@ AnychartService is an [Angular Service](https://docs.angularjs.org/guide/service
By default, AnychartService, as a shareable object, contains two fields:
* `AnychartService.charts` - an array that contains chart instances for
dashboarding purposes.
* `AnychartService.chart` - current chart. Auto- or manually- created.
* `AnychartService.chart` - current chart. Auto or manually created.
It is useful for any deferred actions like async data loading.

```javascript
Expand All @@ -117,37 +117,37 @@ angular
.controller('MyCtrl', ['$scope', '$http', 'AnychartService', function($scope, $http, AnychartService) {
var service = AnychartService;
$http.get('sample1.json').then(function(response) {
if (service.chart) // If a chart has been successfully instantiated.
if (service.chart) // If a chart is successfully instantiated.
service.chart.data(response.data);
});
}]);
```


## Available directives
## Available Directives

Directive | Code sample | Description
--- | --- | ---
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)
anygantt | `<div anygantt></div>` | Supports specific attributes and generates a chart belonging to anygantt module (`ganttResource` and `ganttProject`)
anymap | `<div anymap></div>` | Supports specific attributes and generates a chart with map-specific series (`choropleth`, `bubbleMap`, etc.).
anystock | `<div anystock></div>` | Supports specific attributes and generates a Stock-Chart.
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)
anychart | `<div anychart></div>` | Supports attributes specific to this directive and generates a chart from anychart module (not gantt, map or stock chart types)
anygantt | `<div anygantt></div>` | Supports attributes specific to this directive and generates a chart from anygantt module (`ganttResource` and `ganttProject`)
anymap | `<div anymap></div>` |Supports attributes specific to this directive and generates a chart from anymap module (`choropleth`, `bubbleMap`, etc.).
anystock | `<div anystock></div>` | Supports attributes specific to this directive and generates a chart from anystock module (`anychart.stock`).
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.


#### `anychart`-directive attributes
We use this directive to deal with charts included in anychart-module.
#### `anychart` directive attributes
This directive is used to work with charts from anychart module.

Attribute | View Sample | Controller Sample | Description
--- | --- | --- | ---
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.
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).
ac-type | `<div anychart ac-type="line"></div>` | - | Kind of chart to create. In a sample, `anychart.line()` constructor is called.
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).
ac-title | `<div anychart ac-title="My Custom Title"></div>` | - | Sets a string value to a chart title.
ac-legend | `<div anychart ac-legend="true"></div>` | - | Takes a string representation of boolean flag. Literally means whether to enable or disable the legend.
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.
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.
ac-legend | `<div anychart ac-legend="true"></div>` | - | A string representation of a boolean flag. Enables/disables a legend.
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.
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.

**Please note:** Here's no need to set a container of chart and call `chart.draw()`. This integration makes if automatically.
**Please note:** No need to set a container of a chart and call `chart.draw()`. The plugin does it automatically.

#### Sample:
```html
Expand All @@ -172,17 +172,14 @@ angular
```


#### `anychart-stage`-directive attributes
We use this directive to deal with anychart stage for custom drawing
and dashboarding purposes.
#### `anychart-stage` directive attributes
This directive is used to draw anychart stage for custom drawing and complex charts.

Attribute | View Sample | Controller Sample | Description
--- | --- | --- | ---
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.
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.


We already know about AnychartService, well we can use it to deal with
anychart-stage for dashboarding purposes. Take a look on this sample:
[AnychartService](#anychartservice) can be used it to deal with anychart stage. Take a look at this sample:

```javascript
angular
Expand Down Expand Up @@ -218,75 +215,68 @@ angular

}]);
```
What's going on here?
* We create instances of `anychart.pie` and `anychart.line`.
* We configure it (data, bounds, title).
* We put it in `AnychartService.charts`. Please, note that we wrap `pie`-chart
with object with one more additional field `chartDraw`. Here `chartDraw` is
just a function that will be called after `pie`-chart is drawn with a single argument
that is `pie`-chart itself.
* Controller of `anychart-stage`-directive will process an `AnychartService.charts`-array
itself.

This is what happens in the sample above:
* Instances of `anychart.pie` and `anychart.line` are created.
* Data, bounds, title and so one are configured.
* Charts art put into `AnychartService.charts`. Note that we wrap `pie`-chart
into an object with one additional field:: `chartDraw`. `chartDraw` is
a function that is called after `pie` chart is drawn with a single argument
that is `pie` chart itself.
* Controller of `anychart-stage` directive processes the `AnychartService.charts` array.


#### `anygantt`-directive attributes
We use this directive to deal with charts included in anygantt-module
(`ganttResource`, `ganttProject`).
#### `anygantt` directive attributes
This directive is used to deal with charts from anygantt module (`ganttResource`, `ganttProject`).

Attribute | View Sample | Controller Sample | Description
--- | --- | --- | ---
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.
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.
ac-type | `<div anygantt ac-type="ganttProject"></div>` | - | Kind of gantt chart to be created. In a sample, `anychart.ganttProject()`-constructor will be called.
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.
ac-title | `<div anygantt ac-title="My Custom Title"></div>` | - | Sets a string value to a chart title.
ac-instance | `<div anygantt ac-instance="myChart"></div>` | `$scope.myChart = chart;` | Works with predefined chart instance (see `anychart`-directive).
ac-chart-draw | `<div anygantt ac-chart-draw="afterDrawHandler"></div>` | `$scope.afterDrawHandler = function(chart) { ... };` | Works the same way as described in `anychart`-directive.
ac-splitter-position | `<div anygantt ac-splitter-position="300"></div>` | - | Sets gantt chart splitter position. Does the same as `chart.splitterPosition(300)`.



#### `anymap`-directive attributes
We use this directive to deal with charts included in anymap-module
(`choropleth`, `bubbleMap`, etc).
ac-instance | `<div anygantt ac-instance="myChart"></div>` | `$scope.myChart = chart;` | Works with a predefined chart instance (see `anychart` directive).
ac-chart-draw | `<div anygantt ac-chart-draw="afterDrawHandler"></div>` | `$scope.afterDrawHandler = function(chart) { ... };` | Works the same way as described in `anychart` directive.
ac-splitter-position | `<div anygantt ac-splitter-position="300"></div>` | - | Sets gantt chart splitter position.

#### `anymap` directive attributes
This directive is used to deal with charts from anymap module (`choropleth`, `bubbleMap`, etc).

Attribute | View Sample | Controller Sample | Description
--- | --- | --- | ---
ac-type | `<div anymap ac-type="ganttProject"></div>` | - | See `anychart`-directive corresponding attribute.
ac-data | `<div anymap ac-data="myData"></div>` | `$scope.myData = data;` | See `anychart`-directive corresponding attribute.
ac-title | `<div anymap ac-title="My Custom Title"></div>` | - | See `anychart`-directive corresponding attribute.
ac-legend | `<div anymap ac-legend="true"></div>` | - | See `anychart`-directive corresponding attribute.
ac-instance | `<div anymap ac-instance="myChart"></div>` | `$scope.myChart = chart;` | See `anychart`-directive corresponding attribute.
ac-chart-draw | `<div anymap ac-chart-draw="afterDrawHandler"></div>` | `$scope.afterDrawHandler = function(chart) { ... };` | See `anychart`-directive corresponding attribute.
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-type | `<div anymap ac-type="map"></div>` | - | See `anychart` directive corresponding attribute.
ac-data | `<div anymap ac-data="myData"></div>` | `$scope.myData = data;` | See `anychart` directive corresponding attribute.
ac-title | `<div anymap ac-title="My Custom Title"></div>` | - | See `anychart` directive corresponding attribute.
ac-legend | `<div anymap ac-legend="true"></div>` | - | See `anychart` directive corresponding attribute.
ac-instance | `<div anymap ac-instance="myChart"></div>` | `$scope.myChart = chart;` | See `anychart` directive corresponding attribute.
ac-chart-draw | `<div anymap ac-chart-draw="afterDrawHandler"></div>` | `$scope.afterDrawHandler = function(chart) { ... };` | See `anychart` directive corresponding attribute.
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.

#### `anystock`-directive attributes
Works only with `ac-instance` and `ac-chart-draw` attributes because of very specific
Stock Chart setup.

#### `anystock` directive attributes
Works only with `ac-instance` and `ac-chart-draw` attributes because of the specifics of Stock Chart setup.

## Demos overview
Demos folder content overview.
See these samples to learn how things work:
* **[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
shows how AnychartService can be used. **Please, note:** This demo can be run on a server only because of cross origin requests security issues.
* **[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.
* **[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
Chart and setup after-draw handler.
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.
* **[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.
* **[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
Chart and add the after-draw handler.
* **[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
instance og Gantt Resource chart and how to add after draw handler.
instance of a Gantt Resource chart and how to add the after-draw handler.
* **[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
of chart and add after draw handler.
* **[Line_Chart_Data_Streaming.html](https://github.com/AnyChart/AnyChart-AngularJS/blob/master/demos/Line_Chart_Data_Streaming.html)**: Simple data streaming demo.
of a chart and add the after-draw handler.
* **[Line_Chart_Data_Streaming.html](https://github.com/AnyChart/AnyChart-AngularJS/blob/master/demos/Line_Chart_Data_Streaming.html)**: Simple data-streaming demo.
* **[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
charts on anychart stage and how to add after draw handler.
charts on the anychart stage and how to add the after-draw handler.
* **[Simple_Gantt_Project.html](https://github.com/AnyChart/AnyChart-AngularJS/blob/master/demos/Simple_Gantt_Project.html)**: Simple Gantt Project Chart demo.
* **[Simple_Map.html](https://github.com/AnyChart/AnyChart-AngularJS/blob/master/demos/Simple_Map.html)**: Simple Anymap demo.
* **[Simple_Pie.html](https://github.com/AnyChart/AnyChart-AngularJS/blob/master/demos/Simple_Pie.html)**: Simple pie-chart demo.
* **[Simple_Stock_Area.html](https://github.com/AnyChart/AnyChart-AngularJS/blob/master/demos/Simple_Stock_Area.html)**: Simple Anystock demo.
* **[Simple_Pie.html](https://github.com/AnyChart/AnyChart-AngularJS/blob/master/demos/Simple_Pie.html)**: Simple Pie chart demo.
* **[Simple_Stock_Area.html](https://github.com/AnyChart/AnyChart-AngularJS/blob/master/demos/Simple_Stock_Area.html)**: Simple AnyStock demo.
* **[Software_Sales_Dashboard.html](https://github.com/AnyChart/AnyChart-AngularJS/blob/master/demos/Software_Sales_Dashboard.html)**: Demonstrates how to use `anychart-stage`
directive to build interactive dashboard.
directive to build the interactive dashboard.
* **[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
use map chart instance and how to add after draw handler.
use map chart instance and how to add the after-draw handler.


## Contacts
Expand Down

0 comments on commit 323830a

Please sign in to comment.