App = Ember.Application.create({

  ready: function() {

    console.log('App ready');

  }

});

​

App.ApplicationController = Ember.ArrayController.extend({

  needs: ['chartValues'],

  chartValuesBinding: 'controllers.chartValues.content',

  init: function() {

      this.generateNewChartValues();

  },

  generateNewChartValues: function() {

    this.get('controllers.chartValues').send('replaceWithRandom');

  }

});

​

App.ApplicationRoute = Ember.Route.extend({

  model: function() {

    var controller = this.controllerFor('chartValues');

    controller.send('replaceWithRandom');

    //return controller.get('content');

    return App.ChartValue.find();

  }

});

​

App.ChartView = Ember.View.extend({

  chart: {},

  line: {},

  area: {},

  updateChart: function () {

    var content = this.get('content');

    var chart = this.get('chart');

    var line = this.get('line');

    var area = this.get('area');

    chart.selectAll('path.line')

    .data(content)

    .transition()

    .duration(500)

    .ease('sin')

    .attr('d', line(content));

    chart.selectAll('path.area')

    .data(content)

    .transition()

    .duration(500)

    .ease('sin')

    .attr('d', area(content));

  }.observes('content.@each.value'),

  didInsertElement: function () {

    var elementId = this.get('elementId');

    var content = this.get('content');

    var acontent = content.toArray();

    console.log(acontent[0].get('timestamp'));

    console.log(acontent[1].get('timestamp'));

    console.log(acontent[0].get('value'));

    console.log(acontent[1].get('value'));

    console.log(elementId);

​

    var margin = { top: 35, right: 35, bottom: 35, left: 35};

    var w = 500 - margin.right - margin.left;

    var h = 300 - margin.top - margin.top;

​

        var x = d3.scale.linear()

            .range([0,w])

            .domain([1,acontent.length]);

        var y = d3.scale.linear()

            .range([h,0])

            .domain([0,130]);    

        var xAxis = d3.svg.axis()

            .scale(x)

            .ticks(10)

            .tickSize(-h)

            .tickSubdivide(true);

        var yAxis = d3.svg.axis()

            .scale(y)

            .ticks(4)

            .tickSize(-w)

            .orient('left');

​

        // Prepeare Chart Elements:

        var line = d3.svg.line()

            .interpolate('monotone')

            .x(function(d) {  //console.log(d.get("timestamp"));

                                                return x(d.get('timestamp'));})

            .y(function(d) { return y(d.get('value'));});

        this.set('line',line);

        var area = d3.svg.area()

            .interpolate('monotone')

            .x(function(d) { return x(d.get('timestamp')); })

            .y0(h)

            .y1(function(d) { return y(d.get('value')); });

        this.set('area',area);

        var chart = d3.select('#'+elementId).append('svg:svg')

            .attr('id','chart')

            .attr('width', w+margin.left+margin.right)

            .attr('height', w+margin.top+margin.bottom)

            .append('svg:g')

            .attr('transform', 'translate('+margin.left+','+margin.top+')');

​

        // Add Chart Elements to Chart:

        chart.append('svg:g')

            .attr('class', 'x axis')

            .attr('transform', 'translate(0,' + h + ')')

            .call(xAxis);

        chart.append('svg:g')

            .attr('class', 'y axis')

            .call(yAxis);

        chart.append('svg:clipPath')

            .attr('id', 'clip')

            .append('svg:rect')

            .attr('width', w)

            .attr('height', h);

​

        chart.append('svg:path')

            .attr('class', 'area')

            .attr('clip-path', 'url(#clip)')

            .attr('d', area(acontent));

​

        chart.append('svg:path')

            .attr('class', 'line')

            .attr('clip-path', 'url(#clip)')

            .attr('d', line(acontent));

        this.set('chart', chart);

    }

});

​

App.ChartValuesController = Ember.ArrayController.extend({

  content: [],

​

  replaceWithRandom: function () {

    var newContent = Ember.A([]);

    var max = 100;

    for(var i = 0, l = 100; i < l; i++) {

      var item = App.ChartValue.createRecord({

        timestamp: i,

        value: max/2+Math.sin(i)*Math.ceil((max/2.5)*Math.random())

      });

      newContent.pushObject(item);

    }

​

    this.set('content', newContent);

  }

});

​

App.ChartValue = DS.Model.extend({

  timestamp: DS.attr('number'),

  value: DS.attr('number')

});

​

App.Store = DS.Store.extend({

  revision: 13,

  adapter: 'DS.FixtureAdapter'

});

​

App.ChartValue.FIXTURES = [

  {

    id: 1,

    timestamp: 1,

    value: 12.04

},

{

    id: 2,

  timestamp: 2,

    value: 18.04

},

{

    id: 3,

  timestamp: 3,

    value: 100.00

},

{

    id: 4,

  timestamp: 4,

    value: 12.04

},

{

    id: 5,

  timestamp: 5,

    value: 50.04

},

{

    id: 6,

  timestamp: 6,

    value: 112.04

},

{

    id: 1,

  timestamp: 7,

    value: 12.04

},

];