This is a scale chart, I want to make the breaks stay above the scale bar.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script><scripttype="text/javascript">
google.charts.load("current", {packages:["timeline"],'language':"pt_BR"});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('Grafico_Jornada');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Data' });
dataTable.addColumn({ type: 'string', id: 'Status' });
dataTable.addColumn({ type: 'date', id: 'Inicio' });
dataTable.addColumn({ type: 'date', id: 'Fim' });
dataTable.addRows([
//[ '<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script><scripttype="text/javascript">
google.charts.load("current", {packages:["timeline"],'language':"pt_BR"});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('Grafico_Jornada');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Data' });
dataTable.addColumn({ type: 'string', id: 'Status' });
dataTable.addColumn({ type: 'date', id: 'Inicio' });
dataTable.addColumn({ type: 'date', id: 'Fim' });
dataTable.addRows([
//[ '%pre%', '%pre%', new Date(0,0,0,0,0,0), new Date(0,0,0,0,0,0) ],
[ '18/12/2016', 'Jornada', new Date(0,0,0,0,0,0), new Date(0,0,0,6,20,0) ],
[ '18', 'Problemas Técnicos', new Date(0,0,0,0,0,0), new Date(0,0,0,6,20,0) ],
[ '19/12/2016', 'Jornada', new Date(0,0,0,0,0,0), new Date(0,0,0,6,20,0) ],
[ '19', 'Logado', new Date(0,0,0,0,0,0), new Date(0,0,0,6,20,0) ],
[ '20/12/2016', 'Jornada', new Date(0,0,0,0,0,0), new Date(0,0,0,6,20,0) ],
[ '20', 'Logado', new Date(0,0,0,0,0,0), new Date(0,0,0,6,20,0) ],
[ '21/12/2016', 'Jornada', new Date(0,0,0,0,0,0), new Date(0,0,0,6,20,0) ],
[ '21/12/2016', 'Pausa 10', new Date(0,0,0,1,45,0), new Date(0,0,0,1,55,0) ],
[ '21/12/2016', 'Intervalo', new Date(0,0,0,2,45,0), new Date(0,0,0,3,0,5) ],
[ '21', 'Problemas Técnicos', new Date(0,0,0,0,0,0), new Date(0,0,0,0,30,0) ],
[ '21', 'Logado', new Date(0,0,0,0,30,0), new Date(0,0,0,6,20,0) ],
[ '22/12/2016', 'Jornada', new Date(0,0,0,0,0,0), new Date(0,0,0,6,20,0) ],
[ '22', 'Logado', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
[ '23/12/2016', 'Jornada', new Date(0,0,0,0,0,0), new Date(0,0,0,6,20,0) ],
[ '23', 'Atestado', new Date(0,0,0,0,0,0), new Date(0,0,0,6,20,0) ],
[ '24/12/2016', 'Jornada', new Date(0,0,0,0,0,0), new Date(0,0,0,6,20,0) ],
[ '24', 'Problemas Técnicos', new Date(0,0,0,0,0,0), new Date(0,0,0,3,20,0) ],
[ '25/12/2016', 'Jornada', new Date(0,0,0,0,0,0), new Date(0,0,0,6,20,0) ],
[ '25', 'Folga', new Date(0,0,0,0,0,0), new Date(0,0,0,6,20,0) ]]);
var options = {
//Jornada FF3333, PT ECA013, logado 1CA261,pausa 10 6699FF, intervalo 6633FF,atestado, folga dsr 0ECFE4
colors: ['#FF3333','#ECA013','#1CA261','#6699FF','#6633FF','#9933CC','#0ECFE4'],
timeline: {
colorByRowLabel: false,
barLabelStyle: { fontSize: '10'}
},
hAxis: {
minValue: new Date(0,0,0,0,0,0),
maxValue: new Date(0,0,0,24,0,0),
format: "k:mm"}
};
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div align="center">
<br>
<br>
<h3>Painel de Visualização da Escala</h3>
<div id="Grafico_Jornada" style="width: 1000px; height: 400px;" ></div>
</div>
</body>
</html>
', '%pre%', new Date(0,0,0,0,0,0), new Date(0,0,0,0,0,0) ],
[ '18/12/2016', 'Jornada', new Date(0,0,0,0,0,0), new Date(0,0,0,6,20,0) ],
[ '18', 'Problemas Técnicos', new Date(0,0,0,0,0,0), new Date(0,0,0,6,20,0) ],
[ '19/12/2016', 'Jornada', new Date(0,0,0,0,0,0), new Date(0,0,0,6,20,0) ],
[ '19', 'Logado', new Date(0,0,0,0,0,0), new Date(0,0,0,6,20,0) ],
[ '20/12/2016', 'Jornada', new Date(0,0,0,0,0,0), new Date(0,0,0,6,20,0) ],
[ '20', 'Logado', new Date(0,0,0,0,0,0), new Date(0,0,0,6,20,0) ],
[ '21/12/2016', 'Jornada', new Date(0,0,0,0,0,0), new Date(0,0,0,6,20,0) ],
[ '21/12/2016', 'Pausa 10', new Date(0,0,0,1,45,0), new Date(0,0,0,1,55,0) ],
[ '21/12/2016', 'Intervalo', new Date(0,0,0,2,45,0), new Date(0,0,0,3,0,5) ],
[ '21', 'Problemas Técnicos', new Date(0,0,0,0,0,0), new Date(0,0,0,0,30,0) ],
[ '21', 'Logado', new Date(0,0,0,0,30,0), new Date(0,0,0,6,20,0) ],
[ '22/12/2016', 'Jornada', new Date(0,0,0,0,0,0), new Date(0,0,0,6,20,0) ],
[ '22', 'Logado', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
[ '23/12/2016', 'Jornada', new Date(0,0,0,0,0,0), new Date(0,0,0,6,20,0) ],
[ '23', 'Atestado', new Date(0,0,0,0,0,0), new Date(0,0,0,6,20,0) ],
[ '24/12/2016', 'Jornada', new Date(0,0,0,0,0,0), new Date(0,0,0,6,20,0) ],
[ '24', 'Problemas Técnicos', new Date(0,0,0,0,0,0), new Date(0,0,0,3,20,0) ],
[ '25/12/2016', 'Jornada', new Date(0,0,0,0,0,0), new Date(0,0,0,6,20,0) ],
[ '25', 'Folga', new Date(0,0,0,0,0,0), new Date(0,0,0,6,20,0) ]]);
var options = {
//Jornada FF3333, PT ECA013, logado 1CA261,pausa 10 6699FF, intervalo 6633FF,atestado, folga dsr 0ECFE4
colors: ['#FF3333','#ECA013','#1CA261','#6699FF','#6633FF','#9933CC','#0ECFE4'],
timeline: {
colorByRowLabel: false,
barLabelStyle: { fontSize: '10'}
},
hAxis: {
minValue: new Date(0,0,0,0,0,0),
maxValue: new Date(0,0,0,24,0,0),
format: "k:mm"}
};
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div align="center">
<br>
<br>
<h3>Painel de Visualização da Escala</h3>
<div id="Grafico_Jornada" style="width: 1000px; height: 400px;" ></div>
</div>
</body>
</html>
Another thing I would like to do is show up all the time and not 2 on 2, I used the gridlines.count of hAxis but I did not have success