How to trigger Click Events on Google Chart
To trigger an event on click and obtain the data of chart
1. create a ChartController.groovy as shown below
2.Create a chart.gsp to display the google chart.
If you can see the code i am first displaying the google chart and on click the chart i am making an ajax call to controller , there i am preparing a string with the data i want to display.
The chart trigger event code:
function selectHandler() {
var selection = chart.getSelection();
var message = '';
for (var i = 0; i < selection.length; i++) {
var item = selection[i];
if (item.row != null && item.column != null) {
var str = data.getFormattedValue(item.row, item.column);
var category = data
.getValue(chart.getSelection()[0].row, 0)
var type
if (item.column == 1) {
type = "correct";
} else {
type = "wrong";
}
message += '{row:' + item.row + ',column:' + item.column
+ '} = ' + str + ' The Category is:' + category
+ ' it belongs to : ' + type + '\n';
} else if (item.row != null) {
var str = data.getFormattedValue(item.row, 0);
message += '{row:' + item.row
+ ', column:none}; value (col 0) = ' + str
+ ' The Category is:' + category + '\n';
} else if (item.column != null) {
var str = data.getFormattedValue(0, item.column);
message += '{row:none, column:' + item.column
+ '}; value (row 0) = ' + str
+ ' The Category is:' + category + '\n';
}
}
if (message == '') {
message = 'nothing';
}
alert('You selected ' + message);
var url = "${request.getContextPath()}/map/showPage"
If you want to navigate to another page or template you can write an ajax call
here to do your action....Here i am making an ajax call to prepare a string
displaying the content of the bar on which i clicked
$.ajax({
url : url,
type : "POST",
data : {
message : message
},
success : function(data) {
alert(data.message);
$('#page-body1').show()
$('#chart_div').hide()
$('#back').show()
$("#page-body1").html(data.message);
}
});
}
Controller (ChartController.groovy)
package com.gb.map
import grails.converters.JSON
class ChartController {
def index(){
render view:'/chart'
}
def showPage(){
def map = params
render map as JSON
}
}
Complete View Page code
(map.gsp):
<div>
<h1 id="page-body1">This is a chart event</h1>
</div>
<script type="text/javascript">
$('#page-body1').hide()
$('#chart_div').show()
$('#back').on('click', function() {
$('#page-body1').hide()
$('#chart_div').show()
$('#back').hide()
});
google.load('visualization', '1', {
packages : [ 'corechart', 'bar' ]
});
google.setOnLoadCallback(drawStacked);
function drawStacked() {
var data = google.visualization.arrayToDataTable([
[ 'City', '2010 Population', '2000 Population' ],
[ 'New York City, NY', 8175000, 8008000 ],
[ 'Los Angeles, CA', 0, 3694000 ],
[ 'Chicago, IL', 2695000, 2896000 ],
[ 'Houston, TX', 2099000, 1953000 ],
[ 'Philadelphia, PA', 1526000, 1517000 ] ]);
var options = {
title : 'Population of Largest U.S. Cities',
chartArea : {
width : '50%'
},
isStacked : true,
hAxis : {
title : 'Total Population',
minValue : 0,
},
vAxis : {
title : 'City'
}
};
var chart = new google.visualization.BarChart(document
.getElementById('chart_div'));
chart.draw(data, options);
google.visualization.events.addListener(chart, 'select', selectHandler);
function selectHandler() {
var selection = chart.getSelection();
var message = '';
for (var i = 0; i < selection.length; i++) {
var item = selection[i];
if (item.row != null && item.column != null) {
var str = data.getFormattedValue(item.row, item.column);
var category = data
.getValue(chart.getSelection()[0].row, 0)
var type
if (item.column == 1) {
type = "correct";
} else {
type = "wrong";
}
message += '{row:' + item.row + ',column:' + item.column
+ '} = ' + str + ' The Category is:' + category
+ ' it belongs to : ' + type + '\n';
} else if (item.row != null) {
var str = data.getFormattedValue(item.row, 0);
message += '{row:' + item.row
+ ', column:none}; value (col 0) = ' + str
+ ' The Category is:' + category + '\n';
} else if (item.column != null) {
var str = data.getFormattedValue(0, item.column);
message += '{row:none, column:' + item.column
+ '}; value (row 0) = ' + str
+ ' The Category is:' + category + '\n';
}
}
if (message == '') {
message = 'nothing';
}
alert('You selected ' + message);
var url = "${request.getContextPath()}/map/showPage"
If you want to navigate to another page or template you can write an ajax call
here to do your action....Here i am making an ajax call to prepare a string
displaying the content of the bar on which i clicked
$.ajax({
url : url,
type : "POST",
data : {
message : message
},
success : function(data) {
alert(data.message);
$('#page-body1').show()
$('#chart_div').hide()
$('#back').show()
$("#page-body1").html(data.message);
}
});
}
}
</script>
You can go through my js fiddle link as follows:
https://jsfiddle.net/anushach/GoogleCharts/clickEvent/
No comments:
Post a Comment