CODEWITHSUNDEEP
javascriptgoogle-visualization
claudio
claudio

Reputation: 1574

Disable line that appears on a legend click for Google Line Chart

Whenever a series gets clicked on a legend in a Google Line chart, it seems that a line appears above the data trendline. Is it possible to stop this behavior? I could not find anything in the docs.

An example of this: Red trendline has line above it

Upvotes: 3

Views: 1028

Answers (1)

WhiteHat
WhiteHat

Reputation: 61275

when the legend is clicked, the entire series is selected,
which means the row value will be null

chart.getSelection() will return something like...

{row: null, column 1}

vs. when a data point is clicked / selected, the row will have a number reference row: 1, etc...

as such, use the 'select' event listener and cancel the selection when the row is null

chart.setSelection([]);

see following working snippet... 

google.charts.load('current', {
  callback: function () {
    var container = document.getElementById('chart_div');
    var chart = new google.visualization.LineChart(container);

    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({type: 'string', label: 'Year'});

    // series 0
    dataTable.addColumn({type: 'number', label: 'Category A'});
    dataTable.addColumn({type: 'string', role: 'tooltip', p: {html: true}});

    // series 1
    dataTable.addColumn({type: 'number', label: 'Category B'});
    dataTable.addColumn({type: 'string', role: 'tooltip', p: {html: true}});

    // series 2
    dataTable.addColumn({type: 'number', label: 'Category C'});
    dataTable.addColumn({type: 'string', role: 'tooltip', p: {html: true}});

    dataTable.addRows([
      ['2014', 1000, null, 2000, null, 3000, null],
      ['2015', 2000, null, 4000, null, 6000, null],
      ['2016', 3000, null, 6000, null, 9000, null],
    ]);

    for (var i = 0; i < dataTable.getNumberOfRows(); i++) {
      dataTable.setValue(i, 2, getTooltip(i, 1));
      dataTable.setValue(i, 4, getTooltip(i, 3));
      dataTable.setValue(i, 6, getTooltip(i, 5));
    }

    function getTooltip(rowIndex, columnIndex) {
      return '<div class="ggl-tooltip"><span>' +
        dataTable.getValue(rowIndex, 0) + ': </span>' +
        dataTable.getFormattedValue(rowIndex, columnIndex) + '</div>';
    }

    // use 'select' listener to disable selection on legend click
    google.visualization.events.addListener(chart, 'select', function () {
      var selection = chart.getSelection();
      if (selection.length > 0) {
        if (selection[0].row === null) {
          chart.setSelection([]);
        }
      }
    });

    chart.draw(dataTable, {
      legend: {
        position: 'bottom'
      },
      pointSize: 4,
      tooltip: {
        isHtml: true
      }
    });
  },
  packages: ['corechart']
});
.ggl-tooltip {
  border: 1px solid #E0E0E0;
  font-family: Arial, Helvetica;
  font-size: 10pt;
  padding: 12px 12px 12px 12px;
}

.ggl-tooltip span {
  font-weight: bold;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Upvotes: 2

Related Questions