title: Using array index/variables in Animated Google Barchart Labels
body: <p>I have a series of tables in my database, and want to use google charts to show this data. I'd also like it to animate nicely, and I found a good code snippet from  somewhere that helps out with this, and I'm modifying it.</p>
  
  <p>As the tables in my database are different I don't know how many columns each table will have, and therefore don't know how many bars the chart should have, until the query is made via ajax (up to a maximum of 5).</p>
  
  <p>I'm going to get the data via ajax request and return an array, I'll then count the number of items in the array to get the number of columns. At the moment I'm simulating this bit, but the data will look like this:</p>
  
  <pre><code>var Columns = ['Tracker', '1', '2', '3'];
  var Information = ['A', 475, 450, 190];
  </code></pre>
  
  <p>However, when I try to use the identifier to get the column label the chart breaks. </p>
  
  <p>I've included the code below and also a link to a jsfiddle that will show you the problem. What is going wrong?</p>
  
  <p>Also, if any of you can think of a better way to achieve this without the repeated code and rubbish if clause - for some reason can't find a better way to this myself. </p>
  
  <p><a href="https://jsfiddle.net/ep5dkksk/1/" rel="nofollow">Jsfiddle here</a></p>
  
  <p>Code:</p>
  
  <pre><code>function drawVisualization() {
  // Create and populate the data table.
  var Columns = ['Tracker', '1', '2', '3'];
  var Information = ['A', 475, 450, 190];
  //var Columns1 = Columns[1]; //uncomment this and comment out the line below to see the problem
  var Columns1 = 1;
  var NumColumns = Columns.length -1;
  //alert(Columns1); // to see what Columns1 is
  for (index = 1; index &lt; Columns.length; ++index) {
  var ColumnName = Columns[index];
  var CorrespondingData = Information[index];
  
  }
  
  var data = google.visualization.arrayToDataTable([
      Columns,
      Information
  ]);
  
  // use a DataView to 0-out all the values in the data set 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), //this does not work if the variable 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;}
  }]);
  }
  // Create and draw 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: {
          // set these values to make the initial animation smoother
          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);
  
  // you can handle the resizing here - no need to recreate your data and charts from scratch
  $(window).resize(function() {
      chart.draw(data, options);
  });
  }
  google.load('visualization', '1', {packages: ['corechart'], callback: drawVisualization});
  </code></pre>