I am facing an issue with my timeline chart script that I am using. The code snippet is as follows:
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
});
}
The data for the graph is fetched from a database and displayed on it. The 'afterDraw' function is used to adjust the x Axis position on the graph. Although my focus is not on this function, I will include it just to eliminate any doubt about it being the cause of the problem.
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;
}
The issue arises when I select a date range of less than 6 days. In this case, the graph stops displaying dates on the x axis and starts showing hours instead.
This is how it should look: Desired result
However, when the date range is less than 6 days: Undesirable behavior
I have attempted to use ticks and the hAxis property in the options but without success. How can I ensure that only days are shown on the x axis, even if the date range is less than a week?