CODEWITHSUNDEEP
javascriptmysqlgoogle-visualization
kaulainais
kaulainais

Reputation: 125

Google Charts BarChart OnClick or OnSelect

The code creates Google Charts Bar chart with 2 columns.

<?php
$sth = mysql_query("select * from table");
$rows = array();
//flag is not needed
$flag = true;
$table = array();
$table['cols'] = array(
                array('label' => 'Stats', 'type' => 'string'),
                array('label' => 'Value', 'type' => 'number')
                );
$rows = array();
while($r = mysql_fetch_assoc($sth)) 
{
$temp = array();
$temp[] = array('v' => (string) $r['Stats']); 
$temp[] = array('v' => (int) $r['Value']); 
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
$jsonTable = json_encode($table);
?>  
<script type="text/javascript">
google.load('visualization', '1', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
  var data = new google.visualization.DataTable(<?php echo $jsonTable; ?>);
  var options = {
        legend: {position: 'none'},
    bar: {groupWidth: "85%"},
    colors:['#4A9218'],
    hAxis: {
                viewWindowMode: 'explicit',
                viewWindow: {
                             max: 400,
                             min: 0,
                             },
                 gridlines: {
                          count: 10,
                            }
                        }          
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
<!--this is the div that will hold the pie chart-->
<div id="chart_div" style="width:100%; height:200px"></div>

the Output is simple Barchart, that feed data from MySQL. Is it possible an how to:

 1)To change Bar color when selected
 2)To change/populate seperate <div></div> content value regarding on selected Bar

For example You click on Bar with value "3"(its dynamic). The Bar change color to red. DIV element below shows value "3"

Upvotes: 4

Views: 12236

Answers (1)

asgallant
asgallant

Reputation: 26340

Yes, you can do that by adding in a 'select' event handler that gets the data from your DataTable, updates your div with the value, sets the color of the bar via a 'style' role column in a DataView, and redraws the chart using the view. Here's an example:

google.visualization.events.addListener(chart, 'select', function () {
    var selection = chart.getSelection();
    if (selection.length) {
        var row = selection[0].row;
        document.querySelector('#myValueHolder').innerHTML = data.getValue(row, 1);

        var view = new google.visualization.DataView(data);
        view.setColumns([0, 1, {
            type: 'string',
            role: 'style',
            calc: function (dt, i) {
                return (i == row) ? 'color: red' : null;
            }
        }]);

        chart.draw(view, options);
    }
});

See it working here: http://jsfiddle.net/asgallant/kLL2s/

Upvotes: 8

Related Questions