I would like to know if you know how to make the toolbar stick over another bar in the Google API timeline chart

4

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

    
asked by anonymous 01.01.2017 / 00:12

0 answers