Google Visualization SteppedAreaChart with time as axis incorrectly aligned

Question

I'm creating a SteppedArea chart in Google Visualization to display queue length at various times of the day. My problem is that the steps in the chart don't align with the associated times. They are always one data point out. In the example below, my dataTable has 9:00 = 0, 12:00 = 3 and 14:00 = 6, but the resultant chart offsets the values, so it appears the queue between 9 and 12 is 3 when it really should be 0.

Is this a bug in the Chart rendering or am misunderstanding something ?

I guess my workaround is to offset my initial dataTable.

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

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('timeofday', 'Time of Day');
      data.addColumn('number', 'Queue Length');

  // DataTable of Time and Queue length

      data.addRows([
        [[9,0,0], 0],    
        [[12,0,0], 3], 
        [[14,0,0], 6], 
      ]);
      

      var options = {
        width: 500,
        height: 500,
        legend: {position: 'top'},
        enableInteractivity: false,
        chartArea: {
          width: '85%'
        },
        hAxis: {
          viewWindow: {
            min: [8,0,0],
            max: [15,0,0]
          },
          gridlines: {
            count: -1,
            units: {hours: {format: ['h a']}}
          },
          minorGridlines: {count: 0},
          }
      };

      var chart = new google.visualization.SteppedAreaChart(
         document.getElementById('chart_div'));
      chart.draw(data, options);    
    }

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

score 0 · Accepted Answer · answered Jan 05 '20 at 15:02

I've shifted the data via a view which seems to give me the right looking chart. See the example which shows before and after. Note I had to add a dummy point at the end of the dataset otherwise the last point gets missed off. I also had to assume the first point would be zero which is acceptable in my case. Unless another idea surfaces I'll go with this.

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

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('timeofday', 'Time of Day');
      data.addColumn('number', 'Queue Length');

      data.addRows([
        [[9,0,0], 2],    
        [[11,30,0], 1], 
        [[12,0,0], 2], 
        [[13,0,0], 3], 
        [[14,0,0], 2], 
      ]);
      

      var options = {
        width: 500,
        height: 500,
        legend: {position: 'top'},
        enableInteractivity: false,
        chartArea: {
          width: '85%'
        },
        hAxis: {
          viewWindow: {
            min: [8,0,0],
            max: [15,0,0]
          },
          gridlines: {
            count: -1,
            units: {hours: {format: ['h a']}}
          },
          minorGridlines: {count: 0},
          }
      };

      var chart = new google.visualization.SteppedAreaChart(
         document.getElementById('chart_div'));
      chart.draw(data, options);    

 // need to add dummy point to end.
 data.addRows([
        [[23,59,0], 0] 
      ]);
// use a view to shift the data so that it returns the value from previous row.
   var data2 = new google.visualization.DataView(data);
   data2.setColumns([0,
                   {calc: function (dt, row) { 
                     if (row === 0) {return 0}
                     else {return dt.getValue(row-1,1)}
                     },
                   label: 'Queue Moved',type: 'number'}
                   
                   ]);


 var chart2 = new google.visualization.SteppedAreaChart(
         document.getElementById('chart2_div'));
      chart2.draw(data2, options);   
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   
  <h1>Has Wrong transition times</h1>  
  <div id="chart_div"></div>
   <h1>Looks Correct : Has transition shifted via view</h1>  
  <div id="chart2_div"></div>

Google Visualization SteppedAreaChart with time as axis incorrectly aligned

1 Answers1