Infomasons do not come complete in Google Charts

Asked

Viewed 72 times

0

Good afternoon Guys,

I’m having two problems with that same code...

One is when I just launch the day so I can catch the hours, it returns me the error Cannot read property 'getTime' of null when the value comes...

The second is that I choose the month interval, from 01 to 31 of the month and it duplicates certain dates and does not show the whole month, as in the image below:

JS Code:

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

        function drawChart()
        {
          var data = new google.visualization.DataTable();
             data.addColumn('date');
             data.addColumn('timeofday');


            for(i = 0; i < e.length; i++){

                let totais = {};


             e[i].item.forEach(i => {

                if(! totais[i.date])
                {
                    totais[i.date] = moment.duration(0);
                }
                totais[i.date].add(moment.duration(i.hrWork));
            });



                Object.keys(totais).forEach(j =>{
                let duracao = totais[j];
                var hrWork = duracao.hours().toString().padStart(2, '0')+':'+duracao.minutes().toString().padStart(2, '0');
                var hrwork = hrWork.split(':')
                console.log(hrwork)
                let date = e[i].date.split('-')
                data.addRow([new Date(date[2],date[1]-1,date[0]), [ parseInt(hrwork[0]), parseInt(hrwork[1])] ]);
            });
            } 


            var options = {
                chartArea: {

                     height:'60%'
                 },
                 bar: {

                   groupWidth: 30
                 },
                   height: 400,
                 explorer: {
                         maxZoomOut:4,
                         keepInBounds: true
                     },
                 hAxis: {
                   format: "MMM dd,YY",
                   slantedText: true,
                   slantedTextAngle: 45
                 },
                 vAxis: {
                   minValue:0,
                   format: 'h:mm a',
                 }
               };
          var view = new google.visualization.DataView(data);

          var chart_area = document.getElementById('chart');
          var chart = new google.visualization.ColumnChart(chart_area);
          chart.draw(view);

          google.visualization.events.addListener(chart, 'ready', function(){
            document.getElementById('input').value = '<img src="'+chart.getImageURI()+'" class="img-fluid">';

          });

        chart.draw(data,options);

inserir a descrição da imagem aqui

In case anyone can give me a north, I’m grateful!

  • Hello, you are likely to be receiving the date in ISO 8601 format correctly but your script is treating it as a string, in which case you should convert it to Date first to provide access to the getTime() subroutine. Just to reiterate: I go through the same situation in a Go API and do it this way to resolve.

  • Thanks a brother! Only I do not understand the following, when Seto the value of the whole month, the graph plots normal, but when I set any other range, it give this error.

  • The value of my hour, comes as time just ex:"05:20" then I split to separate and turn into Integer to put in the value of addRow

  • I also noticed that it only plots my chart if in the selected range there are two dates with values, ex: 01-Sep-2019 à 10-Sep-2019, if in this range there is only one date with worked time value it does not plot.

  • Diêgo, I have no experience with Google Charts, I will pass this. Another someone should manifest there with help and sufficient knowledge.

No answers

Browser other questions tagged

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