Morris chart with dynamic data - morris.js

Question

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

Answer 1

You have to use json object inside the Morris.Area
use
var result = JSON.parse(json);
Morris.Area({
element: 'graph-area',
padding: 10,
behaveLikeLine: true,
gridEnabled: false,
gridLineColor: '#dddddd',
axes: true,
fillOpacity:.7,
data:result ,
lineColors:['#ED5D5D','#D6D23A','#32D2C9'],
xkey: 'data',
ykeys:['cityname','total'],
labels: ['city','total'],
pointSize: 0,
lineWidth: 0,
hideHover: 'auto'
});

Answer 2

I think your problem lies here:
xkey: 'data',
Should be
xkey: 'cityname'
and the Y key(s):
ykeys:['total'],

Answer 3

This is how I did it. Using Java , Spring and Morris charts
This is the controler sudocode :
#RequestMapping(value = "/shellMarketingControls/getDatForChart", method = RequestMethod.POST)
public #ResponseBody List<MorrisSingleLine> getDatForChart(#RequestBody String get_value_type, Principal principal)
throws Exception {
List<MorrisSingleLine> temp = new ArrayList<MorrisSingleLine>();
.......
return temp;
Here is the Object :
#JsonAutoDetect
#EnableWebMvc
public class MorrisSingleLine implements Serializable {
/**
*
*/
private static final long serialVersionUID = 4992047206653043217L;
private Number xaxis;
private Number yaxis;
#JsonView(Views.Public.class)
public Number getXaxis() {
return xaxis;
}
public void setXaxis(Number xaxis) {
this.xaxis = xaxis;
}
#JsonView(Views.Public.class)
public Number getYaxis() {
return yaxis;
}
public void setYaxis(Number yaxis) {
this.yaxis = yaxis;
}
}
}
And Finally the JavaScript
function getDatForChart(get_value_type) {
$
.ajax({
contentType : "application/json",
url : "${pageContext.request.contextPath}/pathToYourController/yourControllermethod",
dataType : 'JSON',
type : 'POST',
data : JSON.stringify(get_value_type),
//timeout : 10000,
success : function(response){
var result = {
feed: {
entries: []
}
};
var count=0;
for(count; count<(response.length);count++){
var tl="";
var tv=0;
tl=response[count].xaxis;
tv=response[count].yaxis;
result.feed.entries.push({
year: tl,
value: tv
});
}
console.log(result);
drawMorrisCharts(result);
},
error : function() {
alert('Error');
}
});
};
function drawMorrisCharts(response) {
$('#morris-one-line-chart').empty();
Morris.Line({
element : 'morris-one-line-chart',
data : response.feed.entries,
xkey : 'year',
ykeys : [ 'value' ],
resize : true,
lineWidth : 4,
labels : [ 'Value' ],
lineColors : [ '#85CE36'],
pointSize : 5,
});
}