Fill array with 0 if data is not present in bar chart - Javascript Chart.js

Javascript examples for Chart.js:Bar Chart

  1. HOME
  2. Javascript
  3. Chart.js
  4. Bar Chart

Description

Fill array with 0 if data is not present in bar chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){//w  w  w . ja  v  a2  s .c  o  m
var data = [{
  0: {
    month: 9,
    profit: 23
  },
  1: {
    month: 3,
    profit: 28
  }
}, {
  1: {
    month: 5,
    profit: 30
  }
}];
var transformed = [];
function sanitize(data) {
  sanitized = [];
  data.forEach(function(item) {
    Object.keys(item).forEach(function(key) {
      sanitized[item[key].month - 1] = item[key].profit;
    });
  });
  Array.apply(null, {
    length: 12
  }).forEach(function(i, month) {
    if (sanitized[month] == null) {
      sanitized[month] = 0;
    }
  });
  return sanitized;
}
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "Novmeber", "December"],
    datasets: [{
      label: "Monthy Profit",
      backgroundColor: 'rgb(255, 99, 132)',
      borderColor: 'rgb(255, 99, 132)',
      data: sanitize(data),
    }]
  },
  options: {}
});
    }

      </script> 
   </head> 
   <body> 
      <canvas id="myChart"></canvas>  
   </body>
</html>

Related Tutorials