Printing array with console.log is giving different result from accessing directly

Question

Guys, when I print the 'vertical' array, I get the following:

(30) [0, 0, 0, 3.21, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 104.11, 0, 0, 0, 0, _chartjs: Object, push: Function, pop: Function, shift: Function, splice: Function...]

Here’s the code:

<script type="text/javascript">
 var horizontal = [];
 var vertical = [];
 var backgroundColor = [];
 var borderColor = [];
 var ctx = document.getElementById("myChart").getContext('2d');

  for(i = 0 ; i < 30; i++) {
    vertical.splice(i, 0, 0);
  }

  $.get('Classes/buscarContas.php', function(dado) {
    dado = JSON.parse(dado);
    dado.forEach(function(obj) {
      var diaMesAno = obj['dtVencimento'].split('-');
      var dia = diaMesAno[2];
      //pega o valor atual
      var valor = parseFloat(obj['valor']);
      //corrige o zero a esquerda quando necessário
      if (dia < 10)
        dia = dia.replace('0', '');

      dia = parseInt(dia);

      vertical[dia] += valor;
    }); 
  });

console.log(vertical);

It’s funny that when I access position 3 of the array, it shows zero. I’m using this array to fill a graph and actually all values are at zero, but it seems that the array is not at all values at zero. What am I doing wrong?

Thank you