To display data from mock server into chartjs using ember

Question

I have data coming from mock-server, which I can view using ember inspector. I need to display these data in bar chart using chartjs.

This is my code from component - chart.js

import Ember from 'ember';

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

And this is my code from template - chart.hbs

{{time-series-chart  barData=timeSeriesBarContent }}

The bar chart gets displayed if I use static data inside

timeSeriesBarContent: [{
time: d3.time.format('%Y-%m-%d').parse("2013-05-15"),
       label: "test data",
       value: 49668,
       type: "money"
}];

But I am not being able to load the data coming from mock-server. Can anyone help me with this please?

score 0 · Answer 1 · answered Oct 17 '16 at 03:03

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:

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

Thank you for your response :) Can you tell me how I can update date format for the data coming from model? Should I built my own custom transforms and then use them ? — Isaac Shrestha, Oct 21 '16 at 23:43

Ember Freak · Answer 2 · 2016-10-21T04:41:07.937

0

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 })
    });
})),

});

edited Oct 21 '16 at 04:41

answered Oct 17 '16 at 05:14

Ember Freak

12,918
4
24
54

Thank you for the response. I tried the concept but yet the issue is not solved. I am using ember v2.8.0 and have data from mock server coming when I monitor using ember inspector but I am not being able to display it in charts. Please let me know if I need to provide further details to get this issue resolved. – Isaac Shrestha Oct 20 '16 at 17:47
@IsaacShrestha How are you including `component - chart.hbs` are you sending `eventdata` like this `{{component-chart eventData=eventData }}` ..if that's so then you can try running your `updateGraph` observer function after init or didInsertElement. like this ..`updateGraph: Ember.observer('eventdata.[]', function() { ....your code }).on('init')` – Ember Freak Oct 21 '16 at 04:29
export default Ember.Component.extend({ timeSeriesBarContent: [], eventdata: null, updateGraph: Ember.on('init', Ember.observer('eventdata', function() { var barcontent = this.get('timeSeriesBarContent'); console.log('updateGraph called'); this.get('eventdata').forEach(function(item) { barcontent.pushObject({ 'time': item.timeStamp, 'label': item.eventType, 'value': item.event + " : " + item.device }); }); })), }); – Isaac Shrestha Oct 21 '16 at 23:02
Shit I am sorry for the mess, I accidentally pressed entered and it cannot be erased now. After making following changes to chart-demo.js file – Isaac Shrestha Oct 21 '16 at 23:04
I am sorry for the above 3 comments. I have almost resolved the issue but stuck in changing the date format now. I need time of the pushed object in this format: d3.time.format('%Y-%m-%d').parse("2013-01-14"); Where and how should I update this format ? If I will be able to get time in this format, my chart will work. Thank you :) – Isaac Shrestha Oct 21 '16 at 23:41
`moment(item.timeStamp).format('%Y-%m-%d')` To Install ember-moment - `ember install ember-moment` Install ember-cli-moment-shim - `ember install ember-cli-moment-shim` stop and start ember server. [reference](http://stackoverflow.com/a/39111414/5771666) – Ember Freak Oct 22 '16 at 04:59
This problem is resolved. Thank you. I am using d3 charts(bargraph) to display these data, I want to remove the labels displayed below x-axis but I am not able to find out how to do so. Can you help me solve this issue please? – Isaac Shrestha Nov 07 '16 at 22:30
I am not familiar with D3 charts, may be you can ask this as separate question tagged d3.js – Ember Freak Nov 08 '16 at 10:01

To display data from mock server into chartjs using ember

2 Answers2