Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Integrating Highcharts.js into Ember
App.HighChartsComponent = Ember.Component.extend(App.HighchartsThemeMixin, {
classNames: [ 'highcharts-wrapper' ],
content: undefined,
chartOptions: undefined,
chart: null,
buildOptions: Em.computed('chartOptions', 'content.@each.isLoaded', function() {
var chartContent, chartOptions, defaults;
chartOptions = this.getWithDefault('chartOptions', {});
chartContent = this.get('content.length') ? this.get('content') : [
{
id: 'noData',
data: 0,
color: '#aaaaaa'
}
];
defaults = {
series: chartContent
};
return Em.merge(defaults, chartOptions);
}),
_renderChart: (function() {
this.drawLater();
this.buildTheme();
}).on('didInsertElement'),
contentDidChange: Em.observer('content.@each.isLoaded', function() {
var chart;
if (!(this.get('content') && this.get('chart'))) {
return;
}
chart = this.get('chart');
return this.get('content').forEach(function(series, idx) {
var _ref;
if ((_ref = chart.get('noData')) != null) {
_ref.remove();
}
if (chart.series[idx]) {
return chart.series[idx].setData(series.data);
} else {
return chart.addSeries(series);
}
});
}),
drawLater: function() {
Ember.run.scheduleOnce('afterRender', this, 'draw');
},
draw: function() {
var options;
options = this.get('buildOptions');
this.set('chart', this.$().highcharts(options).highcharts());
},
_destroyChart: (function() {
this._super();
this.get('chart').destroy();
}).on('willDestroyElement')
});
App.HighchartsThemeMixin = Ember.Mixin.create({
buildTheme: function() {
Highcharts.theme = {
colors: [
'#258be2',
'#666666',
'#f45b5b',
'#8085e9',
'#8d4654',
'#7798bf',
'#aaeeee',
'#ff0066',
'#eeaaee',
'#55bf3b',
'#df5353',
'#7798bf',
'#aaeeee'
],
chart: {
backgroundColor: null,
style: {
fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"
}
},
title: {
style: {
color: 'black',
fontSize: '18px',
fontWeight: 'bold'
}
},
subtitle: {
style: {
color: 'black'
}
},
tooltip: {
borderWidth: 0,
style: {
fontSize: '16px'
}
},
legend: {
itemStyle: {
fontWeight: 'bold',
fontSize: '14px'
}
},
xAxis: {
labels: {
style: {
color: '#6e6e70',
fontSize: '16px'
}
},
title: {
style: {
fontSize: '14px'
}
}
},
yAxis: {
labels: {
style: {
color: '#6e6e70',
fontSize: '16px'
}
},
title: {
style: {
fontSize: '14px'
}
}
},
plotOptions: {
series: {
shadow: true
},
candlestick: {
lineColor: '#404048'
}
},
navigator: {
xAxis: {
gridLineColor: '#D0D0D8'
}
},
rangeSelector: {
buttonTheme: {
fill: 'white',
stroke: '#C0C0C8',
'stroke-width': 1,
states: {
select: {
fill: '#D0D0D8'
}
}
}
},
scrollbar: {
trackBorderColor: '#C0C0C8'
},
background2: '#E0E0E8',
global: {
timezoneOffset: new Date().getTimezoneOffset()
}
};
return Highcharts.setOptions(Highcharts.theme);
}
});
@balajinunna
Copy link

balajinunna commented Jan 6, 2015

Hi,

Can you please give any sample demo through jsbin?

Loading

@greggawatt
Copy link

greggawatt commented Jan 29, 2015

^Seconded

Loading

@20v100
Copy link

20v100 commented Feb 10, 2015

Lauren, what is the best way to format Ember-Data into an array of objects that fit Highcharts requirements?

Loading

@Dhaulagiri
Copy link

Dhaulagiri commented Feb 12, 2015

Loading

@poteto
Copy link
Author

poteto commented Mar 1, 2015

For some reason I wasn't getting notifications from Github about these comments. Sorry!

@20v100 There is no real "easy" way, you'll have to massage your data into a POJO that Highcharts expects, probably using #map or #mapBy

Loading

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment