title: Transform JSON into correct format to put in Morris Bar Chart plugin
body: <p>I'm using the Morris Bar Chart plugin. <a href="http://jsbin.com/uzosiq/258/embed?javascript,live" rel="nofollow">You can see an example here</a>.</p>
  
  <p>The correct data format to insert into the chart is the following:</p>
  
  <pre><code>data: [
      { y: '2006', a: 100, b: 90 },
      { y: '2007', a: 75,  b: 65 },
      { y: '2008', a: 50,  b: 40 },
      { y: '2009', a: 75,  b: 65 },
      { y: '2010', a: 50,  b: 40 },
      { y: '2011', a: 75,  b: 65 },
      { y: '2012', a: 100, b: 90 }
    ],
  </code></pre>
  
  <p>I want to fill that info but with ajax request to PHP. </p>
  
  <pre><code>$.ajax({
      url: 'getchart.php',
      success: function(content){
  
          console.log(content); // Native return
  
          var element = [];   
          var json    = JSON.parse(content);
  
          for(var i = 0; i &lt;= json.length - 1; i++){
              element[i] = {y: json[i][0].month, a: json[i][0].total};
          }
  
          console.log(element);
      }
  });
  </code></pre>
  
  <p>I've accomplish the request successfully but I do need to convert the json I get from ajax to the format that morris chart needs.</p>
  
  <pre><code>[[{"total":1,"Month":7,"description":"Started"},
  {"total":1,"Month":6,"description":"Started"}],
  [{"total":3,"Month":6,"description":"Started"}]] 
  </code></pre>
  
  <p>The code above is what the variable <code>content</code> output. The problem here is that one index contains 2 sub-indexes and the other index contains only one sub-index:</p>
  
  <p><strong>Index 1:</strong> </p>
  
  <pre><code>[{"total":1,"Month":7,"description":"Started"},
   {"total":1,"Month":6,"description":"Started"}],
  </code></pre>
  
  <p>And the second index only contains one sub-index</p>
  
  <p><strong>Index 2:</strong></p>
  
  <pre><code>[{"total":3,"Month":6,"description":"Started"}]],
  </code></pre>
  
  <p>This happens because I'm pushing two different arrays into one in PHP.</p>
  
  <pre><code>$AN = $chart-&gt;chartAN(); // Apresentation and Negociation
  $AC = $chart-&gt;chartAC(); // Accomplished
  
  $final = array($AN, $AC);
  
  echo json_encode($final);
  </code></pre>
  
  <p>And, btw, the output from both of functions is the same:</p>
  
  <pre><code>while($query-&gt;fetch()){     
    $rows[] = array("total" =&gt; $total, "month" =&gt; $month, "description" =&gt; $type);
  }
  </code></pre>
  
  <p>Currently, the <code>console.log(element)</code> returns me:</p>
  
  <pre><code>[Object, Object];
      &gt; 0: Object
          a: 1
          y: 7
  
      &gt; 1: Object
          a: 3
          y: 6
  </code></pre>
  
  <p>My final result I would like it to be something like:</p>
  
  <pre><code>element: [
            { y: 'April', a: value_from_chartAN, b: value_from_chartAC },
            { y: 'May',   a: value_from_chartAN, b: value_from_chartAC },
           ],
  </code></pre>
  
  <p><strong>EDIT</strong>: To clarify the question (because I know isn't that simple).</p>
  
  <p>I would like my output to be:</p>
  
  <pre><code>element: [
                { y: month_from_database, a: value_from_chartAN, b: value_from_chartAC },
                { y: month_from_database, a: value_from_chartAN, b: value_from_chartAC },
               ],
  </code></pre>
  
  <p>Since <code>value_from_chartAN</code> or <code>value_from_chartAC</code> might be null, it must add the number 0.
  If you look at the example of Morris: <a href="http://jsbin.com/uzosiq/258/embed?javascript,live" rel="nofollow">http://jsbin.com/uzosiq/258/embed?javascript,live</a></p>
  
  <p>The year correspond to my Month, the blue bar to the <code>value_from_chartAN</code> and the gray bar to <code>value_from_chartAC</code>.</p>