1

I'm using the Google Chart API to display my data with a line chart.

Because I have some specials needs for the legend, I set the original legend of the chart to none then I displayed my own like I wanted it to be.

Everything works fine except one thing, I want to implement the legend hovering function which when you hover a specific line of the original legend of the chart, the associated line is selected and displayed thicker.

My problem is similar to this question : Google charts invoke onmouseover event

And I'm actually trying to adapt the code from the selected answer to my case. But I'm not able to.

Here is a fiddle with the code of my html page.

The $('#legend tr').hover is correctly fired when I hover the legend, because if I add an alert($(this).data('row')) I get the correct data-row value displayed in the alert box. But nothing happens on the chart. It seems like the chart.setSelection() isn't working or something.

How can I modify my code to handle the hover event ?

WhiteHat
  • 59,912
  • 7
  • 51
  • 133
M. Ozn
  • 1,018
  • 1
  • 19
  • 42

1 Answers1

1

the line chart works differently than the pie chart shown in the provided example.

pie charts can only have one series.
whereas line charts can have multiple series.

to highlight the series when hovering the legend,
we need to provide the column number of the series,
rather than the row associated with the "pie slice".
and we need to provide null as the row index...

see following working snippet...

google.charts.load('current', { 'packages': ['line'] });
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Day');
  data.addColumn('number', 'Yes');
  data.addColumn('number', 'No');

  data.addRows([
    ['19/11/2020 \n 02:48:16', 1.2, 1.6],
    ['19/11/2020 \n 02:48:22', 1.2, 1.6],
    ['19/11/2020 \n 02:48:28', 1.3, 1.6]
  ]);

  var options = {
    legend: {
      position: 'none'
    },
    height: '100%',
    width: '100%',
    vAxis: {
      viewWindow: {
        min: 1,
        max: 1.95,
      }
    },
    colors: ['#1976D2','#E53935']
  };

  var chart = new google.charts.Line(document.getElementById('linechart_material'));
  chart.draw(data, google.charts.Line.convertOptions(options));

  $('#legend tr').hover(function () {
    chart.setSelection([{ column: $(this).data('column'), row: null }]);
  }, function () {
    chart.setSelection([]);
  })
}
.color {
        width: 2.5rem;
        height: 1.5rem;
        border-radius: 0.1875rem;
    }

    #linechart_material {
        width: 500px;
        height:200px;
        padding-top:5px;
    }
    
    .title {
    margin-bottom: -0.0005rem;
}

.subtitle {
    color: gray;
    font-size: 16px;
}

.state {
    width: 2.5rem;
    height: 1.5rem;
    border-radius: 0.1875rem;
    color: white;
    margin-left: 3px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 4px;
    font-weight: 600;
}

.state-open {
    background-color: #00ba54;
}

.state-closed {
    background-color: #d00000;
}
<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="linechart_material"></div>


<table class="table-hover">
  <tbody id="legend">
    <tr data-column="1">
      <td>
        <div class="color" style="background-color:#1976D2"></div>
      </td>
      <td style="padding-left:20px; padding-right:20px; padding-top:5px; padding-bottom:5px;">
        Yes
      </td>
      <td>
        1.3
      </td>
    </tr>
    <tr data-column="2">
      <td>
        <div class="color" style="background-color:#E53935"></div>
      </td>
      <td style="padding-left:20px; padding-right:20px; padding-top:5px; padding-bottom:5px;">
        No
      </td>
      <td>
        1.6
      </td>
    </tr>
  </tbody>
</table>
WhiteHat
  • 59,912
  • 7
  • 51
  • 133