Morris chart with dynamic data

问题

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

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

回答2:

I think your problem lies here:

xkey: 'data',

Should be

xkey: 'cityname'

and the Y key(s):

ykeys:['total'],

回答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,
        });

    }

来源：https://stackoverflow.com/questions/23115265/morris-chart-with-dynamic-data