title: Morris chart with dynamic data
body: <p>I used Morris chart in my application project to show some details about quantity of sales.
  After executing the AJAX request, the chart is showing data in disordered way.It doesn't display sales for each city.I want to display them like this example with static data <a href="http://jsfiddle.net/marsi/LaJXP/1/" rel="nofollow">http://jsfiddle.net/marsi/LaJXP/1/</a></p>
  
  <pre><code>var json = (function () {
          var json = null;
          $.ajax({
              'async': false,
              'global': false,
              'url': 'sales.php',
              'dataType': "json",
              'success': function (data) {
                  json = data;
              }
          });
  
          return json;
      })
      ();
  
  
      Morris.Area({
      element: 'graph-area',
      padding: 10,
      behaveLikeLine: true,
      gridEnabled: false,
      gridLineColor: '#dddddd',
      axes: true,
      fillOpacity:.7,
      data:json,
      lineColors:['#ED5D5D','#D6D23A','#32D2C9'],
      xkey: 'data',
      ykeys:['cityname','total'],
      labels: ['city','total'],
  
      pointSize: 0,
      lineWidth: 0,
      hideHover: 'auto'
  });
  
  
  &lt;div id="graph-area"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The result from json file (sales.php) looks like :</p>
  
  <pre><code>[{"cityname":"Modena","total":"810.82","data":"2014-02-05 16:55:52"},
   {"cityname":"Bologna","total":"396.22","data":"2014-02-09 23:58:20"},
   {"cityname":"Rimini","total":"380.00","data":"2014-02-10 10:36:12"},
   {"cityname":"Bologna","total":"736.30","data":"2014-02-10 23:30:58"},
   {"cityname":"Bologna","total":"0.00","data":"2014-02-12 23:41:52"},
   {"cityname":"Modena","total":"0.00","data":"2014-02-13 15:21:17"}]
  </code></pre>