Adding a Today line to a Timeline Chart

[Glenn Murdoch]

I have a Timeline chart working very well inside of a Drupal website.  It uses data from the Drupal database to populate the graph data.

I want to display a vertical line on today's date; how do I do this?

My code:

/**
 *  Function to create the Gantt Chart.
 */
function smartsheet_gantt_chart() {
  ?>
  <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['timeline']}]}"></script>
  <script type="text/javascript">
    google.setOnLoadCallback(drawChart);

    function drawChart() {
      var container = document.getElementById('gantt');

      var chart = new google.visualization.Timeline(container);

      var dataTable = new google.visualization.DataTable();
       
      dataTable.addColumn({ type: 'string', id: 'Label' });
      dataTable.addColumn({ type: 'string', id: 'Task' });
      dataTable.addColumn({ type: 'date', id: 'Start' });
      dataTable.addColumn({ type: 'date', id: 'End' });
 
      // Get the Schedule Tasks that belong to this Project
      <?php  
        $node = node_load(arg(1));
        $project = node_load($node->og_group_ref[$node->language][0]['target_id']);
        $query = new EntityFieldQuery();
        $query
          ->entityCondition('entity_type', 'node')
          ->entityCondition('bundle', 'oa_event')
          ->fieldCondition('og_group_ref', 'target_id', $project->nid);
        $tasks = $query->execute();

        foreach ($tasks['node'] as $tasknode) {
          $node = node_load($tasknode->nid);
          //drupal_set_message('<pre>'. print_r($node, TRUE) .'</pre>');
          $label = $node->title;
          $task = $node->title;
          //$task = $node->title;
          $start = $node->field_oa_date[$node->language][0]['value'];
          $end = $node->field_oa_date[$node->language][0]['value2']; ?>
 
          var label = "<?php echo $label;?>";
          var name = "<?php echo $task;?>";
          var start = "<?php echo date('Y, m, d', $start);?>";
          var end = "<?php echo date('Y, m, d', $end);?>";

          dataTable.addRows([[ label, name, new Date(start), new Date(end) ]]);
          <?php
        } ?>
      var options = {
        timeline: { singleColor: '#8d8' },
        timeline: { rowLabelStyle: {fontWeight: 'bold' }},
        avoidOverlappingGridLines: false,
      };
      chart.draw(dataTable);
    }
  </script>
  <?php return '<div id="gantt" style="width: 100%; height: 100%"></div>';
}

[Jatin]

Hi Glenn,

Were you able to find a solution to this issue? I'm looking for the same thing on my Gantt chart, and cant find or seem to figure out a way.

Thanks

[Robert Reinhardt]

If you use the hTicks property for the hAxis property in options, you can do something like this:

var now = new Date();

var hTicks = new Array();

hTicks.push({v: now, f: ''});

Note that for the formatter, I'm just using an empty string. In my application, I just wanted a line to indicate where the current time was on an area/line chart.

HTH.

-Robert