This is a followup to a question I've already asked on StackOverflow. So please make sure you read that one to get the whole picture:
Multiple Instances of Google Visualizations Chart Inside Separate Divs
So in an attempt to make this whole thing dynamic, I wrote the following code:
var containers = document.getElementsByClassName('gaugeWrapper');
console.log(containers);
google.load('visualization', '1', { packages: ['gauge'] });
for(var i = 0; i < containers.length; i++) {
var id = containers[i].getAttribute('id');
var name = containers[i].getAttribute('data-name');
var value = containers[i].getAttribute('data-value');
google.setOnLoadCallback(function () { drawChart(id, name, value) });
}
function drawChart(id, name, value) {
console.log(id);
console.log(name);
console.log(value);
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
[name, value]
]);
var options = {
width: 400, height: 120,
redFrom: 90, redTo: 100,
yellowFrom: 75, yellowTo: 90,
minorTicks: 5
};
var chart = new google.visualization.Gauge(document.getElementById(id));
chart.draw(data, options);
}
This does not work. The problem is that the console outputs the data of the last div only. Which means that the function is being called 5 (containers.length
) times with the same set of parameters.
UPDATE:
As per Ateszki's answer, here's my updated code:
google.load('visualization', '1', { packages: ['gauge'] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var containers = document.getElementsByClassName('gaugeWrapper');
for (var i = 0; i < containers.length; i++) {
var id = containers[i].getAttribute('id');
var name = containers[i].getAttribute('data-name');
var value = containers[i].getAttribute('data-value');
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
[name, value]
]);
var options = {
width: 400, height: 120,
redFrom: 90, redTo: 100,
yellowFrom: 75, yellowTo: 90,
minorTicks: 5
};
var cont = document.getElementById(id);
console.log(cont);
var chart = new google.visualization.Gauge(cont);
chart.draw(data, options);
}
}
Unfortunately, I still couldn't get it to work, yet. Now nothing renders on the screen, although my console.log's seem to output the right things...
Any explanations/suggestions?
Ok the following has solved the problem:
google.load('visualization', '1', { packages: ['gauge'] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var containers = $('.gaugeWrapper');
containers.each(function (index, elem) {
var id = $(elem).attr('id');
var name = $(elem).data('name');
var value = $(elem).data('value');
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
[name, value]
]);
var options = {
width: 400, height: 120,
redFrom: 90, redTo: 100,
yellowFrom: 75, yellowTo: 90,
minorTicks: 5
};
var cont = document.getElementById(id);
var chart = new google.visualization.Gauge(cont);
chart.draw(data, options);
});
I do not know how it differs from the code in the updated section of the question except for the fact that I am now using jQuery to grab the values I'm looking for...