title: Highlighting google chart bars onMouseOver a header
body: <p>I am currently working with a project in Django using google bar
  charts to display various data. I am quite inexperienced with
  Javascript but have gotten the bar charts to work as intended, thanks
  to the provided example.</p>
  
  <p>My goal is to have a javascript that highlights one of the bars when
  the mouse is over a word in the text body, i.e. when the mouse is over
  the header 'Solvency', the latest solvency bar should be highlighted
  (or preferably all the solvency bars!).</p>
  
  <p>My bar chart code reads:</p>
  
  <pre><code>           google.load("visualization", "1", {packages:["corechart"]});
             google.setOnLoadCallback(drawChart);
                     function drawChart() {
                     var data = new google.visualization.DataTable();
                     data.addColumn('string', 'Year');
                     data.addColumn('number', 'Solvency');
                     data.addColumn('number', 'Margin');
                     data.addRows({{ to_annual_report_list|length }});
  
                     {% for annual_report in to_annual_report_list reversed %}
                             data.setValue({{forloop.counter0}}, 0,'{{ annual_report.year }}');
                     {% endfor %}
  
                     {% for solvency in solvency_list reversed %}
                             data.setValue({{forloop.counter0}}, 1, {{ solvency|floatformat:"2" }});
                     {% endfor %}
  
                     {% for margin in margin_list reversed %}
                             data.setValue({{forloop.counter0}}, 2, {{ margin|floatformat:"2"}});
  
                     {% var chart = new google.visualization.ColumnChart(document.getElementById('bar_chart_div'));
                     chart.draw(data, {
                             width: 400,
                             height: 240,
                             title: '{{to_company.name}} - Solvency &amp; Margin',
                             titleTextStyle: {color: '#000', fontName: 'Lucida Sans',fontSize:12},
                             titlePosition: 'out',
                             hAxis: {titleTextStyle: {color: '#000'}, textPosition: in'},
                             vAxis: {title: '%', titleTextStyle: {color: '#000'}, textPosition:'out'},
                             axisTitlesPosition: 'out',
                             legend: 'bottom',
                             legendTextStyle:{ fontSize: 12 },
                             colors: ['#58db25', '#2e7114', '#4ec221'],
                             chartArea: {left: 30, top: 40, width:"100%",height:"70%"},
                     });
             }
  </code></pre>
  
  <p>This is my first post in a development forum, so I apologize if my
  post is poorly constructed.</p>
  
  <p>I would very much appreciate some input regarding this!
  Thanks in advance,
  Johan</p>