Error displaying Time on Google Columnchart chart

Asked

Viewed 23 times

2

The Example chart below displays the Hours correctly: inserir a descrição da imagem aqui

HTML:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <div id="chart_div"></div>

Javascript:

google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawBasic);

function drawBasic() {

     var data = new google.visualization.DataTable();
      data.addColumn('timeofday', 'Horario');
      data.addColumn('number', 'Venda');
      data.addColumn({type:'string', role:'annotation'});

      data.addRows([
        [{v: [8, 0, 0], f: '8 am'}, 5, '5'],
        [{v: [9, 0, 0], f: '9 am'}, 2, '2'],
        [{v: [10, 0, 0], f:'10 am'}, 3, '3'],
        [{v: [11, 0, 0], f: '11 am'}, 4, '4']
      ]);

      var options = {
        title: 'Venda por Hora',
        width: 700,
        height: 350,
        colors: ['#33ac71'],
        backgroundColor: {
         fill: 'silver',
         fillOpacity: 0.2,
         strokeWidth: 1
       },
       legend: {
         position: "bottom",
         textStyle: {
           fontSize: 12
         }
       },
       chartArea: {
         left: 50,
         top: 50,
         width: "90%",
         height: "70%"
       },
       Axis: {
          title: 'Horario',
          format: 'h:mm p',
          viewWindow: {
            min: [7, 30, 0],
            max: [17, 30, 0]
          },
        }
      };

      var chart = new google.visualization.ColumnChart(
        document.getElementById('chart_div'));

      chart.draw(data, options);

    }



The problem is that the string ":30" is added between the hours when I do the dynamic data matching that comes from the database:

$(response).each(function (i) {
                    data.addRows([
                        [{ v: [parseInt(response[i].HORA), 0, 0], f: response[i].HORA + ' horas' }, parseInt(response[i].VALOR), response[i].VALOR.toString()]
                    ]);
                });

When data returns from Database gets wrong:
Exibe horas de 30 em 30 minutos: tá errado!

Obs: The Time field returned from the database is a type Int as the google example.

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.