Google Visualization/Charts JS library (TimeLine): DataTable limitations

user_13630195 0
Viewed 105

I'm using Google's Visualization JS library, with the Timeline chart type. I have a Timeline chart built, and working. It has 5 data columns in it.

I wanted to add in a new data column, so that I could tag each row with a database ID for that record. I want to make the chart clickable: user clicks an bar and is taken to details for that bar.

But when I added a new addcolumn() to the JS code, and matching data in the addrow() array, it gave me an error about invalid columns.

(I have been able to add in a Style column to the data object... but I did have to put it in the midlle of the the data Columns - it wouldn't work if I put the Style column as the last column in the set.)

Here's a JSFiddle that shows the working columns & chart: https://jsfiddle.net/t9yfe2jm/

<head>
<style>
body {
  height: 95%;
}

.chart-height {
  height: 100%;
}
</style>

<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('chart_div');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();

        google.visualization.events.addListener(chart, 'select', myClickHandler);

        dataTable.addColumn({ type: 'string', id: 'TaskGroup' });
    dataTable.addColumn({ type: 'string', id: 'bar label' });
    dataTable.addColumn({ type: 'string', role: 'tooltip' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });

        dataTable.addRows( [
      ["Admin", "Test ABC ABC", "  • Test ABC ABC", new Date (2021, 10, 6), new Date (2021, 10, 15)]
      , ["CAD", "#1 TEST", "  • #1  - TEST", new Date (2021, 10, 7), new Date (2021, 10, 8)]
      , ["Field", "Field work - TEST TEST", "  • Field work - TEST", new Date (2021, 10, 6), new Date (2021, 10, 10)]
      , ["CAD", "2 TEST TEST", "  • 2   -  TEST TEST", new Date (2021, 10, 11), new Date (2021, 10, 14)]
      , ["Admin", "Test ITEM 1", "  • Test ITEM 1", new Date (2021, 10, 6), new Date (2021, 10, 10)]
      , ["Field", "Test part 2", "  • Field Test part 2", new Date (2021, 10, 13), new Date (2021, 10, 15)]
      , ["Field", "Test Part 3", "  • Field Test Part 3", new Date (2021, 10, 14), new Date (2021, 10, 17)]
        ]);

  chart.draw(dataTable);

  function myClickHandler(){
    var selection = chart.getSelection();
    var message = '';
    var selectedValue = '';

    for (var i = 0; i < selection.length; i++) {
      var item = selection[i];
      if (item.row != null && item.column != null) {
        message += '{row:' + item.row + ',column:' + item.column + '}';
      } else if (item.row != null) {
        message += '{row:' + item.row + '}';
        selectedValue = item.row;
      } else if (item.column != null) {
        message += '{column:' + item.column + '}';
        selectedValue = item.column;
      }
    }
    if (message == '') {
      message = 'nothing';
    }
    alert('You selected ' + selectedValue + '\nValue = ' + dataTable.getValue(selectedValue,0) + '|' + dataTable.getValue(selectedValue,1) );
  }
}

  </script>
</head>
<body>
  <div class="chart-height" id="chart_div"></div>
</body>
</html>

Here's the broken JSFiddle - just has the new column added to it: https://jsfiddle.net/syzrfe82/

<head>
<style>
body {
  height: 95%;
}

.chart-height {
  height: 100%;
}
</style>

