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

0👍

The main thing i can see is that you pass the chart data which is not in the format that chartjs expects, so it should be an array of objects which have the properties value label and color but you are passing it something different. so a quick fix for that would be to construct an array as described

// 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>

Leave a comment