sandbox

gistfile1.js

$(function () {
  // generated timestamps
  t = ['1/1/2010 00:00', '1/1/2010 01:00','1/2/2010 23:00'];    // (hourly data for two days)

  // generated values
  vals = [34, 15, 28, 16, 8, 47, 35, 41, 1, 24, 13, 19, 18, 27, 32, 6, 39, 25, 9, 14, 22, 40, 38, 48, 36, 12, 3, 31, 43, 29, 42, 2, 21, 23, 11, 44, 30, 10, 49, 33, 17, 37, 7, 4, 45, 46, 50, 5, 26, 20]; // random list of values - two days in length

  // declaring model
  var graphVals = new Backbone.Model({time: t, value: vals});

  graphValsView = Backbone.View.extend({
      model: graphVals,
      initialize: function(){
          console.log("Alerts.");
          // this.render();
      },

      render: function() {

          var svg = d3.select("body").append("svg")
              .attr('id', 'graph')
              .append("g");

          // line accessor function
          var line = d3.svg.line()
                .x(function(d,i) { 
                  console.log('x');
                  return d.get('time')[i]; 
                })
               .y(function(d,i) { 
                  console.log(i);
                  return d.get('value')[i]; 
                })
              .interpolate("linear");

          // console.log(this.model.toJSON());
          // console.log(model.attributes.time);

          // var chart = svg.selectAll('#graph')
          //   .data(model)
          //   .enter()
          //   .append('path')
          //   .attr('d', this.path)
          //   .attr("transform", function (d, i) {
          //     "translate(" + model.attributes.time[i] + "," + model.attributes.values[i] + ")"
          //   });


          var lineGraph = svg.append("path")
              .attr("class", "line")
              .attr("d", line(this.model));

      }
  });
  
  // render the view
  var data_view = new graphValsView({ el: $("#graph") });
  data_view.$el.appendTo('body');
  data_view.render();
});