title: jquery how to dynamically create an array
body: <p>i want to use this script: <a href="http://codepen.io/githiro/pen/xABCi" rel="nofollow">http://codepen.io/githiro/pen/xABCi</a></p>
  
  <p>You can set each piece like this:</p>
  
  <pre><code>  $("#pieChart").drawPieChart([
      { title: "Tokyo",         value : 180,  color: "#02B3E7" },
      { title: "San Francisco", value:  60,   color: "#CFD3D6" },
      { title: "London",        value : 50,   color: "#736D79" },
      { title: "New York",      value:  30,   color: "#776068" },
      { title: "Sydney",        value : 20,   color: "#EB0D42" },
      { title: "Berlin",        value : 20,   color: "#FFEC62" },
      { title: "Osaka",         value : 7,    color: "#04374E" }
    ]);
  </code></pre>
  
  <p>I want to set the settings/pieces dynamically.
  This is what i tried:</p>
  
  <pre><code>$('.pieChart').each(function(index) {
  
      var queryArr = [];
      $('.pieChartPieces').each(function(index) {
  
          var _pieceTitle = $(this).data('title');
          var _pieceValue = $(this).data('value');
          var _pieceColor = $(this).data('color');
  
          var pieces = {                              
             "title" :_pieceTitle,
             "value" :_pieceValue,
             "color" :_pieceColor
          };
          queryStr = { "pieces" : pieces };
          queryArr.push(queryStr);
  
      });
  
      $(this).drawPieChart(queryArr);
  
  });
  
      &lt;div class="pieChart chart"&gt;
          &lt;div class="pieChartPieces" data-title="TestEins" data-value="180" data-color="#02B3E7"&gt;&lt;/div&gt;
          &lt;div class="pieChartPieces" data-title="TestZwei" data-value="60" data-color="#CFD3D6"&gt;&lt;/div&gt;
          &lt;div class="pieChartPieces" data-title="TestDrei" data-value="50" data-color="#736D79"&gt;&lt;/div&gt;
          &lt;div class="pieChartPieces" data-title="TestVier" data-value="30" data-color="#776068"&gt;&lt;/div&gt;
          &lt;div class="pieChartPieces" data-title="TestFuenf" data-value="20" data-color="#EB0D42"&gt;&lt;/div&gt;
          &lt;div class="pieChartPieces" data-title="TestSechs" data-value="20" data-color="#FFEC62"&gt;&lt;/div&gt;
          &lt;div class="pieChartPieces" data-title="TestSieben" data-value="7" data-color="#04374E"&gt;&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>But its not working. I guess its because i create an object but the function drawPieChart actually want anything else?</p>