title: Google Charts DateFormatter not displaying formatted values
body: <p>So i'm currently trying to fix a problem with a Google Charts. I am drawing a chart that shows numeric values on the Y-axis and dates on the X-axis. I want the date to adpat according to the specified timezone. For that i'm using the DateFormatter Object from Google charts, providing the patter and the Timezone like so:</p>
  <pre><code>var dateFormatter = new google.visualization.DateFormat({
                  timeZone: _timeZone, //timezone
                  pattern: $scope.selectedResolution.pattern
              });
  </code></pre>
  <p>The pattern attribute receives a string containing a format string and the timeZone receves a value representing the number of hours regarding the timezone offset (example, -4, -5, etc).</p>
  <p>I Format the chart values like so:</p>
  <pre><code>dateFormatter.format($scope.data, 0);
  </code></pre>
  <p>Being that the column &quot;0&quot; is the column where i have my dates.</p>
  <p>I then draw the chart, standard stuff:</p>
  <pre><code> chart = new google.visualization.ComboChart(document.getElementById(chart_name));
  
                      //generateTicks($scope.data, options);
  
                      chart.draw($scope.data, options);
  </code></pre>
  <p>The thing is that, the values showed in the X-Axis are not formatted whatsover, be it in the format or the timezon.</p>
  <p><a href="https://i.stack.imgur.com/d1cjQ.png" rel="nofollow noreferrer">Problem Showcase</a></p>
  <p>As you can see in the image above, the X-Axis shows &quot;13:00&quot; where it should show &quot;15:00&quot;, in this particular case.</p>
  <p>I also went and check the data i'm feeding the chart with to see if the formatter was actually doing any work on the data itself and it appears to be working properly:</p>
  <p><a href="https://i.stack.imgur.com/6CIyf.png" rel="nofollow noreferrer">Chart Data</a></p>
  <p>Also, here's my charts options for reference:</p>
  <pre><code>var series = {}, firstSerie, row, title, tempRows = [];
  
              // Create the data table
              series[0] = {targetAxisIndex: 0, color: '#3182BD'};
              series[1] = {color: '#FF7F00', type: 'line'};
  
              options = {
                  tooltip: {isHtml: true},
                  titleTextStyle: {fontSize: 12, bold: false},
                  isStacked: false,
                  backgroundColor: 'transparent',
                  legend: {position: 'none'},
                  height: 300,
                  pointSize: 1,
                  series: series,
                  vAxes: {
                      // Adds titles to each axis.
                      0: {
                          textStyle: {color: $scope.widgetOptions.text_color || '#333333'},
                          format: $scope.vLabel === '%' ? '#\'%\'' : generateVerticalAxisPattern() + $filter('trustedHtml')($scope.vLabel),
                          minValue: 0,
                          gridlines: {
                              color: 'transparent'
                          }
                      }
                  },
                  hAxis: {
                      //title: graphLegend,
                      textStyle: {color: $scope.widgetOptions.text_color || '#333333'},
                      titleTextStyle: {color: $scope.widgetOptions.text_color || '#333333'},
                      viewWindows: {
                          min: moment().subtract(24, 'hours'),
                          max: moment()
                      },
                      gridlines: {
                          color: 'transparent',
                          units: {
                              hours: {format: ['HH:mm', 'ha']}
                          },
                          count: -1
                      },
                      minorGridlines: {
                          count: 0
                      }
                  },
                  vAxis: {
                      viewWindowMode: 'maximized',
                      viewWindow: {
                          min: $scope.widgetOptions.lower_limit
                      }
                  },
                  animation: {
                      duration: 500,
                      easing: 'out'
                  }
              };
  </code></pre>
  <p>So, does anyone have any clue of what's going on? Im working with angularjs btw.
  Thanks in advance</p>