CODEWITHSUNDEEP
google-visualizationbar-chart
Johan
Johan

Reputation: 13

Highlighting google chart bars onMouseOver a header

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.

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!).

My bar chart code reads:

           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 & 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%"},
                   });
           }

This is my first post in a development forum, so I apologize if my post is poorly constructed.

I would very much appreciate some input regarding this! Thanks in advance, Johan

Upvotes: 1

Views: 3496

Answers (1)

oli
oli

Reputation: 3551

The sample below should show you how to highlight a bar in your chart on hover of some text. You do so using the setSelection() method. As far as the docs say, only highlighting of one element at a time is supported, so unfortunately I don't think you'll be able to highlight all of the columns you want.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1.1', {packages: ['barchart']});
    </script>
    <script type="text/javascript">
      function drawVisualization() {
        // Create and populate the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Year');
        data.addColumn('number', 'Sales');
        data.addColumn('number', 'Expenses');
        data.addRows(4);
        data.setValue(0, 0, '2004');
        data.setValue(0, 1, 1000);
        data.setValue(0, 2, 400);
        data.setValue(1, 0, '2005');
        data.setValue(1, 1, 1170);
        data.setValue(1, 2, 460);
        data.setValue(2, 0, '2006');
        data.setValue(2, 1, 660);
        data.setValue(2, 2, 1120);
        data.setValue(3, 0, '2007');
        data.setValue(3, 1, 1030);
        data.setValue(3, 2, 540);

        chart = new google.visualization.BarChart(document.getElementById('visualization'));
        chart.draw(data, {width: 400, height: 240, title: 'Company Performance',
                          vAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
                         });
      }
      google.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <p> Here is some text to <a href="#" onmouseover="chart.setSelection([{row:2,column:2}]); return false">hover over</a></p>
    <div id="visualization" style="width: 600px; height: 400px;"></div>
  </body>
</html>

Upvotes: 0

Related Questions