-1

Eu tenho um controller que faz a consulta dos dados, transforma em JSON e manda para a view (que contém a timeline).

O gráfico que está sendo usado é esse: https://developers.google.com/chart/interactive/docs/gallery/timeline#controlling-the-colors

    public function monitor_sala()
{
    $data = [];

    $reservas = ReservaSala::all();


    foreach ($reservas as $reserva) {

        $obj = array(
          $reserva->nome, $reserva->sala, $reserva->hora_pegar, 
     $reserva->hora_devolver
    );
        array_push($data, $obj);
    }

    return view('salas.monitor', compact('data'));
}

Esse é o método que manda o json (data) para a view ....

Na View o código está assim :

     <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
    google.charts.load("current", {packages:["timeline"]});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
        var container = document.getElementById('example5.1');
        var chart = new google.visualization.Timeline(container);
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn({ type: 'string', id: 'Room' });
        dataTable.addColumn({ type: 'string', id: 'Name' });
        dataTable.addColumn({ type: 'date', id: 'Start' });
        dataTable.addColumn({ type: 'date', id: 'End' });
        dataTable.addRows([
            <?php echo json_encode($data) ?>
            ]);
        var options = {
            timeline: { colorByRowLabel: true }
        };

        chart.draw(dataTable, options);
    }

</script>

<div id="example5.1" style="height: 100%"></div>

Mas não funciona, só pega quando coloco os dados do exemplo da documentação. Pelo o que diz na documentação pode usar numeros simples para representar a hora (então creio que não seja problema com o formato).

3
  • 1
    Evite colocar imagens, cole os códigos. Quando alguém vai te ajudar a primeira coisa que farão é copiar o código e testar. Com imagens ninguém fará isso 20/08/2018 às 18:45
  • Olá amigo! É só você editar sua questão. Edite e troque as imagens pelo código. 20/08/2018 às 18:50
  • Pronto, já coloquei o código no lugar das imagens 20/08/2018 às 19:27

1 Resposta 1

1

O problema é que no chart você está usando type: 'date' e os dados do json vem em string. Assim, no controller você deve colocar o datetime nesse formato:

$obj = array(
      $reserva->nome, $reserva->sala, "2016-01-01 16:40:00", "2016-01-01 16:40:00"
);

Já na view você usa:

<script type="text/javascript">
    var data = {!!$data!!};
    //convertendo os tipos de string para date no javascript
    for (i = 0; i < data.length; i++) { 
        data[i][2] = new Date(data[i][2]);
        data[i][3] = new Date(data[i][3]);
    }
    ...
    //Codigo do chart
    ...
    dataTable.addRows(data);
    ...
</script>
1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .