File "README.md"

Full Path: /home/analogde/www/php/integrations/ember/README.md
File size: 3.78 KB
MIME-type: text/x-java
Charset: utf-8

#### [Demos and Documentation](https://fusioncharts.github.io/ember-fusioncharts/)

# Ember-Fusioncharts

A lightweight EmberJS component which provides bindings for FusionCharts JavaScript Charting Library. It easily adds rich and interactive charts to any ambitious Ember application.

## Installation

To install `ember-fusioncharts` to any existing ember project, run:

For Modern Ember CLI:
```bash
$ ember install ember-fusioncharts
```

For Earlier Ember CLI (and addon developers):
```bash
$ npm install ember-fusioncharts --save-dev
$ ember g ember-fusioncharts
```

Then import `fusioncharts` library to your `ember-cli-build.js` build file:
```javascript
/* eslint-env node */
'use strict';

const EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    // Add options here
  });

  // Import fusioncharts library
  app.import('bower_components/fusioncharts/fusioncharts.js');
  app.import('bower_components/fusioncharts/fusioncharts.charts.js');
  app.import('bower_components/fusioncharts/themes/fusioncharts.theme.fint.js');
  app.import('bower_components/fusioncharts/themes/fusioncharts.theme.ocean.js');

  // Use `app.import` to add additional libraries to the generated
  // output files.
  //
  // If you need to use different assets in different
  // environments, specify an object as the first parameter. That
  // object's keys should be the environment name and the values
  // should be the asset to use in that environment.
  //
  // If the library that you are including contains AMD or ES6
  // modules that you would like to import into your application
  // please specify an object with the list of modules as keys
  // along with the exports of each module as its value.

  return app.toTree();
};

```

## Getting Started

After installing `ember-fusioncharts`, create a simple component(e.g. `chart-viewer`, also you can use it anywhere in your application) to show your interactive charts, run:
```bash
$ ember g component chart-viewer
```

Write your chart logic in `chart-viewer.js` file:
```javascript
import Component from '@ember/component';

const myDataSource = {
    "chart": {
        "caption": "Harry's SuperMart",
        "subCaption": "Top 5 stores in last month by revenue",
        "numberPrefix": "$",
        "theme": "fint"
    },
    "data": [
        {
            "label": "Bakersfield Central",
            "value": "880000"
        },
        {
            "label": "Garden Groove harbour",
            "value": "730000"
        },
        {
            "label": "Los Angeles Topanga",
            "value": "590000"
        },
        {
            "label": "Compton-Rancho Dom",
            "value": "520000"
        },
        {
            "label": "Daly City Serramonte",
            "value": "330000"
        }
    ]
};

export default Component.extend({
    title: 'Ember FusionCharts Sample',
    width: 600,
    height: 400,
    type: 'column2d',
    dataFormat: 'json',
    dataSource: myDataSource
});
```

And use `fusioncharts-xt` component in your `chart-viewer.hbs` template to show your charts:
```html
<h1>{{ title }}</h1>

{{fusioncharts-xt
    width=width
    height=height
    type=type
    dataFormat=dataFormat
    dataSource=dataSource}}
```

Then, use `chart-viewer` component in your `application.hbs` template:

```html
{{chart-viewer}}

{{outlet}}
```

## Test

```sh
$ npm test
```

## Contributing

* Clone the repository.
* Install dependencies.
* Run `npm start` to start the dev server.
* Open `http://localhost:4200/` in your browser.

```sh
$ git clone https://github.com/fusioncharts/ember-fusioncharts.git
$ cd ember-fusioncharts
$ npm i && bower install
$ npm start
```

To build, run:
```sh
$ npm run build
```

### [Demos and Documentation](https://fusioncharts.github.io/ember-fusioncharts/)