AngularJS v2.x directives for AnyChart
=========
AngularJS v2.x directives for AnyChart provide an easy way to use AnyChart JavaScript Charts
with Angular2 Framework.
Table of Contents
Download and install
Package managers
You can install Angular2-plugin using npm, bower or yarn:npm install anychart-angular2
bower install anychart-angular2
yarn add anychart-angular2
Direct download
You can download compiled Angular2 components directly from the
dist folder.
Please, note: components.js and
components.d.ts files
export basic Anychart-Angular2 integration functionality.
Quick start
Here's a basic sample that shows how to quickly create an Angular2 application with AnyChart component: ```html<title>Angular Quick Start</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<!-- Add zone.js (https://github.com/angular/zone.js/) -->
<script src="node_modules/zone.js/dist/zone.js"></script>
<!-- Add modules loader -->
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- Include anychart component -->
<script src="node_modules/anychart/dist/anychart-bundle.min.js"></script>
<!-- General section, this configuration adds all the requirements to run -->
<script src="systemjs.config.js"></script>
<script>
//Import of application to run.
System.import('app').catch(function(err){ console.error(err); });
</script>
Loading AppComponent content here ...
```
Run the demo
1) Go to any of demos directory 2) Install all dependencies withnpm install
command.
3) Start the demo with npm run start
command.
Build
1) Despite the AnyChart-Angular2 integration is available with package managers, the license allows to modify and use it freely (though you need AnyChart license to use the library itself in commercial projects). This quick start guide clarifies the structure of integration project and explains how it works and how it can be used. If the integration is cloned from GitHub and Node Package Manager (npm
command) is available in command line, the following command compiles source code to dist/ directory:
```sh
npm run build
```
2) If needed, package.json
of demo-application can be configured to declare custom run-commands
and to add required dependencies excepting already included.
3) Run npm install
command to load all required npm modules.
4) Configure systemjs.config.js
to declare the mapping of dependencies of
application (see any demo
to see the basic configuration). In 'map'-section AnyChart integration library is declared:
```
...
'anychart-angular2': 'nodemodules/anychart-angular2'
```
5) In 'packages'-section anychart-angular2 library is declared:
```
'anychart-angular2': {
main: 'index'
}
```
6) These actions allow to use anychart-angular2 integration in an application
like one described in Quick start.
7) Since 'app' folder is declared in systemjs.config.js
as application root
directory, the application's Angular2 modules and components can be created
right there.
Package directory
``` ├── def │ ├── anychart.d.ts │ ... ├── dist │ ├── anychart.directive.d.ts │ ├── anychart.directive.js │ ... ├── src │ ├── anychart.directive.ts │ ├── anychart.service.ts │ ... │ components.d.ts │ components.js │ package.json │ LICENSE │ README.md │ ... ```- def/anychart.d.ts -
- dist/ -
js
and d.ts
files. The general component
declarations (components.js and components.d.ts) rely on this directory
content.
- src/ -
- components.d.ts and components.js -
- package.json -
Demos overview
See these samples to learn how things work:- Load Data From JSON: Async data loading sample. Also
- Gantt Project After Draw: Shows how to create a Gantt Project
- Gantt Resource with Instance: Shows how to use manually created
- Line Chart After Draw: Shows how to create and use instance
- Line Chart Data Streaming: Simple data streaming demo.
- Simple Charts On Stage: Shows how to create and add simple
- Simple Gantt Project: Simple Gantt Project Chart demo.
- Simple Map: Simple AnyMap demo.
- Simple Pie: Simple Pie chart demo.
- Simple Stock Area: Simple AnyStock demo.
- Software Sales Dashboard: Shows how to use
anychart-stage
- World Map Instance After Draw: World map demo. Shows how to
Contacts
- Web: www.anychart.com
- Email: contact@anychart.com
- Twitter: anychart
- Facebook: AnyCharts
- LinkedIn: anychart
Links
License
AnyChart Angular2 plugin includes two parts:- code of the plugin that allows to use Javascript library (in this case, AnyChart)
- AnyChart JavaScript library. It is released under Commercial license.