Google Charts Timeline using Laravel (PHP)

Asked

Viewed 469 times

-1

I have a controller that queries the data, transforms it into JSON and sends it to the view (which contains Timeline).

The chart being used is this: 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'));
}

This is the method that sends json (date) to the view ....

In View the code is like this :

     <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>

But it doesn’t work, it only picks up when I put the sample data in the documentation. From what it says in the documentation you can use simple numbers to represent the time (so I guess it’s no problem with the format).

php json laravel
  • 1

    Avoid placing images, paste the codes. When someone will help you the first thing they will do is copy the code and test. With pictures no one will do that

  • Hello friend! Just edit your question. Edit and replace the images with the code.

  • Okay, I’ve already put the code in place of the images

1 answer

1


The problem is that in Chart you are using type: 'date' and the json data comes in string. So, in the controller you should put the datetime in this format:

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

Already in the view you use:

<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>

Browser other questions tagged php json laravel

You are not signed in. Login or sign up in order to post.