Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import Ember from 'ember';
- import layout from '../templates/components/pie-chart';
- export default Ember.Component.extend({
- tagName: 'div',
- classNames: ['chart'],
- dataChanged: function() {
- return this.rerender();
- }.observes('data'),
- renderChart: function() {
- console.log(this.get('data'));
- return this.$().highcharts({
- chart: {
- plotBackgroundColor: null,
- plotBorderWidth: null,
- plotShadow: false
- },
- title: {
- text: 'Browser market shares at a specific website, 2014'
- },
- tooltip: {
- pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
- },
- plotOptions: {
- pie: {
- allowPointSelect: true,
- cursor: 'pointer',
- dataLabels: {
- enabled: true,
- format: '<b>{point.name}</b>: {point.percentage:.1f} %',
- style: {
- color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
- }
- }
- }
- },
- series: [{
- type: 'pie',
- name: 'Browser share',
- data: [
- ['Firefox', 45.0],
- ['IE', 26.8],
- {
- name: 'Chrome',
- y: 12.8,
- sliced: true,
- selected: true
- },
- ['Safari', 8.5],
- ['Opera', 6.2],
- ['Others', 0.7]
- ]
- }]
- });
- }.on('didInsertElement'),
- willDestroyElement: function() {
- this.$().highcharts().destroy();
- }
- });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement