Chartjs-To display data from mock server into chartjs using ember

You need to connect your component with some data and data comes from the Route… In your Route‘s model hook, you should return the records you have retrieved from the server. In your template, use something like {{time-series-chart barData=model}} or some sub-object of your model.

Remember the Route is responsible for hooking up the data to your component in the route’s template. So:

1. Route’s model hook returns records from the store
2. Route’s template contains the component tag, connecting the component to the data.

• where is eventdata is defined , you need to use get function to access propertiesthis.get('eventdata')
• it looks eventdata is an array so your observer should be observes('eventdata.[]'), only then this will be triggered for every time new item is added/removed.

• You can define timeSeriesBarContent:[] inside init() by overriding and in updateGraph method instead of append try to use pushObject method only then this will update bounding template.

  export default Ember.Component.extend({
  timeSeriesBarContent: [],
  eventData: [],
  init() {
      this._super(...arguments);
      this.set('timeSeriesBarContent', []);
      this.set('eventData', []);
  },
  updateGraph: Ember.on('init', Ember.observer('eventdata.[]', function() {
      var barcontent = this.get('timeSeriesBarContent');
      console.log('updateGraph called');
      this.get('eventdata').forEach(function(item, index) {
          barcontent.pushObject({ 'time': item.timeStamp, 'label': item.eventType, 'value': item.event + " : " + item.device })
      });
  })),
  

  });