Google Charts format date not working

Question

I have a Google line chart that works fine:

btcPriceHistoryGraphInit() {
    this.priceHistoryData.unshift(['Time', 'Bitcoin Price ($)']);
    var graphData = this.priceHistoryData;

    google.charts.setOnLoadCallback(drawMarketCapChart);
    function drawMarketCapChart() {
        var data = google.visualization.arrayToDataTable(graphData);
        var options = {
          animation: {
            duration: 1000,
            startup: true
          },
          chartArea: {
            width: '85%',
            height: '70%'
          },
          legend: {
            position: 'in'
          },
          explorer: {
            actions: ['dragToZoom', 'rightClickToReset']
          },
          hAxis: {
            titleTextStyle: {
                color: '#333'
            }
          },
          vAxis: {
            minValue: 0,
            format: '$#,###'
          }
        };

        var date_formatter = new google.visualization.DateFormat({ 
            pattern: "MMM dd, yyyy"
        }); 
        date_formatter.format(data, 0);
        var chart = new     google.visualization.AreaChart(document.getElementById('price-history-graph'));
        chart.draw(data, options);
    }       
}

Now I have extracted this function/options into function that I import to simplify it and the google.visualization.DateFormat function doesnt do any thing any more. The code for the function is below:

export function Graph(chartDivId, chartData, xAxisLabel, yAxisLabel, vAxisFormat, chartWidthPercent, chartHeightPercent, title, animationDuration) {
    var goodData = [];

    chartData.forEach(function(elem) {
        var num = Number(elem[1]);
        goodData.push([elem[0], num])
    });

    var title = title || '';
    var chartWidthPercent = chartWidthPercent || '85%';
    var chartHeightPercent = chartHeightPercent || '70%';
    var duration = animationDuration || 1000;
    var vAxisFormat = vAxisFormat || '';
    var xAxisLabel = xAxisLabel || '';
    var yAxisLabel = yAxisLabel || '';

    goodData.unshift([xAxisLabel, yAxisLabel]);
    var graphData = goodData;

    google.charts.setOnLoadCallback(drawMarketCapChart);
    function drawMarketCapChart() {
        var data = google.visualization.arrayToDataTable(graphData);
        var options = {
          title: title,
          animation: {
            duration: duration,
            startup: true
          },
          chartArea: {
            width: chartWidthPercent,
            height: chartHeightPercent
          },
          legend: {
            position: 'in'
          },
          explorer: {
            actions: ['dragToZoom', 'rightClickToReset']
          },
          hAxis: {
            titleTextStyle: {
                color: '#333'
            }
          },
          vAxis: {
            minValue: 0,
            format: vAxisFormat
          }
        };

        var date_formatter = new google.visualization.DateFormat({ 
            pattern: "MMM dd, yyyy"
        }); 
        date_formatter.format(data, 0);
        var chart = new google.visualization.AreaChart(document.getElementById(chartDivId));
        chart.draw(data, options);
    }       
}

I call the function like this: Graph( parameters )

How do I get the date formatter to work?

Thanks for and advice

Answer 1

I had the porblem, that the code hAxis.format: 'dd.MM.yyyy was not working. The reason was the explorer.actions: [dragToZoom', 'rightClickToReset'] line. When using the explorer.actions, the hAxis.format doesn't work.