Skip to content

Commit

Permalink
Added an ability to use Highstock and Highmaps
Browse files Browse the repository at this point in the history
The addon no longer automatically imports the Highcharts Bower package, letting user import desired package manually
  • Loading branch information
lolmaus committed Mar 5, 2015
1 parent 301b8b7 commit 38e06eb
Show file tree
Hide file tree
Showing 6 changed files with 54 additions and 12 deletions.
41 changes: 38 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,22 +4,47 @@ A [Highcharts](http://www.highcharts.com/) component for [Ember CLI](http://www.

## Installation

* `ember install:addon ember-highcharts`
1. Install the addon:

ember install:addon ember-highcharts
2. Depending on whether you want to use Highcharts, Highstock or Highmaps, install corresponding Bower package.

Do **one** of the following commands:

bower install --save highcharts-release
bower install --save highstock-release
bower install --save highmaps-release
3. In your `Brocfile.js`, tell Broccoli to import the package you have just installed.

Add **one** of the following lines:

app.import('bower_components/highcharts-release/highcharts.src.js');
app.import('bower_components/highstock-release/highstock.src.js');
app.import('bower_components/highmaps-release/highmaps.src.js');
Depending on what Highcharts features you're gonna use, you might need to import additional files. Refer to Highcharts documentation.

## Usage

In your template:

```handlebars
{{high-charts content=chartData chartOptions=chartOptions}}
{{high-charts mode=chartMode content=chartData chartOptions=chartOptions}}
```

Then in a controller you can set the `chartData` and `chartOptions` values:
Then in a controller you can set the `chartMode`, `chartData` and `chartOptions` values:

```javascript
import Ember from 'ember';

export default Ember.Controller.extend({
chartMode: 'StockChart', // Available options: a falsy value, 'StockChart', 'Map'.
// If `mode` is not provided or is a falsy value, the chart is initialized in Charts mode.
// If `mode` is a string, it is passed to Highcharts as the first argument.
// When Highcharts introduces a new mode, you will be able to use it here right away.

chartOptions: {
chart: {
type: 'bar'
Expand All @@ -36,6 +61,7 @@ export default Ember.Controller.extend({
}
}
},

chartData: [
{
name: 'Jane',
Expand Down Expand Up @@ -67,6 +93,15 @@ file should provide a hook that returns the final configuration.
}
```


## Credit

This add-on is built based on the [gist](https://gist.github.com/poteto/cd2bb47e77bf87c94d33) and [medium](https://medium.com/delightful-ui-for-ember-apps/using-highcharts-js-in-an-ember-app-18a65d611644) by [@poteto](https://github.com/poteto)


## Changelog

### 0.0.5

- Added an ability to use Highstock and Highmaps.
- The addon no longer automatically imports the Highcharts Bower package, letting user import desired package manually.
14 changes: 11 additions & 3 deletions addon/components/high-charts.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { setDefaultHighChartOptions } from '../utils/option-loader';
export default Ember.Component.extend({
classNames: ['highcharts-wrapper'],
content: undefined,
mode: undefined,
chartOptions: undefined,
chart: null,

Expand Down Expand Up @@ -50,9 +51,16 @@ export default Ember.Component.extend({
},

draw: function() {
var options;
options = this.get('buildOptions');
this.set('chart', this.$().highcharts(options).highcharts());
var options, mode, $element, chart;
options = [ this.get('buildOptions') ];
mode = this.get('mode');
if ( typeof mode === 'string' && !!mode) {
options.unshift(mode);
};
Ember.Logger.debug('mode', mode);
$element = this.$();
chart = $element.highcharts.apply($element, options).highcharts();
this.set('chart', chart);
},

_destroyChart: (function() {
Expand Down
3 changes: 2 additions & 1 deletion blueprints/ember-highcharts/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ module.exports = {
normalizeEntityName: function() {},

afterInstall: function() {
return this.addBowerPackageToProject('highcharts-release#~4.0.4');
// We expect the user to add the package he needs
//return this.addBowerPackageToProject('highcharts-release#~4.0.4');
}
};
3 changes: 0 additions & 3 deletions bower.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,5 @@
"ember-qunit": "0.1.8",
"ember-qunit-notifications": "0.0.5",
"qunit": "~1.17.1"
},
"devDependencies": {
"highcharts-release": "~4.0.4"
}
}
3 changes: 2 additions & 1 deletion index.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ module.exports = {
included: function(app) {
this._super.included(app);

app.import(app.bowerDirectory + '/highcharts-release/highcharts.js');
// We expect the user to add the package he needs
//app.import(app.bowerDirectory + '/highcharts-release/highcharts.js');
}
};
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "ember-highcharts",
"version": "0.0.4",
"version": "0.0.5",
"description": "A Highcharts component for ember cli",
"directories": {
"doc": "doc",
Expand Down

0 comments on commit 38e06eb

Please sign in to comment.