Show only the dates on Google charts' Timeline chart

47 Views Asked by At

I have a timeline chart using the following code:

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


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

            }).responseText;

            //console.log(jsonData);

            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', afterDraw);

            var options ={
              timeline: { showRowLabels: false},
              alternatingRowStyle: true,
               hAxis: {
                format: 'dd.MM.yyyy',
                }
            };

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

Im gathering data from a database and using it on the graph. The 'afterDraw' function that it uses is just to set the x Axis on top of the graph instead of at the bottom. Will put it here anyway to make sure the problem isnt on it.

   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+')');
        g = null;
    }

My problem is that if i select a certain amount of days, specifically less than 6 days in total, the graph stop showing the dates on the x axis and start to show hours, like so:

Correct way: What should happen

If i filter for less than 6 days: Wrong way

i've tried using ticks and the hAxis property on the options, but didnt have any success.

How do i make it show only days, even if the specified date spam is less than a week?

0

There are 0 best solutions below