change -> input caniuse.com/#feat=input-eventfunctio -> function
window.onload = function() {
// init chart
initChart();
};
// VK app
VK.init({
apiId: 5225204
});
function getMembers(gid, callback) {
VK.Api.call('groups.getById', {group_id: gid, fields: 'members_count'}, function(data){
if(data.response) {
console.log('success');
console.log(data.response[0].members_count);
callback(data.response[0].members_count);
} else {
console.log('error');
}
});
}
// get groups members
getMembers('group1', function(gr1) {
getMembers('group2', function(gr2) {
getMembers('group3', function(gr3) {
getMembers('group4', function(gr4) {
// draw chart
var chartData = [gr1, gr2, gr3, gr4];
});
});
});
});// var chartData = [343, 123, 432, 963]; // test chart
var canvas, ctx;
function initChart() {
canvas = document.getElementById('chart');
ctx = canvas.getContext('2d');
drawChart(80, 370);
}
function drawChart(x, y) {
ctx.fillStyle='orangered';
for (var i = 0; i < chartData.length; i++) {
ctx.fillRect(x + i * 100, y, 60, chartData[i] / -10);
}
}getMembers, начинается запрос к VK и возвращается undefined. После этого запрос выполняется, и вызывается ваша функция. Ее return уходит в никуда. Для этого вы должны переписать функцию, чтобы ей в параметре давался callback - функция, которая вызывается после выполнения. В моем коде вызывается getMembers(1) и сохраняется в gr1, потом getMembers(2) и т. д. Затем вызывается chartData = [gr1, gr2, gr3, gr4]. После этого пишете свой код.
canvas.onclick = function(e) {
var ev = e || event; // берем событие
var x = ev.clientX - canvas.getBoundingClientRect().left; // Можно это и не считать в Firefox, там есть ev.layerX и ev.layerY
var y = ev.clientY - canvas.getBoundingClientRect().top;
if(x > 100 && x < 200 &&
y > 100 && y < 200) {
// Выполнить действие для кнопки с X = 100, Y = 100, width = 100, height = 100
}
}