Hi,

I'm trying to create a View with a Gantt Chart.

I can't figure out the required settings to use a start and end date field (in the same field using the Date module) to show my Gantt Chart.

Has anyone figured this out?

Thanks,

Glenn

Comments

glennnz’s picture

This page refers to the timeline package and loads it thus:

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

Is this not available in the module?

glennnz’s picture

Title: Gantt Chart » Gantt Chart in module
Status: Active » Closed (fixed)

I have solved this by writing a module.

My code is below, and is for a site using Organic Groups where an OG content type has a date field with a start and end date.

It would be great if someone can pick this up as a starting point for an add-on module to create TimeLine type Google Charts.

Glenn

<?php
function mymodule_create_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();
  
      var name;
      var start;
      var end;
  
      dataTable.addColumn({ type: 'string', id: 'Task' });
      dataTable.addColumn({ type: 'date', id: 'Start' });
      dataTable.addColumn({ type: 'date', id: 'End' });
  
      <?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);
          $task = $node->title;
          $start = $node->field_oa_date[$node->language][0]['value'];
          $end = $node->field_oa_date[$node->language][0]['value2']; ?>
  
          name = "<?php echo $task;?>";
          start = "<?php echo date('Y, m, d', $start);?>";
          end = "<?php echo date('Y, m, d', $end);?>";

          dataTable.addRows([[ name, new Date(start), new Date(end) ]]);
          <?php
        } ?>
      chart.draw(dataTable);
    }
  </script>
  <?php return '<div id="gantt" style="width: 100%; height: auto;"></div>';
}