I need to handle the onclick event over a Gauge. I don't have found an example for register events over Gauges on the Google Chart documentation.
I have tried the following:
<html>
<head>
<script type="text/javascript" src=";></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart","gauge"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'LABEL');
data.addColumn('number', 'TOTAL');
data.addRows(1);
data.setValue(0, 0, 'Speed');
data.setValue(0, 1, 240);
var gaugeOptions = {min: 0, max: 280, yellowFrom: 200, yellowTo: 250, title: 'Company Performance', redFrom: 250, redTo: 280, minorTicks: 5};
var gauge = new google.visualization.Gauge(document.getElementById('gauge_div'));
gauge.draw(data, gaugeOptions);
google.visualization.events.addListener(gauge, 'select', function() {
alert("Here");
});
}
</script>
</head>
<body>
<div id="gauge_div"></div>
</body>
</html>
Also I have tried to add onclick event with JQuery to div "gauge_div" but it only works if I make click on the border of div, not over the gauge.
I need to handle the onclick event over a Gauge. I don't have found an example for register events over Gauges on the Google Chart documentation.
I have tried the following:
<html>
<head>
<script type="text/javascript" src="https://www.google./jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart","gauge"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'LABEL');
data.addColumn('number', 'TOTAL');
data.addRows(1);
data.setValue(0, 0, 'Speed');
data.setValue(0, 1, 240);
var gaugeOptions = {min: 0, max: 280, yellowFrom: 200, yellowTo: 250, title: 'Company Performance', redFrom: 250, redTo: 280, minorTicks: 5};
var gauge = new google.visualization.Gauge(document.getElementById('gauge_div'));
gauge.draw(data, gaugeOptions);
google.visualization.events.addListener(gauge, 'select', function() {
alert("Here");
});
}
</script>
</head>
<body>
<div id="gauge_div"></div>
</body>
</html>
Also I have tried to add onclick event with JQuery to div "gauge_div" but it only works if I make click on the border of div, not over the gauge.
Share Improve this question edited Feb 14, 2021 at 12:11 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked Nov 3, 2011 at 14:36 Ernesto CampohermosoErnesto Campohermoso 7,4011 gold badge41 silver badges51 bronze badges4 Answers
Reset to default 2Gauge has no events that it triggers. The chart is rendered in an iframe, which also does not have a click event in the local dom, but rather in the window.document.body of the iframe. A solution I used was to create an empty div relatively positioned on top of the gauge and register the click event on that.
<html>
<head>
<script type="text/javascript" src="https://www.google./jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart","gauge"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'LABEL');
data.addColumn('number', 'TOTAL');
data.addRows(1);
data.setValue(0, 0, 'Speed');
data.setValue(0, 1, 240);
var gaugeOptions = {min: 0, max: 280, yellowFrom: 200, yellowTo: 250, title: 'Company Performance', redFrom: 250, redTo: 280, minorTicks: 5};
var gauge = new google.visualization.Gauge(document.getElementById('gauge_div'));
gauge.draw(data, gaugeOptions);
google.visualization.events.addListener(gauge, 'select', function() {
alert("Here");
});
}
</script>
</head>
<body style="position:relative;">
<div id="gauge_div"></div>
<div id="gauge_div_clickable" style="position:absolute;z-index:2;top:- 120px;width:120px;height:120px;" onclick="alert('here');">
</body>
</html>
Using jQuery one can use the nth-child selector something like this...
$( "#gauge_div td:nth-child(2)" ).click(function() {
var tData = data.getValue(1,0);
alert( "Handler for .click() called."+ tDate);
});
Assuming your gauge data is held in a variable called "data" you would call the second child and the correct data row would be row "1", as it will start with 0.
ie 0=1, 1=2, 2=3, 3=4, ...
To get clickable gauge, add this javascript:
$('#gauge_div').find('iframe')).each(function(elt, idx) {
$(elt).contents().find('body').click(function (event) {
// gauge.getSelection() does not exists so we emulate its result:
var selection = [{'row': idx}];
mon_onclick_callback(selection);
});
});
Which features:
- distinct gauge
onclick(works with several gauges, and identifies them) - sample of a quick
gauge.getSelection()result emulation, which could be helpfull if you want to re-use anonclickcallback that you would have already written for other google charts type.
This works because:
- each
iframeis looked to hook the event in theirbody(otherwiseonclickevent isn't triggered) - each
onclickcallback gets an appropriate indexidxrelated to their position in the HTML.
This sample uses:
- jquery which is mapped to
$, and provide selector andfind,contentsmethods - underscore which is mapped to
_, and provide theeachfacility
But both of these are optional but convenient.
I started with CrandellWS's answer, but ended up with the following, which is even simpler:
$('#gauge_div td').click(function() {
alert(data.getValue(this.cellIndex,0));
});
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745403512a4626208.html
评论列表（0条）