Morris chart with dynamic data

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

Your data is in the wrong format, you need to "reshape" or "pivot" it. You should have a column for each cityname with each respective value. — marbel, Jun 29 '14 at 01:07

score 3 · Answer 1 · answered Sep 08 '15 at 05:53

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

score 0 · Answer 2 · answered Jun 17 '14 at 18:05

0

I think your problem lies here:

xkey: 'data',

Should be

xkey: 'cityname'

and the Y key(s):

ykeys:['total'],

answered Jun 17 '14 at 18:05

slaughterize

714
1
7
11

score 0 · Answer 3 · answered Jan 21 '17 at 01:05

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

    }

Morris chart with dynamic data

3 Answers3

Linked