I have a JavaScript question - even though Google Charts are involved.
I have prepared a simple test case, which you can try in a browser instantly.
I couldn't prepare a JSFiddle, it didn't run my code for some reason.
My problem is: I have multiple charts at my web page and for each of them I register a "select" event listener. Inside of the listener I have (a very natural) need to see, which chart exactly has been clicked (selected).
My problematic code below always prints the title of the last chart at the web page.
You can see it in the screenshot below: I click the GSM_1800_EDGE_EMAC_HP_H chart, but the alert says it is GSM_1800_EDGE_EMAC_HP_M:
I've tried different approaches (closure?), but not listing them here for brevity.
Here is my code, please ignore the huge var data = ... assignment at the beginning, the rest of the code is really simple:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
<script type="text/javascript">
var data = {"GSM_1800_EDGE_EMAC_HP_L":{"rows":[{"c":[{"v":"EVM_RMS_MAXIMUM"},{"v":1.673198},{"v":1.703763},{"v":1.816869},{"v":1.850355},{"v":1.888287},{"v":2.072179},{"v":2.208197},{"v":2.040064},{"v":1.785052},{"v":1.862001},{"v":2.018309},{"v":1.713204},{"v":1.891804},{"v":2.215505},{"v":1.852155},{"v":5},{"v":0}]},{"c":[{"v":"ORIGIN_OFFSET"},{"v":-55.52737},{"v":-54.60983},{"v":-52.95285},{"v":-57.21094},{"v":-55.08899},{"v":-52.80658},{"v":-54.45917},{"v":-54.47009},{"v":-55.10355},{"v":-53.616},{"v":-52.98431},{"v":-54.99429},{"v":-52.11819},{"v":-54.55518},{"v":-56.68314},{"v":-33},{"v":0}]},{"c":[{"v":"FREQERROR_AVG"},{"v":21.76066},{"v":47.62163},{"v":21.30866},{"v":42.55275},{"v":26.76497},{"v":34.12614},{"v":18.49979},{"v":29.44469},{"v":22.63238},{"v":34.02929},{"v":38.48473},{"v":28.63755},{"v":27.99183},{"v":14.27035},{"v":11.30005},{"v":0},{"v":0}]},{"c":[{"v":"AVGBURSTPOWER"},{"v":26.05695},{"v":26.26254},{"v":26.23032},{"v":26.21082},{"v":26.21725},{"v":26.19885},{"v":26.21213},{"v":26.19904},{"v":26.19995},{"v":26.20013},{"v":26.21317},{"v":26.20001},{"v":26.21893},{"v":26.18625},{"v":26.19437},{"v":0},{"v":0}]}],"cols":[{"p":{"role":"domain"},"label":"MEASUREMENT","type":"string"},{"p":{"role":"data"},"label":"1142926087 #1","type":"number"},{"p":{"role":"data"},"label":"1142926087 #2","type":"number"},{"p":{"role":"data"},"label":"1142926087 #3","type":"number"},{"p":{"role":"data"},"label":"1142926087 #4","type":"number"},{"p":{"role":"data"},"label":"1142926087 #5","type":"number"},{"p":{"role":"data"},"label":"1142926087 #6","type":"number"},{"p":{"role":"data"},"label":"1142926087 #7","type":"number"},{"p":{"role":"data"},"label":"1142926087 #8","type":"number"},{"p":{"role":"data"},"label":"1142926087 #9","type":"number"},{"p":{"role":"data"},"label":"1142926087 #10","type":"number"},{"p":{"role":"data"},"label":"1142926087 #11","type":"number"},{"p":{"role":"data"},"label":"1142926087 #12","type":"number"},{"p":{"role":"data"},"label":"1142926087 #13","type":"number"},{"p":{"role":"data"},"label":"1142926087 #14","type":"number"},{"p":{"role":"data"},"label":"1142926087 #15","type":"number"},{"p":{"role":"interval"},"label":"LSL","type":"number"},{"p":{"role":"interval"},"label":"USL","type":"number"}]},"GSM_1800_EDGE_EMAC_HP_H":{"rows":[{"c":[{"v":"EVM_RMS_MAXIMUM"},{"v":1.793361},{"v":1.563394},{"v":1.737285},{"v":1.662266},{"v":2.13238},{"v":1.74495},{"v":1.730418},{"v":1.723552},{"v":1.790512},{"v":1.846552},{"v":1.807153},{"v":1.859796},{"v":1.908171},{"v":1.846123},{"v":1.750672},{"v":5},{"v":0}]},{"c":[{"v":"ORIGIN_OFFSET"},{"v":-57.54144},{"v":-58.77484},{"v":-57.19012},{"v":-53.42612},{"v":-57.18826},{"v":-55.3111},{"v":-54.42715},{"v":-55.91037},{"v":-54.51541},{"v":-55.95123},{"v":-56.42453},{"v":-51.98267},{"v":-52.10809},{"v":-55.15536},{"v":-56.74002},{"v":-33},{"v":0}]},{"c":[{"v":"FREQERROR_AVG"},{"v":28.70212},{"v":55.40252},{"v":28.86355},{"v":49.36506},{"v":35.61129},{"v":40.09902},{"v":27.18469},{"v":38.42016},{"v":29.31555},{"v":40.80931},{"v":46.03962},{"v":35.54672},{"v":38.12959},{"v":23.66553},{"v":18.53208},{"v":0},{"v":0}]},{"c":[{"v":"AVGBURSTPOWER"},{"v":25.99338},{"v":26.19803},{"v":26.17307},{"v":26.15582},{"v":26.1507},{"v":26.12967},{"v":26.14883},{"v":26.13281},{"v":26.13333},{"v":26.12888},{"v":26.15344},{"v":26.14447},{"v":26.15091},{"v":26.11832},{"v":26.125},{"v":0},{"v":0}]}],"cols":[{"p":{"role":"domain"},"label":"MEASUREMENT","type":"string"},{"p":{"role":"data"},"label":"1142926087 #1","type":"number"},{"p":{"role":"data"},"label":"1142926087 #2","type":"number"},{"p":{"role":"data"},"label":"1142926087 #3","type":"number"},{"p":{"role":"data"},"label":"1142926087 #4","type":"number"},{"p":{"role":"data"},"label":"1142926087 #5","type":"number"},{"p":{"role":"data"},"label":"1142926087 #6","type":"number"},{"p":{"role":"data"},"label":"1142926087 #7","type":"number"},{"p":{"role":"data"},"label":"1142926087 #8","type":"number"},{"p":{"role":"data"},"label":"1142926087 #9","type":"number"},{"p":{"role":"data"},"label":"1142926087 #10","type":"number"},{"p":{"role":"data"},"label":"1142926087 #11","type":"number"},{"p":{"role":"data"},"label":"1142926087 #12","type":"number"},{"p":{"role":"data"},"label":"1142926087 #13","type":"number"},{"p":{"role":"data"},"label":"1142926087 #14","type":"number"},{"p":{"role":"data"},"label":"1142926087 #15","type":"number"},{"p":{"role":"interval"},"label":"LSL","type":"number"},{"p":{"role":"interval"},"label":"USL","type":"number"}]},"GSM_1800_EDGE_EMAC_HP_M":{"rows":[{"c":[{"v":"EVM_RMS_MAXIMUM"},{"v":1.561868},{"v":1.73105},{"v":1.797044},{"v":1.76599},{"v":2.084661},{"v":1.728261},{"v":1.623273},{"v":1.713252},{"v":1.721168},{"v":1.67675},{"v":1.816809},{"v":1.473725},{"v":2.130508},{"v":1.753807},{"v":1.635349},{"v":5},{"v":0}]},{"c":[{"v":"ORIGIN_OFFSET"},{"v":-55.58054},{"v":-54.61621},{"v":-59.66745},{"v":-54.58603},{"v":-56.94119},{"v":-57.44168},{"v":-55.79709},{"v":-56.0144},{"v":-53.07523},{"v":-58.99078},{"v":-54.67191},{"v":-58.43228},{"v":-54.7934},{"v":-53.57614},{"v":-56.65137},{"v":-33},{"v":0}]},{"c":[{"v":"FREQERROR_AVG"},{"v":32.35042},{"v":61.47226},{"v":33.02842},{"v":54.65994},{"v":41.48732},{"v":45.49076},{"v":31.31727},{"v":46.07191},{"v":34.09386},{"v":45.36162},{"v":54.17566},{"v":40.87389},{"v":44.0379},{"v":32.18899},{"v":28.21783},{"v":0},{"v":0}]},{"c":[{"v":"AVGBURSTPOWER"},{"v":26.08215},{"v":26.27185},{"v":26.24777},{"v":26.23657},{"v":26.23239},{"v":26.21872},{"v":26.23657},{"v":26.21646},{"v":26.21149},{"v":26.21417},{"v":26.23041},{"v":26.21982},{"v":26.23303},{"v":26.20111},{"v":26.2052},{"v":0},{"v":0}]}],"cols":[{"p":{"role":"domain"},"label":"MEASUREMENT","type":"string"},{"p":{"role":"data"},"label":"1142926087 #1","type":"number"},{"p":{"role":"data"},"label":"1142926087 #2","type":"number"},{"p":{"role":"data"},"label":"1142926087 #3","type":"number"},{"p":{"role":"data"},"label":"1142926087 #4","type":"number"},{"p":{"role":"data"},"label":"1142926087 #5","type":"number"},{"p":{"role":"data"},"label":"1142926087 #6","type":"number"},{"p":{"role":"data"},"label":"1142926087 #7","type":"number"},{"p":{"role":"data"},"label":"1142926087 #8","type":"number"},{"p":{"role":"data"},"label":"1142926087 #9","type":"number"},{"p":{"role":"data"},"label":"1142926087 #10","type":"number"},{"p":{"role":"data"},"label":"1142926087 #11","type":"number"},{"p":{"role":"data"},"label":"1142926087 #12","type":"number"},{"p":{"role":"data"},"label":"1142926087 #13","type":"number"},{"p":{"role":"data"},"label":"1142926087 #14","type":"number"},{"p":{"role":"data"},"label":"1142926087 #15","type":"number"},{"p":{"role":"interval"},"label":"LSL","type":"number"},{"p":{"role":"interval"},"label":"USL","type":"number"}]}};
function drawCharts() {
for (var csv in data) {
var x = new google.visualization.DataTable(data[csv]);
var options = {
title: csv,
width: 800,
height: 600,
chartArea: {width:"60%"}
};
var chart = new google.visualization.LineChart(document.getElementById(csv));
google.visualization.events.addListener(chart, 'select', function () {
alert(csv); // XXX prints wrong title
});
chart.draw(x, options);
}
}
$(function() {
google.setOnLoadCallback(drawCharts);
});
</script>
</style>
</head>
<body>
<div id="GSM_1800_EDGE_EMAC_HP_H"></div>
<div id="GSM_1800_EDGE_EMAC_HP_L"></div>
<div id="GSM_1800_EDGE_EMAC_HP_M"></div>
</body>
</html>
UPDATE: This is what I tried too, but with same wrong result:
google.visualization.events.addListener(chart, 'select', function () {
var tmp = 'XXX ' + csv;
var blah = function() {alert(tmp);}
blah();
});
UPDATE 2: Also I've tried this:
google.visualization.events.addListener(chart, 'select', function() {
(function(c) {
alert(c);
})(csv);
});
