Morris Chart Broken From External JSON

Question

i have some problem using Morris Chart.

I want to show the details of transaction using Morris Chart using JSON from external source. Here's my code:

$(document).ready(function() {

//getting JSON data from external sources
var json_data = (function() {
    var json;
    $.ajax({
         type:'GET',
         url: 'http://localhost:8080/masterpiece/chartGetTransaction',
         async: false,
         global: false,
        success: function(data) {
            json = data;
        }, 
        error:function(){
            alert("Error loading chart");
        }
    });
    return json;
})();

 //testing purposes to see whether json is shown up or not.
 alert(json_data);

 new Morris.Bar({
    // ID of the element in which to draw the chart.
    element: 'pesanan-chart-area',
    data: json_data,
    xkey: 'tahun',
    ykeys: ['jml'],
    labels: ['Jumlah'],
    smooth: false
 });
});

But it always broken.

The JSON itself:

   [{"tahun":"2013-10-12","jml":3},{"tahun":"2013-11-16","jml":2},{"tahun":"2013-12-23","jml":4},]

when i place the JSON manually to 'data:' attribute, the chart is shown up. But when it referenced from external source (json_data var) it is broken

any ideas?

thanks.

UPDATE

update! the JSON is generated from JAVA function using third party library called json-simple (https://code.google.com/p/json-simple/downloads/list)

protected List<JSONObject> statisticPesanan(){
    List<JSONObject> det = new ArrayList<JSONObject>();
    try {
        //create JSONObject to executed
        String sql = "SELECT * FROM vstatisticpesanan";
        cs = datman.logOn().prepareCall(sql);
        ResultSet result = cs.executeQuery();
        while (result.next()) {
            JSONObject details = new JSONObject();
            details.put("tahun", result.getString(1));
            details.put("jml", result.getInt(2));
            det.add(details);
        }
    } catch (SQLException se) {
        Logger.getLogger(Analytics.class.getName()).log(Level.SEVERE, null, se);
        java.lang.System.out.println("Error on Analytics Generate JSON Pesanan Statistics : " + se.toString());
    } finally {
        datman.logOff(); 
    }    
    return det;
}

then called via servlet:

protected void processRequest(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {
    response.setContentType("text/html;charset=UTF-8");
    PrintWriter out = response.getWriter();
    try {
        /* Execution of jSON Chart */
        Analytics show = new Analytics();
        List<JSONObject> json =  show.getStatisticPesanan();
        out.print('[');
        for(JSONObject js : json){
              out.print(js.toJSONString()+",");
        }
        out.print(']');
    } finally {
        out.close();
    }
}

is there any solution? thanks.

Answer 1

alrite after searching and creating new function, i have realize that morris.js cannot parse the JSON object.

first change the servlet into:

protected void processRequest(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
 response.setContentType("text/html;charset=UTF-8");
 PrintWriter out = response.getWriter();
 try {
    /* Execution of jSON Chart */
    Analytics show = new Analytics();
    List<JSONObject> json =  show.getStatisticPesanan();       
          out.print(js.toJSONString());
 } finally {
    out.close();
 }
}

then it will shows the right JSON object like this:

[{"1":"2013-10-12","2":3},{"1":"2013-11-16","2":2},{"1":"2013-12-23","2":4},{"1":"2014-02-11","2":10}]

then parse the JSON object into

 new Morris.Bar({
   // ID of the element in which to draw the chart.
   element: 'pesanan-chart-area',
   data: $.parseJSON(json_data),
   xkey: 'tahun',
   ykeys: ['jml'],
   labels: ['Jumlah'],
   smooth: false
});

we NEED to use function $.parseJSON to make the graph shows correctly, otherwise the graph will show undefined.

i hope this will help someone.