CODEWITHSUNDEEP
chartsgoogle-visualization
mandan
mandan

Reputation: 69

google chart- Invalid data table format:

google.charts.load('current', {'packages':['gantt']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Task ID');
  data.addColumn('string', 'Task Name');
  data.addColumn('string', 'Resource');
  data.addColumn('date', 'Start Date');
  data.addColumn('date', 'End Date');



  data.addRows([
    ['2014Spring', 'Spring 2014', 'spring',new Date(2014, 2, 22), new Date(2014, 5, 20)]]);  
    var options = {
    height: 400,
    gantt: {
      trackHeight: 30
    }
  };

  var chart = new google.visualization.Gantt(document.getElementById('chart_div'));

  chart.draw(data, options);
}
</script>

output Invalid data table format: column #5 must be of type 'number'.×

can any body tell what is wrong.

Upvotes: 1

Views: 3142

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

check the data format for the Gantt chart

the only optional column is 'Resource'
all other columns are required

you don't have to provide values for these columns, 

  data.addRows([
    [
      '2014Spring',           // Task ID
      'Spring 2014',          // Task Name
      'spring',               // Resource ID (optional)
      new Date(2014, 2, 22),  // Start
      new Date(2014, 5, 20),  // End
      null,                   // Duration (in milliseconds)
      null,                   // Percent Complete
      null                    // Dependencies
    ]
  ]);

but they must be present on the data table

see following working snippet... 

google.charts.load('current', {'packages':['gantt']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Task ID');
  data.addColumn('string', 'Task Name');
  data.addColumn('string', 'Resource');
  data.addColumn('date', 'Start Date');
  data.addColumn('date', 'End Date');
  data.addColumn('number', 'Duration');
  data.addColumn('number', '% Complete');
  data.addColumn('string', 'Dependencies');

  data.addRows([
    ['2014Spring', 'Spring 2014', 'spring',new Date(2014, 2, 22), new Date(2014, 5, 20), null, null, null]
  ]);  

  var options = {
    height: 400,
    gantt: {
      trackHeight: 30
    }
  };

  var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
  chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Upvotes: 2

Related Questions