Pivot data dynamically for google line chart
<p>I want to display "population" of various countries through the years in the same line chart. The data displayed is based on selections from a multi-select dropdown "Countries". Underlying Data Table has 3 columns:</p>

<p>Year, Country, Population<br>
2012,countryA,33<br>
2013,countryA,35<br>
2014,countryA,40<br>
2012,countryB,65<br>
2013,countryB,70<br>
2014,countryB,75<br>
2012,countryC,15<br>
2013,countryC,20<br>
2014,countryC,25  </p>

<p>I am trying to create a pivoted Data View from the underlying Data Table
The code I am using is:</p>

<pre><code>  function drawLineChart() {

      var arr = $('#country').val();

      var lineChartJson = $.ajax({
      url: "../json/lineChart.json",
      dataType: "json",
      async: false
      }).responseText;

    var lineChartData = new google.visualization.DataTable(lineChartJson);
    var view = new google.visualization.DataView(lineChartData);

    var viewCols = [0];

    for(var i = 0; i &lt; arr.length; i++) {

           var viewCols1 = [{
                type: 'number',
                label: arr[i],
                calc: function (dt, row) {
                    return (dt.getValue(row, 1) == arr[i]) ? dt.getValue(row, 2) : null;
                        }
                    }];

                    viewCols = viewCols.concat(viewCols1);

            }

 view.setColumns(viewCols);

var aggCols = [{
                    column: 1,
                    type: 'number',
                    label: view.getColumnLabel(1),
                    aggregation: google.visualization.data.sum
                }];

    for(var i = 2; i &lt; 4; i++) {

            var aggCols1 = [{
                    column: i,
                    type: 'number',
                    label: view.getColumnLabel(i),
                    aggregation: google.visualization.data.sum
                }];

            aggCols = aggCols.concat(aggCols1);
        }

    var pivotedData = google.visualization.data.group(view, [0], aggCols);
</code></pre>

<p>But this does not seem to work as expected and I just get 1 Line in the chart with values for all countries added up (although I can see the legend for 3 countries)</p>

<p>On the other hand if I set my View columns as below, it works as expected. </p>

<pre><code>    view.setColumns([0, {
    type: 'number',
    label: arr[0],
    calc: function (dt, row) {
        return (dt.getValue(row, 1) == arr[0]) ? dt.getValue(row, 2) : null;
    }
}, {
    type: 'number',
    label: arr[1],
    calc: function (dt, row) {
        // return values of C only for the rows where B = "bar"
        return (dt.getValue(row, 1) == arr[1]) ? dt.getValue(row, 2) : null;
    }
}, {
    type: 'number',
    label: arr[2],
    calc: function (dt, row) {
        return (dt.getValue(row, 1) == arr[2]) ? dt.getValue(row, 2) : null;
    }
}]);
</code></pre>

<p>What is going wrong in the loop? Is something wrong with "concat" in the loop where I am creating View Columns? I also saw the viewCols array by using console.log and it seems to have the right elements</p>

<p>I was trying to follow the below post:
<a href="https://stackoverflow.com/questions/13610893/creating-pivoted-dataview-from-existing-google-charts-datatable-object">Creating pivoted DataView from existing google charts DataTable object</a></p>