A Highcharts, HighStock and HighMaps component for ember cli extended with a solid gauge
npm install ember-highcharts-extraA Highcharts, Highstock and Highmaps component for Ember CLI.
``
ember install:addon ember-highcharts-extra
This addon will use Highcharts by default, if you want to use Highstocks, Highmaps, Highcharts-more and/or Highcharts-3D, add this options to your Brocfile.js:
`javascript`
var app = new EmberApp({
---
emberHighCharts: {
includeHighCharts: false,
includeHighStock: true,
includeHighMaps: true,
includeHighChartsMore: true,
includeHighCharts3D: true,
includeSolidGauge: true,
}
---
});
In your template:
`handlebars`
{{high-charts mode=chartMode content=chartData chartOptions=chartOptions theme=theme}}
Then in a controller you can set the chartMode, chartData, chartOptions and theme values:
`javascript
import Ember from 'ember';
import defaultTheme from '../themes/default-theme';
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.mode
// If 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'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
}
},
chartData: [
{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}
],
theme: defaultTheme
});
`
Ember-highcharts provides its own set of default configurations in
addon/utils/option-loader.js. At runtime you can optionally configure customapp/highcharts-configs/application.js
styles by providing a file. This
file should provide a hook that returns the final configuration.
`javascript
// app/highcharts-configs/application.js
export default function(defaultOptions) {
defaultOptions.credits.href = 'http://www.my-great-chart.com';
defaultOptions.credits.text = 'great charts made cheap';
defaultOptions.credits.enabled = true;
return defaultOptions;
}
`
Ember-highcharts also provides blueprints to easily create sub-classes of the default high-charts component.
`bash`
ember generate chart
This addon observes changes to chartData and redraws the chart using the highcharts
Series.setData method. You can extend this
component to handle advanced redrawing use cases like dynamically updating labels and titles
(ex: Chart.setTitle()).
`javascript
// components/dynamic-high-charts.js
import Ember from 'ember';
import EmberHighChartsComponent from 'ember-highcharts/components/high-charts';
export default EmberHighChartsComponent.extend({
contentDidChange: Ember.observer('content.@each.isLoaded', function() {
// add redraw logic here. ex:
var chart = this.get('chart');
var seriesName = this.get('content')[0].name;
chart.series[0].update({ name: seriesName, data: this.get('content')[0].data }, false);
chart.setTitle(null, { text: seriesName }, false);
chart.redraw();
})
});
`
`handlebars``
{{dynamic-high-charts mode=chartMode content=chartData chartOptions=chartOptions theme=theme}}
see CHANGELOG.md.
This add-on is built based on the gist and medium by @poteto