Search code examples
javascriptdatechartsformatting

Change date format Google charts

I have a timeline chart using the google charts tools, and I have adapted it to fit my necessities, but one thing that I still haven't got to work is the date format on the graphic label. As you can see on the image, I successfully changed the language of the days, but the date format is still mm/dd. I need it to be dd/mm.

print

This is the code I am currently using:

$(document).ready(function(){
        google.charts.load("current", {packages:["timeline"],'language': 'pt'});
        google.charts.setOnLoadCallback(drawChart);
        function drawChart() {


            var jsonData = $.ajax({
                url : 'Agenda/getDados',
                dataType : 'json',
                async: false

            }).responseText;



            var container = document.getElementById('chart');
            var chart = new google.visualization.Timeline(container);
            var dataTable = new google.visualization.DataTable(jsonData);


            google.visualization.events.addListener(chart, 'ready', function(){
            
                afterDraw();

            });



            var options ={
              timeline: { showRowLabels: false},
              alternatingRowStyle: true,
              hAxis: {
                format: 'dd.MM',
                viewWindowMode: 'pretty' // Garante que haja uma grade diária
                },
              tooltip: {
                isHtml: true
              }
            };

            chart.draw(dataTable,
                {
                    width: '100%',
                    height: 10000
              
                });
        }


    });

    //Passa a legenda de data para a parte de cima do gráfico
    function afterDraw() {
        var g = document.getElementsByTagName("svg")[0].getElementsByTagName("g")[1];
        document.getElementsByTagName("svg")[0].parentNode.style.top = '45px';
        document.getElementsByTagName("svg")[0].style.overflow = 'visible';

        var height = Number(g.getElementsByTagName("text")[0].getAttribute('y')) + 20;
        g.setAttribute('transform','translate(0,-'+height+')');

        var lastDateElement = g.querySelector("text:last-child");
        if (lastDateElement) {
          lastDateElement.remove();
        }

        g = null;


    }

As you can see I have already tried the hAxis option (Although it might be wrong, im not really sure.) The afterDraw function is a function that inverts said label to the top of the graph instead of at the bottom, aswell as removing the last element as I dont reall want it to be visible.

I have tried using different browsers but it is all the same.

How do i change the date format to dd/mm?

Solution

  • You are not passing the options to the function chart.draw()
    Try doing that:

    chart.draw(dataTable, options);