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


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.

Source: JavaSript – Stack Overflow

November 9, 2021
Category : News
Tags: charts | google-visualization | javascript | timeline

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.