[Solved]-Doughnut Chart not displaying data with Chart Js and Backbone js-Chart.js

// Model
var Transaction = Backbone.Model.extend({
  defaults: {
    amount: 0,
    transactionDate: "",
    transactionType: "debit",
    category: "miscellaneous",
    description: ""
  },
  categories: [
    "salary",
    "rent",
    "miscellaneous"
  ],
  transactionTypes: [
    "credit",
    "debit"
  ],
  initialize: function() {
    this.set({
      transactionDate: this.attributes.transactionDate || Date.now()
    }, {
      validate: true
    });
  },
  validate: function(attrs, options) {
    if (attrs['transactionType'] !== undefined && !_.contains(this.transactionTypes, attrs['transactionType'].toLowerCase())) {
      return 'Invalid type: ' + attrs['transactionType'];
    } else if (attrs['category'] !== undefined && !_.contains(this.categories, attrs['category'].toLowerCase())) {
      return 'Invalid category: ' + attrs['category'];
    } else if (attrs['transactionDate'] !== undefined && _.isNaN(parseInt(attrs['transactionDate'])) || attrs['transactionDate'] < 0) {
      return 'Invalid date: ' + attrs['transactionDate'];
    } else if (attrs['amount'] !== undefined && _.isNaN(parseInt(attrs['amount'])) || attrs['amount'] < 0) {
      return 'Invalid amount: ' + attrs['amount'];
    }
    return null;
  }
});


var Transactions = Backbone.Collection.extend({
  // stuff and thangs
  model: Transaction,
  latestFive: function(toJSON) {
    this.sortByDate(-1); // sort latest first

    if (!toJSON) {
      return _.first(this.models, 5);
    } else {
      var models = _.first(this.models, 5),
        idx = -1,
        json = [],
        model;

      while (model = models[++idx]) {
        json.push(model.attributes);
      }

      return json;
    }
  },
  sortByDate: function(dir) {
    dir = dir || -1;
    this.comparator = function(transaction) {
      return dir * transaction.get("transactionDate");
    };
    this.sort();
  },
  sortByAmount: function(dir) {
    dir = dir || -1;
    this.comparator = function(transaction) {
      return dir * transaction.get("amount");
    };
    this.sort();
  }
});


var ChartView = Backbone.View.extend({
  el: ".home-page",
  template: Handlebars.compile($("#chart-template").html()),
  chart: null,
  initialize: function() {
    this.listenTo(this.collection, "add", this.render);
    this.listenTo(this.collection, "change", this.render);
    this.$(".chart-view-div").html(this.template());
    this.chart = new Chart(this.$("#expense-chart")[0].getContext("2d"));
    this.render();
  },
  render: function() {
    var self = this;
    var data = this.chartData();
    this.chart.Doughnut(data, {
      responsive: true,
      animateScale: true
    });
  },
  chartData: function() {
    var collection = this.collection.latestFive(true);
    var data = [];;
    var getData = function(color, highlight, labels, vals, collection) {
      var object = {
        color: color,
        highlight: highlight,
        chartData: [{
          value: "",
          label: ""
        }]
      };
      for (var i = 0; i < labels.length; i++) {
        object.chartData.push(0);
      }
      for (var j = 0; j < vals.length; j++) {
        object.chartData.push(0);
      }
      for (var i = 0; i < collection.length; i++) {
        var item = collection[i];
        var label = labels.indexOf(item.category);
        var val = vals.indexOf(item.amount);
        object.chartData[{
          value: val,
          label: label
        }] ++;
      }
      return object;
    };

    function getRandomColor() {
      var letters = '0123456789ABCDEF'.split('');
      var color = '#';
      for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    }
    for (var i = 0; i < collection.length; i++) {
      var object = collection[i];
      var color = getRandomColor();
      var highlight = getRandomColor();
      data.push({
        value: object.amount,
        color: color,
        label: object.category
      });

    }
    return data;
  }
});

var collection = new Transactions([{
  amount: 12,
  transactionDate: 1417442176000,
  transactionType: "debit",
  category: "miscellaneous",
  description: ""
}, {
  amount: 13,
  transactionDate: 1417442176000,
  transactionType: "credit",
  category: "salary",
  description: ""
}]);
var view = new ChartView({
  collection: collection
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone.js"></script>

<script src="http://www.chartjs.org/assets/Chart.min.js"></script>


<script id="chart-template" type="text/x-handlebars-template">
  <canvas id="expense-chart"></canvas>
</script>

<div class="home-page">

  <div class="chart-view-div"></div>


</div>