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?