CODEWITHSUNDEEP
javascripthtmlchartsgoogle-visualization
cristianojeda
cristianojeda

Reputation: 339

(Google Charts) How to make stacked column charts work with hours, minutes and seconds?

I am trying to sum the minutes of two bars on a bar chart and it breaks. jsfiddle

I'm basing myself on the example from the Stacked column charts, but I can't get it to work with "H: i: s"

enter image description here

this is my code

var GoogleColumnBasic = function() {
        var _googleColumnBasic = function() {
        google.charts.load('visualization', '1.0', {'packages':['bar']});
        
        
    google.charts.setOnLoadCallback(drawChart);


    function drawChart() {

 var dtos= [];
 var data = google.visualization.arrayToDataTable([
        ['','preparation time ', 'time when he retired', 
          { role: 'annotation' } ],
        ['box 1',  '00:43:22',  '00:03:22',  ''],
        ['box 2',  '00:13:22', '00:73:22' , ''],
        ['box 3',  '00:23:22', '00:53:22', '']
      ]);

        
   var options = {
            height: 350,
           isStacked: true
          };

  var chart = new google.charts.Bar(document.getElementById('chart_div'));
           //chart.draw(data, options);
          chart.draw(data, google.charts.Bar.convertOptions(options));
        }

    
}
    return {
        init: function() {
            _googleColumnBasic();
        }
    }
}();
GoogleColumnBasic.init();
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>

thanks.

Upvotes: 1

Views: 142

Answers (1)

WhiteHat
WhiteHat

Reputation: 61285

you can use a 'timeofday' column, see working with timeofday.

The DataTable timeofday column data type takes an array of either 3 or 4 numbers, representing hours, minutes, seconds, and optionally milliseconds, respectively. Using timeofday is different than using date and datetime in that the values are not specific to a date, whereas date and datetime always specify a date. For example, the time 8:30am would be: [8, 30, 0, 0], with the 4th value being optional ([8, 30, 0] would output the same timeofday value).

the data table used to draw the chart would be similar to the following...

  var data = google.visualization.arrayToDataTable([
    ['', 'time of ', 'retirar', {role: 'annotation', type: 'string'}],
    ['Caja 1', [0, 43, 22], [0, 3, 22], ''],
    ['Caja 2', [0, 13, 22], [0, 73, 22], ''],
    ['caja 3', [0, 23, 22], [0, 53, 22], '']
  ]);

see following working snippet...

var GoogleColumnBasic = function() {
  var _googleColumnBasic = function() {
    google.charts.load('current', {
      packages: ['corechart']
    }).then(drawChart);

    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['', 'time of ', 'retirar', {role: 'annotation', type: 'string'}],
        ['Caja 1', [0, 43, 22], [0, 3, 22], ''],
        ['Caja 2', [0, 13, 22], [0, 73, 22], ''],
        ['caja 3', [0, 23, 22], [0, 53, 22], '']
      ]);

      var options = {
        height: 350,
        isStacked: true,
        colors: ['#4285f4', '#a1c2fa'],
        theme: 'material',
        chartArea: {
          left: 64,
          top: 48,
          right: 32,
          bottom: 64,
          height: '100%',
          width: '100%'
        },
        height: '100%',
        legend: {
          position: 'top'
        },
        width: '100%'
      };

      var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
      chart.draw(data, (options));
    }
  }
  return {
    init: _googleColumnBasic
  }
}();
GoogleColumnBasic.init();
html, body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}

#chart_div {
  height: 100%;
  min-height: 400px;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

NOTES

  1. the jsapi loader has been deprecated and should no longer be used.
    instead, use the new loader.js
    <script src="https://www.gstatic.com/charts/loader.js"></script>
    this will only change the load statement, see above snippet.

  2. do not recommend using a material chart. (google.charts.Bar)
    they do not work well with 'timeofday' columns,
    they do not support column roles such as 'annotation',
    AND many of the chart options simply do not work, see Tracking Issue for Material Chart Feature Parity
    instead, we can use option --> theme: 'material' on a classic chart (google.visualization.ColumnChart)

Upvotes: 1

Related Questions