DateTime PHP to JS for Timeline charts

[tperroin]

Hello,

First, thank you for this bundle, it really helps us!

However, we face issues with DateTime from PHP to JS Date.

We want to create a timeline chart with only hours, minutes and seconds like this example from Google Chart Timeline documentation :

function drawChart() {

    var container = document.getElementById('example5.2');
    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([
      [ 'Magnolia Room',  'CSS Fundamentals',    new Date(0,0,0,12,0,0),  new Date(0,0,0,14,0,0) ],
      [ 'Magnolia Room',  'Intro JavaScript',    new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Magnolia Room',  'Advanced JavaScript', new Date(0,0,0,16,30,0), new Date(0,0,0,19,0,0) ],
      [ 'Gladiolus Room', 'Intermediate Perl',   new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
      [ 'Gladiolus Room', 'Advanced Perl',       new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Gladiolus Room', 'Applied Perl',        new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ],
      [ 'Petunia Room',   'Google Charts',       new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
      [ 'Petunia Room',   'Closure',             new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Petunia Room',   'App Engine',          new Date(0,0,0,16,30,0), new Date(0,0,0,18,30,0) ]]);

    var options = {
      timeline: { singleColor: '#8d8' },
    };

    chart.draw(dataTable, options);
  }

In fact in our application we have to generate a PHP DateTime from a string. But the Data class from your bundle doesn't implement hours, minutes and seconds.

It's pretty easy do add that functionality into the draw function :

public function draw($dataName)
    {
        $js = "var $dataName = new google.visualization.arrayToDataTable([";

        end($this->arrayToDataTable);
        $lastKeyRow = key($this->arrayToDataTable);
        foreach ($this->arrayToDataTable as $keyRow => $row) {
            $js .= '[';

            end($row);
            $lastKeyValue = key($row);
            foreach ($row as $key => $value) {
                if ($value instanceof \DateTime) {
                    $js .= 'new Date(' . $value->format('Y') . ', ' . ($value->format('n')-1) . ', ' .
                        $value->format('d') . ', '. $value->format('H')  .', '. $value->format('i').', '. $value->format('s') .')';
                } else {
                    $js .= json_encode($value);
                }

                if ($key != $lastKeyValue) {
                    $js .= ', ';
                }
            }
            unset($value);
            $js .= ']';

            if ($keyRow != $lastKeyRow) {
                $js .= ', ';
            }
        }
        unset($row);

        $this->firstRowIsData ? $js .= '], true);' : $js .= '], false);';

        return $js;
    }

There is any plan to add this features? Maybe can I create a PR for that?

Thank you!

[cmen]

Hello,

It's not planned but you can create a PR.

[cmen]

405e883