<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('chart_div');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();

        google.visualization.events.addListener(chart, 'select', myClickHandler);

        dataTable.addColumn({ type: 'string', id: 'TaskGroup' });
    dataTable.addColumn({ type: 'string', id: 'bar label' });
    dataTable.addColumn({ type: 'string', role: 'tooltip' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addColumn({ type: 'string', id: 'RecID' });

        dataTable.addRows( [
            ["Admin", "Test ABC ABC", "  • Test ABC ABC", new Date (2021, 10, 6), new Date (2021, 10, 15), 'aaa1111']
            , ["CAD", "#1 TEST", "  • #1  - TEST", new Date (2021, 10, 7), new Date (2021, 10, 8),'bbb2222']
      , ["Field", "Field work - TEST TEST", "  • Field work - TEST", new Date (2021, 10, 6), new Date (2021, 10, 10),'fff5555']
      , ["CAD", "2 TEST TEST", "  • 2   -  TEST TEST", new Date (2021, 10, 11), new Date (2021, 10, 14),'ddd4444']
      , ["Admin", "Test ITEM 1", "  • Test ITEM 1", new Date (2021, 10, 6), new Date (2021, 10, 10),'ccc3333']
      , ["Field", "Test part 2", "  • Field Test part 2", new Date (2021, 10, 13), new Date (2021, 10, 15),'ggg6666']
      , ["Field", "Test Part 3", "  • Field Test Part 3", new Date (2021, 10, 14), new Date (2021, 10, 17), 'zzz0000']
        ]);

    chart.draw(dataTable);

   function myClickHandler(){
    var selection = chart.getSelection();
    var message = '';
    var selectedValue = '';

    for (var i = 0; i < selection.length; i++) {
      var item = selection[i];
      if (item.row != null && item.column != null) {
        message += '{row:' + item.row + ',column:' + item.column + '}';
      } else if (item.row != null) {
        message += '{row:' + item.row + '}';
        selectedValue = item.row;
      } else if (item.column != null) {
        message += '{column:' + item.column + '}';
        selectedValue = item.column;
      }
    }
    if (message == '') {
      message = 'nothing';
    }
    alert('You selected ' + selectedValue + '\nValue = ' + dataTable.getValue(selectedValue,0) + '|' + dataTable.getValue(selectedValue,1) );
  }
}


  </script>
</head>
<body>
  <div class="chart-height" id="chart_div"></div>
</body>
</html>

So, is this just a limit to the TimeLine chart's DataTable object? Seems strange, since I was able to add the Style column in, but not an arbitrary data column. (This Style column is not present in the JSfiddle examples above. I did note that I had to put the Style column in the 3rd position of the array... rather it wouldn't work when it was in the last position. I didn't try all the other positions to see if they would also work.) Unless the JS removes the Style column from the final object.

The error message isn't real accurate, either - it says 3-4 data columns, but the documentation lists 5 (not including the Style column).

Thanks.

timeline google-visualization charts javascript
1 Answers

see the data format for the timeline chart,
it specifies the tooltip is required in column index 2.

there are a couple ways to accomplish.
the most obvious is to use a data view,
to hide the additional column from the chart.

we can still access the data table later, to pull the data from the extra column.

first, create the data table as normal, with the extra column.

var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'TaskGroup' });
dataTable.addColumn({ type: 'string', id: 'bar label' });
dataTable.addColumn({ type: 'string', role: 'tooltip' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addColumn({ type: 'string', id: 'RecID' });

dataTable.addRows( [
  ["Admin", "Test ABC ABC", "  • Test ABC ABC", new Date (2021, 10, 6), new Date (2021, 10, 15), 'aaa1111']
  , ["CAD", "#1 TEST", "  • #1  - TEST", new Date (2021, 10, 7), new Date (2021, 10, 8),'bbb2222']
  , ["Field", "Field work - TEST TEST", "  • Field work - TEST", new Date (2021, 10, 6), new Date (2021, 10, 10),'fff5555']
  , ["CAD", "2 TEST TEST", "  • 2   -  TEST TEST", new Date (2021, 10, 11), new Date (2021, 10, 14),'ddd4444']
  , ["Admin", "Test ITEM 1", "  • Test ITEM 1", new Date (2021, 10, 6), new Date (2021, 10, 10),'ccc3333']
  , ["Field", "Test part 2", "  • Field Test part 2", new Date (2021, 10, 13), new Date (2021, 10, 15),'ggg6666']
  , ["Field", "Test Part 3", "  • Field Test Part 3", new Date (2021, 10, 14), new Date (2021, 10, 17), 'zzz0000']
]);

then create a data view, hide the extra column, and use the data view to draw the chart.

var dataView = new google.visualization.DataView(dataTable);
dataView.hideColumns([dataTable.getNumberOfColumns() - 1]);

chart.draw(dataView);
user_50907710
Related