title: Morris chart with JSON data
body: <p>I have this code for outputting a db query (sql server) to a .json file on my local directory.</p>
  
  <pre><code>    $connectionInfo = array("");
      $conn = sqlsrv_connect( $serverName, $connectionInfo);
      if( $conn )
          {
        }else
          { echo "Connection could not be established.\n";
                  die( print_r( sqlsrv_errors(), true));
        }
  
     $sql="";
     $query = sqlsrv_query( $conn, $sql, array(), array( "Scrollable" =&gt; SQLSRV_CURSOR_KEYSET ));
  
      if( $query === false ) {
          echo "Error in executing query.&lt;/br&gt;";
              die( print_r( sqlsrv_errors(), true));
      }
  
      $json = array();
  
      do {
          while ($row = sqlsrv_fetch_array($query, SQLSRV_FETCH_ASSOC)) {
              $json[] = $row;
          }
      } while ( sqlsrv_next_result($query) );
  
          file_put_contents('data.json', json_encode($json));
  </code></pre>
  
  <p>This part works fine and it's outputting json data in this format.</p>
  
  <pre><code>[{"month":1,"a":43,"b":10},{"month":2,"a":43,"b":87},{"month":3,"a":52,"b":11},{"month":4,"a":66,"b":25},{"month":5,"a":30,"b":11},{"month":6,"a":29,"b":10},{"month":7,"a":32,"b":41},{"month":8,"a":27,"b":36},{"month":9,"a":36,"b":32},{"month":10,"a":57,"b":57},{"month":11,"a":32,"b":20},{"month":12,"a":53,"b":65}]
  </code></pre>
  
  <p>On the other page i'm initializing this Morris-area-chart with the JSON data, like this:</p>
  
  <p><strong>First i'm reading the JSON file and loop through the array.</strong></p>
  
  <pre><code>$final = json_decode(file_get_contents('data.json'));
      $new_final = array();
  
      foreach($final as $value) {
          foreach($value as $sub_value) {
              $new_final[] = $sub_value;
          }
      }
  
          echo json_encode($new_final);
          exit;
      }
  </code></pre>
  
  <p><strong>Second im initializing the morris chart using Ajax on the same page using (document.url):</strong></p>
  
  <pre><code>$(document).ready(function(){
  
      $.ajax({
          url: document.URL,
          dataType: 'JSON',
          type: 'POST',
          data: {get_values: true},
          success: function(response) {
  
           Morris.Area({
                  element: 'area-chart',
                  data: response,
                  xkey: 'month',
                  ykeys: ['a','b'],
                  labels: ['Month', 'Total']
              });
          }
      });
  
  });
  </code></pre>
  
  <p><strong>It's not outputting the chart. I did found out that when you manipulate the .JSON file and add extra '[ ]', it is working correctly and outputting like expected, like this:</strong></p>
  
  <pre><code>[[{"month":1,"a":43,"b":10},{"month":2,"a":43,"b":87},{"month":3,"a":52,"b":11},{"month":4,"a":66,"b":25},{"month":5,"a":30,"b":11},{"month":6,"a":29,"b":10},{"month":7,"a":32,"b":41},{"month":8,"a":27,"b":36},{"month":9,"a":36,"b":32},{"month":10,"a":57,"b":57},{"month":11,"a":32,"b":20},{"month":12,"a":53,"b":65}]]
  </code></pre>
  
  <p>Could somebody tell me what i'm overseeing here? It looks like i need an second array but i'm not sure.. Thanks in advance.</p>