CODEWITHSUNDEEP
javascriptjquerychart.js
gary1410
gary1410

Reputation: 317

Commas in Chart.js

I'm trying to add commas in my numbers on the y-axis (3,000, 4,000, 5000 etc.) in Chart.js I tried to follow this thread

I tried to follow the snippets but I'm getting undefined "numberWithCommas"

Any ideas with this javascript? 

DatabaseDecay.prototype.updateChart = function() {
      var chart, ctx, data, options;
      $('#chart').replaceWith('<canvas id="chart" class="chart" width="754" height="520"></canvas>');
      var numberWithCommas = function(x) {
        return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
      };
      ctx = document.getElementById("chart").getContext("2d");
      data = {
        labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18'],
        datasets: [
          {
            label: 'Decay Chart',
            fillColor: '#bdd4de',
            highlightFill: '#cfcfcf',
            data: this.getChartData()
          }
        ]
      };
      options = {
        responsive: true,
        tooltipTemplate: "<%= value %>",
        scaleShowVerticalLines: false,
        scaleLabel: "<%=numberWithCommas(value)%>"
      };
      chart = new Chart(ctx).Bar(data, options);
      return console.log(chart);
    };

    DatabaseDecay.prototype.getChartData = function() {
      var data, i, j, leftRecords;
      data = [];
      for (i = j = 0; j <= 17; i = ++j) {
        leftRecords = this.getLeftRecords(i);
        data.push(leftRecords);
      }
      return data;
    };

    DatabaseDecay.prototype.updateStats = function() {
      this.updateStatsI($('.stats--i_monthly'), Math.floor(this.records - this.getDecayedRecords(1)).toLocaleString('en'));
      this.updateStatsI($('.stats--i_quarterly'), Math.floor(this.records - this.getDecayedRecords(3)).toLocaleString('en'));
      return this.updateStatsI($('.stats--i_yearly'), Math.floor(this.records - this.getDecayedRecords(12)).toLocaleString('en'));
    };

    DatabaseDecay.prototype.updateStatsI = function(el, newvalue) {
      var newText, text, valEl;
      valEl = el.find('.stats--i--val');
      text = valEl.text();
      newText = text.replace(/\d+/, newvalue);
      return valEl.text(newText);
    };

    DatabaseDecay.prototype.getDecayedRecords = function(months) {
      var result;
      result = Math.floor(this.records * Math.exp( this.decay * months * (-1) ) );
      if (result > this.records) {
        return this.records;
      }
      return result;
    };

    DatabaseDecay.prototype.getLeftRecords = function(months) {
      return this.getDecayedRecords(months);
    };

    DatabaseDecay.update = function() {
      return instance.update();
    };

    DatabaseDecay.reveal = function() {
      $('.calculator--form').find('.lg-btn-secondary').text('Calculate Again');
      $('.stats').addClass('stats_opened');
      $('.stats-heading').addClass('stats_opened');
      $('.chart--container').addClass('chart--container_opened');
      instance || new DatabaseDecay();
      return instance.update();
    };

    return DatabaseDecay;

  })();

Upvotes: 0

Views: 1453

Answers (1)

potatopeelings
potatopeelings

Reputation: 41075

Change var numberWithCommas = function(x) { to 

Chart.numberWithCommas = function(x) {

and then do 

scaleLabel: "<%=Chart.numberWithCommas(value)%>"

Upvotes: 2

Related Questions