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:

var dateFormatter = new google.visualization.DateFormat({
                timeZone: _timeZone, //timezone
                pattern: $scope.selectedResolution.pattern
            });

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).

I Format the chart values like so:

dateFormatter.format($scope.data, 0);

Being that the column "0" is the column where i have my dates.

I then draw the chart, standard stuff:

 chart = new google.visualization.ComboChart(document.getElementById(chart_name));

                    //generateTicks($scope.data, options);

                    chart.draw($scope.data, options);

The thing is that, the values showed in the X-Axis are not formatted whatsover, be it in the format or the timezon.

Problem Showcase

As you can see in the image above, the X-Axis shows "13:00" where it should show "15:00", in this particular case.

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:

Chart Data

Also, here's my charts options for reference:

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'
                }
            };

So, does anyone have any clue of what's going on? Im working with angularjs btw. Thanks in advance

CodePudding user response：

the format method, as follows, only formats the data, not the chart or chart axis.

dateFormatter.format($scope.data, 0);

basically, the above is used to display the correct format in the tooltip when hovering a data point.

to format an axis, you would normally set the format configuration option.

hAxis: {
  format: $scope.selectedResolution.pattern
}

however, in this case, since you are changing the time zone,
you will need to provide custom ticks on the x-axis.

you can build an array of ticks from the data table rows,
using the formatValue method from the formatter.

var ticks = [];
for (var i = 0; i < $scope.data.getNumberOfRows(); i  ) {
  var dateValue = $scope.data.getValue(i, 0);
  ticks.push({
    v: dateValue,
    f: dateFormatter.formatValue(dateValue)
  });
}

// then add above to ticks to options...

hAxis: {
  ticks: ticks
}

each tick will need to be an object,
with properties for v: for value,
and f: for formatted value.

the only problem with the above routine,
it assumes you want to display a tick for each row in the data table.

if you do not have room to display them all,
you will need to figure out your own algorithm to display the correct number of ticks.

edit

another method is to find the min and max dates within the data table,
using data table method getColumnRange
then build each tick after a particular duration.

for instance, to display a tick every four hours along the axis, between the min and max dates...

  const FOUR_HOURS = (1000 * 60 * 60 * 4);
  var ticks = [];
  var dateRange = $scope.data.getColumnRange(0);
  for (var i = dateRange.min.getTime(); i <= dateRange.max.getTime(); i = i   FOUR_HOURS) {
    var dateValue = new Date(i);
    ticks.push({
      v: dateValue,
      f: dateFormatter.formatValue(dateValue)
    });
  }