From 323830a3cc2b2183fcdbeccda798e6a65b934da2 Mon Sep 17 00:00:00 2001 From: "Timothy A. Loginov" Date: Tue, 17 Jan 2017 02:16:40 +0300 Subject: [PATCH] Update README.md proofread 99% ready --- README.md | 138 +++++++++++++++++++++++++----------------------------- 1 file changed, 64 insertions(+), 74 deletions(-) diff --git a/README.md b/README.md index 74fb043..bacdce1 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ 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 @@ -12,8 +12,8 @@ with [AngularJS Framework](https://angularjs.org/). * [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) @@ -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 @@ -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 @@ -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 | `
` | Supports attributes specific to this directive and generates a chart belonging to anychart module (not gantt, map or stock chart types) -anygantt | `
` | Supports specific attributes and generates a chart belonging to anygantt module (`ganttResource` and `ganttProject`) -anymap | `
` | Supports specific attributes and generates a chart with map-specific series (`choropleth`, `bubbleMap`, etc.). -anystock | `
` | Supports specific attributes and generates a Stock-Chart. -anychart-stage | `
` | Generates anychart [stage](http://docs.anychart.com/7.12.0/Dashboards/Stage-Based_Layout) to provide any kind of custom drawing (including dashboards) +anychart | `
` | Supports attributes specific to this directive and generates a chart from anychart module (not gantt, map or stock chart types) +anygantt | `
` | Supports attributes specific to this directive and generates a chart from anygantt module (`ganttResource` and `ganttProject`) +anymap | `
` |Supports attributes specific to this directive and generates a chart from anymap module (`choropleth`, `bubbleMap`, etc.). +anystock | `
` | Supports attributes specific to this directive and generates a chart from anystock module (`anychart.stock`). +anychart-stage | `
` | 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 | `
` | - | Literally means what kind of simple chart will be created. In current sample, `anychart.line()`-constructor will be called. -ac-data | `
` | `$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 | `
` | - | Kind of chart to create. In a sample, `anychart.line()` constructor is called. +ac-data | `
` | `$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 | `
` | - | Sets a string value to a chart title. -ac-legend | `
` | - | Takes a string representation of boolean flag. Literally means whether to enable or disable the legend. -ac-instance | `
` | `$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 | `
` | `$scope.afterDrawHandler = function(chart) { ... };` | Function called after the chart if drawn. Takes as argument that chart itself. +ac-legend | `
` | - | A string representation of a boolean flag. Enables/disables a legend. +ac-instance | `
` | `$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 | `
` | `$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 @@ -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 | `
` | `$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 | `
` | `$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 @@ -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 | `
` | - | Literally means what kind of gantt chart will be created. In current sample, `anychart.ganttProject()`-constructor will be called. -ac-data | `
` | `$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 | `
` | - | Kind of gantt chart to be created. In a sample, `anychart.ganttProject()`-constructor will be called. +ac-data | `
` | `$scope.myData = tree;` | Just as the corresponding directive of `anychart`-directive, data tree is put into a `$scope` in a specified field. ac-title | `
` | - | Sets a string value to a chart title. -ac-instance | `
` | `$scope.myChart = chart;` | Works with predefined chart instance (see `anychart`-directive). -ac-chart-draw | `
` | `$scope.afterDrawHandler = function(chart) { ... };` | Works the same way as described in `anychart`-directive. -ac-splitter-position | `
` | - | 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 | `
` | `$scope.myChart = chart;` | Works with a predefined chart instance (see `anychart` directive). +ac-chart-draw | `
` | `$scope.afterDrawHandler = function(chart) { ... };` | Works the same way as described in `anychart` directive. +ac-splitter-position | `
` | - | 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 | `
` | - | See `anychart`-directive corresponding attribute. -ac-data | `
` | `$scope.myData = data;` | See `anychart`-directive corresponding attribute. -ac-title | `
` | - | See `anychart`-directive corresponding attribute. -ac-legend | `
` | - | See `anychart`-directive corresponding attribute. -ac-instance | `
` | `$scope.myChart = chart;` | See `anychart`-directive corresponding attribute. -ac-chart-draw | `
` | `$scope.afterDrawHandler = function(chart) { ... };` | See `anychart`-directive corresponding attribute. -ac-geo-data | `
` | - | 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 | `
` | - | See `anychart` directive corresponding attribute. +ac-data | `
` | `$scope.myData = data;` | See `anychart` directive corresponding attribute. +ac-title | `
` | - | See `anychart` directive corresponding attribute. +ac-legend | `
` | - | See `anychart` directive corresponding attribute. +ac-instance | `
` | `$scope.myChart = chart;` | See `anychart` directive corresponding attribute. +ac-chart-draw | `
` | `$scope.afterDrawHandler = function(chart) { ... };` | See `anychart` directive corresponding attribute. +ac-geo-data | `
` | - | 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