title: Morris Chart Broken From External JSON
body: <p>i have some problem using Morris Chart.</p>
  
  <p>I want to show the details of transaction using Morris Chart using JSON from external source. Here's my code:</p>
  
  <pre><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
   });
  });
  </code></pre>
  
  <p>But it always broken.</p>
  
  <p>The JSON itself: </p>
  
  <pre><code>   [{"tahun":"2013-10-12","jml":3},{"tahun":"2013-11-16","jml":2},{"tahun":"2013-12-23","jml":4},]
  </code></pre>
  
  <p>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</p>
  
  <p>any ideas?</p>
  
  <p>thanks. </p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>update! the JSON is generated from JAVA function using third party library called json-simple (<a href="https://code.google.com/p/json-simple/downloads/list" rel="nofollow">https://code.google.com/p/json-simple/downloads/list</a>)</p>
  
  <pre><code>protected List&lt;JSONObject&gt; statisticPesanan(){
      List&lt;JSONObject&gt; det = new ArrayList&lt;JSONObject&gt;();
      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;
  }
  </code></pre>
  
  <p>then called via servlet:</p>
  
  <pre><code>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&lt;JSONObject&gt; json =  show.getStatisticPesanan();
          out.print('[');
          for(JSONObject js : json){
                out.print(js.toJSONString()+",");
          }
          out.print(']');
      } finally {
          out.close();
      }
  }
  </code></pre>
  
  <p>is there any solution? thanks.</p>