Search code examples
google-visualization

Google Visualization disable user selection


Is there anyway to disable user selection in google visualization chart (specifically org chart)

In the javascript, I have programmatically set selection on one of the node. Is there anyway to disable user selection from that point on, so that the selection doesn't change even when user click on other section on the chart?


Solution

  • you can't disable but you can override

    listen for the 'select' event and setSelection to the desired row

    see following example...

    google.charts.load('current', {
      callback: function () {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('string', 'Manager');
        data.addColumn('string', 'ToolTip');
    
        // For each orgchart box, provide the name, manager, and tooltip to show.
        data.addRows([
          [{v:'Mike', f:'Mike<div style="color:red; font-style:italic">President</div>'},
           '', 'The President'],
          [{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'},
           'Mike', 'VP'],
          ['Alice', 'Mike', ''],
          ['Bob', 'Jim', 'Bob Sponge'],
          ['Carol', 'Bob', '']
        ]);
    
        var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
    
        // set selection on 'ready' and 'select'
        google.visualization.events.addListener(chart, 'ready', setSelection);
        google.visualization.events.addListener(chart, 'select', setSelection);
    
        function setSelection() {
          chart.setSelection([{row: 1}]);
        }
    
        chart.draw(data, {allowHtml: true});
      },
      packages:['orgchart']
    });
    <script src="https://www.gstatic.com/charts/loader.js"></script>
    <div id="chart_div"></div>