My database contains multiple tables, and I am looking to utilize Google Charts to display this data. I want the chart to have smooth animations, so I came across a helpful code snippet that I found online and am currently tweaking it to fit my needs.
Since each table in my database has a different number of columns, I am uncertain about how many bars the chart should include until an ajax query is executed (up to a maximum of 5).
I plan to retrieve the data through an ajax request, return it as an array, then calculate the number of columns based on the items in the array. For demonstration purposes, here is a sample dataset:
var Columns = ['Tracker', '1', '2', '3'];
var Information = ['A', 475, 450, 190];
However, when attempting to use the identifier to fetch the column label, the chart malfunctions.
Below, you can find the code snippet along with a link to a related jsfiddle where the issue can be observed. Any insights on what might be causing this problem would be greatly appreciated.
Moreover, if anyone can suggest a more efficient approach without repeating code or using unnecessary if clauses – as I seem unable to come up with one myself for some reason – please feel free to share your thoughts.
Code Section:
function drawVisualization() {
// Setting up the data table.
var Columns = ['Tracker', '1', '2', '3'];
var Information = ['A', 475, 450, 190];
//var Columns1 = Columns[1]; // Uncomment this line and comment out the following line to see the error
var Columns1 = 1;
var NumColumns = Columns.length - 1;
//alert(Columns1); // To check the value of Columns1
for (index = 1; index < Columns.length; ++index) {
var ColumnName = Columns[index];
var CorrespondingData = Information[index];
}
var data = google.visualization.arrayToDataTable([
Columns,
Information
]);
// Using a DataView to initialize all values in the dataset for the initial draw
var view = new google.visualization.DataView(data);
if (NumColumns == 1) {
view.setColumns([0, {
type: 'number',
label: data.getColumnLabel(Columns[1]),
calc: function () {return 0;}
}]);
}else if (NumColumns == 2) {
view.setColumns([0, {
type: 'number',
label: data.getColumnLabel(Columns[1]),
calc: function () {return 0;}
}, {
type: 'number',
label: data.getColumnLabel(Columns[2]),
calc: function () {return 0;}
}]);
}else if (NumColumns == 3){
view.setColumns([0, {
type: 'number',
label: data.getColumnLabel(Columns1), // Issue arises if Columns1 is set to Columns[1]
calc: function () {return 0;}
}, {
type: 'number',
label: data.getColumnLabel(2),
calc: function () {return 0;}
}, {
type: 'number',
label: data.getColumnLabel(3),
calc: function () {return 0;}
}]);
}
// Creating and displaying the visualization.
var chart = new google.visualization.ColumnChart(document.getElementById('visualization'));
var options = {
title:"Sub-Region vs Region vs Budget",
legend: 'bottom',
hAxis: {
title: ""
},
animation: {
duration: 1000
},
vAxis: {
minValue: 0,
maxValue: 600
}
};
var runOnce = google.visualization.events.addListener(chart, 'ready', function () {
google.visualization.events.removeListener(runOnce);
chart.draw(data, options);
});
chart.draw(view, options);
$(window).resize(function() {
chart.draw(data, options);
});
}
google.load('visualization', '1', {packages: ['corechart'], callback: drawVisualization});