Home/ Questions/Q 5949865
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T17:18:41+00:00

I am currently working with a project in Django using google bar charts to

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0