CODEWITHSUNDEEP
javascriptchartsgoogle-visualization
mrvnklm
mrvnklm

Reputation: 1828

Set single point as active / show point and tooltip in Google line chart

Im currently using a Google line chart to show two lines intercepting each other. I would like to show the data point and if possible the tooltip as well, where the lines are intercepting.

My current solution is to show all points and increase the size for the specific point, but actually I want to keep the functionality of seeing the points when pointing on them.

if (!intercept && oldVal > newVal) {
      intercept = true
      point = 'point { size: 10; }'
    }
data.push([i + 1, oldVal, newVal, point])

Upvotes: 1

Views: 126

Answers (1)

WhiteHat
WhiteHat

Reputation: 61232

it looks like you're on the right track with the point size.

we have to set the pointSize config option to something greater than zero,
in order to be able to set the size in our style column.
but we can use something like --> pointSize: 0.1
to prevent the other points from being visible.

as for the tooltip, we can set the tooltip.trigger option to either...
'selection' or 'both' 

tooltip: {
  trigger: 'both'
}

then we can use the chart's 'ready' event,
to set the chart's selection 

google.visualization.events.addListener(chart, 'ready', function () {
  chart.setSelection([{row: intercept, column: 2}]);
});

with the above trigger option, when we set the chart's selection,
the tooltip will automatically appear.

see following working snippet... 

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'X');
  data.addColumn('number', 'Old');
  data.addColumn('number', 'New');
  data.addColumn({type: 'string', role: 'style'});

  var intercept = null;
  var rows = new Array(10);
  $.each(rows, function (i) {
    var oldVal = i;
    var newVal = rows.length - i;
    var point = null;
    if ((intercept === null) && (oldVal === newVal)) {
      intercept = i;
      point = 'point { size: 10; }';
    }
    data.addRow([i + 1, oldVal, newVal, point])
  });

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

  google.visualization.events.addListener(chart, 'ready', function () {
    chart.setSelection([{row: intercept, column: 2}]);
  });

  chart.draw(data, {
    pointSize: 0.1,
    tooltip: {
      trigger: 'both'
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Upvotes: 1

Related Questions