Table of Contents
Download and install
Install dependencies
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
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:
npm install --save ember-anychart
ember install --save ember-anychart
yarn add ember-anychart
And complete installation by generation plugin blueprint
ember generate ember-anychart
Usage
Use the following custom element in a Handlebars template file:
// 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.
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. |
License
© AnyChart.com - JavaScript charts. AnyChart Ember pluigin is released under the Apache 2.0 License.