Morris chart with dynamic data

[marse.haka91]

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 http://jsfiddle.net/marsi/LaJXP/1/

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'
});


<div id="graph-area"></div>

The result from json file (sales.php) looks like :

[{"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"}]

Any ideas?Thanks in advance.

[vsmash]

See http://jsfiddle.net/58aQe/1/

Data example should be as follows, but to have effective results, the y keys need to share time intervals so that each city reports a number at the same point in time.

[{period:"2014-02-05",Modena:810, Bologna:0, Rimini:0},
                  {period:"2014-02-09",Modena:0, Bologna: 396, Rimini:0},
                 {period:"2014-02-10",Modena:0, Bologna:0, Rimini: 380},
                 {period:"2014-02-10",Modena:0, Bologna: 736, Rimini:0},
                 {period:"2014-02-12",Modena:0, Bologna: 0.00, Rimini:0},                 
                  {period:"2014-02-13",Modena: 0, Bologna:0, Rimini:0}]

[marse.haka91]

Yes,I understand but my json file get data in this format.

$query = "SELECT cityname, totalamount, createdtime
FROM vtiger_city
INNER JOIN vtiger_contract ON vtiger_city.cityid = vtiger_contract.centro
INNER JOIN vtiger_crmentity ON vtiger_crmentity.crmid = vtiger_contract.contractid
WHERE vtiger_crmentity.deleted =0 group by createdtime order by createdtime" ;
    $result = mysql_query($query) or die("SQL Error 1: " . mysql_error());
    // get data and store in a json array
         $verb = $_SERVER["REQUEST_METHOD"];

    // handle a GET 
    if ($verb == "GET") {
    while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
        $city[] = array(
            'cityname' => $row['cityname'],

                         'total' =>$row['totalamount'],

                        'data' =>$row['createdtime'],
          );
             }  

 header("Content-type: application/json");
    echo json_encode($city);
    }
?>     

How can i call them differently?