ember-anychart

Ember Plugin for AnyChart
=========================

AnyChart Component for Ember CLI provides an easy way to use AnyChart JavaScript Charts with Ember Framework.

Download and install

$3

First, you need to download and install NodeJS if you don’t have it installed already.

To use the ember-anychart plugin, you should also have Bower and Ember CLI installed.

* npm install -g bower
* npm install -g ember-cli

$3

You can install ember-anychart plugin using npm or yarn package managers:
* npm install -g ember-anychart
* yarn global add ember-anychart

$3

To install ember-anychart plugin into an ember project, navigate to project directory and install the package:

* ember install --save ember-anychart
* npm install --save ember-anychart
* yarn add ember-anychart

If you installed plugin via npm or yarn then you should complete installation by generation plugin blueprint
* ember generate ember-anychart

Usage

Use the following custom element in a Handlebars template file:

``handlebars
// Create a simple chart using attributes
{{ember-anychart type="pie" data=someData title="My simple chart"}}

// Create a chart using chart instance
{{ember-anychart instance=model.chart}}

// Create a dashboard using a stage instance
{{ember-anychart instance=model.stage}}

// Also you can set id and class of a container where chart is placed
{{ember-anychart instance=model.chart id="chart-container" class="custom-styled-container"}}
`

$3

| Attribute | Type | Description | Required |
| :------------- |:-------------:| :----| :---- |
| instance | Object | A chart or a stage instance. If you use this parameter, then type attribute is ignored. | Required (if type is not defined) |
| type | String | Chart type. Use this to create a simple chart. This parameter is ignored when an instance is defined. | Required (if instance is not defined) |
| afterDraw | Function | Chart after draw callback function. This parameter is ignored when 'instance' param is defined and it is a stage instance. | optional |
| A chart or stage settings | | You can use any chart or stage settings as an attribute, like data, title, label, legend and so on. | optional |

Examples

Please see a sample applications in the ember-anychart/tests/dummy/ folder.

$3

You should have NodeJs, Ember, and Bower installed. See Download and install.

Clone and install:
`
git clone https://github.com/AnyChart/AnyChart-Ember
cd AnyChart-Ember
npm install
bower install
ember server
``

Then open browser at http://localhost:4200

$3

| Example | Files | Description |
| :--- |:---| :----|
|Simple chart|ember-anychart/tests/dummy/app/routes/simple-chart.js
ember-anychart/tests/dummy/app/templates/simple-chart.hbs|Shows how to create a simple Line Chart by creating chart instance and passing it to instance attribute of the component.|
|Chart with custom settings|ember-anychart/tests/dummy/app/routes/chart-with-custom-settings.js
ember-anychart/tests/dummy/app/templates/chart-with-custom-settings.hbs|Shows a simple Pie Chart with type, data and title attributes.
Also shows how to use afterDraw callback.|
|Simple dashboard|ember-anychart/tests/dummy/app/routes/simple-dashboard.js
ember-anychart/tests/dummy/app/templates/simple-dashboard.hbs|Dashboard with stage instance set to instance attribute.|
|Chart with dynamic settings|ember-anychart/tests/dummy/app/routes/chart-with-dynamic-settings.js
ember-anychart/tests/dummy/app/templates/chart-with-dynamic-settings.hbs
ember-anychart/tests/dummy/app/controllers/chart-with-dynamic-settings.js|Dynamic change of chart palette setting with the help of ember controller action.|
|Data streaming|ember-anychart/tests/dummy/app/routes/data-streaming.js
ember-anychart/tests/dummy/app/templates/data-streaming.hbs|Dynamic change of chart data.|
|Simple stock chart|ember-anychart/tests/dummy/app/routes/simple-stock-chart.js
ember-anychart/tests/dummy/app/templates/simple-stock-chart.hbs
ember-anychart/tests/dummy/public/stock-data.json|A simple Stock Chart. Shows how you can load a big data set from a JSON file.|
|Geographical colored map|ember-anychart/tests/dummy/app/routes/geographical-colored-map.js
ember-anychart/tests/dummy/app/templates/geographical-colored-map.hbs
ember-anychart/tests/dummy/public/united_states_of_america.topo.json|Colored Geographical Map with geo data loaded from a file.|
|Simple gantt chart |ember-anychart/tests/dummy/app/routes/simple-gantt-chart.js
ember-anychart/tests/dummy/app/templates/simple-gantt-chart.hbs|Simple Gantt Chart.|

Versions

Code in the v1.1.1* branch works with Ember version 2.10
Code in the master* branch works with Ember version 2.14 and higher

Contacts

* Web: www.anychart.com
* Email: contact@anychart.com
* Twitter: anychart
* Facebook: AnyCharts
* LinkedIn: anychart

Links

* AnyChart Website
* Download AnyChart
* AnyChart Licensing
* AnyChart Support
* Report Issues
* AnyChart Playground
* AnyChart Documentation
* AnyChart API Reference
* AnyChart Sample Solutions
* AnyChart Integrations

License

© AnyChart.com - JavaScript charts.