https://github.com/anychart/anychart-ember
AnyChart Component for Ember CLI provides an easy way to use AnyChart JavaScript Charts with Ember Framework.
https://github.com/anychart/anychart-ember
Last synced: 11 months ago
JSON representation
AnyChart Component for Ember CLI provides an easy way to use AnyChart JavaScript Charts with Ember Framework.
- Host: GitHub
- URL: https://github.com/anychart/anychart-ember
- Owner: AnyChart
- License: apache-2.0
- Created: 2016-12-19T02:30:43.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2018-03-29T04:16:14.000Z (almost 8 years ago)
- Last Synced: 2025-03-21T16:22:11.545Z (12 months ago)
- Language: JavaScript
- Homepage: https://www.anychart.com/
- Size: 2.27 MB
- Stars: 12
- Watchers: 18
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
[
](https://www.anychart.com)
Ember Plugin for AnyChart
=========================
AnyChart Component for Ember CLI provides an easy way to use [AnyChart JavaScript Charts](https://www.anychart.com) with [Ember Framework](http://emberjs.com/).
## Download and install
### Install dependencies
First, you need to download and install [NodeJS](https://nodejs.org/en/) if you don’t have it installed already.
To use the **ember-anychart** plugin, you should also have [Bower](https://bower.io/) and [Ember CLI](https://ember-cli.com/) installed.
* `npm install -g bower`
* `npm install -g ember-cli`
### Install plugin globally
You can install **ember-anychart** plugin using **npm** or **yarn** package managers:
* `npm install -g ember-anychart`
* `yarn global add ember-anychart`
### Install plugin into a project
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"}}
```
### Component attributes
| 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.
### How to run a sample application
You should have NodeJs, Ember, and Bower installed. See [Download and install](#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*
### Sample files
| 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](www.anychart.com)
* Email: [contact@anychart.com](mailto:contact@anychart.com)
* Twitter: [anychart](https://twitter.com/anychart)
* Facebook: [AnyCharts](https://www.facebook.com/AnyCharts)
* LinkedIn: [anychart](https://www.linkedin.com/company/anychart)
## Links
* [AnyChart Website](https://www.anychart.com)
* [Download AnyChart](https://www.anychart.com/download/)
* [AnyChart Licensing](https://www.anychart.com/buy/)
* [AnyChart Support](https://www.anychart.com/support/)
* [Report Issues](https://github.com/AnyChart/AnyChart-Ember/issues)
* [AnyChart Playground](https://playground.anychart.com)
* [AnyChart Documentation](https://docs.anychart.com)
* [AnyChart API Reference](https://api.anychart.com)
* [AnyChart Sample Solutions](https://www.anychart.com/solutions/)
* [AnyChart Integrations](https://www.anychart.com/integrations/)
## License
[© AnyChart.com - JavaScript charts](https://www.anychart.com).
[](https://github.com/igrigorik/ga-beacon)