title: Morris chart does not display data from external URL
body: <p>I have a Morris chart that I try to use that gets data from an external source in this case an aspx page. But the chart is not displayed at all. The only chart that is displayed is the one I add static data to <code>myfirstchart</code>. </p>
  
  <p>Anyone see what I am missing?</p>
  
  <p>Chart page:</p>
  
  <pre><code>&lt;head runat="server"&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css"/&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"&gt;&lt;/script&gt;
  &lt;script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          Morris.Donut({
              element: 'morris-donut-chart',
              data: $.parseJSON(Graph()),
              resize: true
          });
      });
  
      function Graph() {
          var data = "";
          $.ajax({
              type: 'POST',
              url: 'data.aspx',
              dataType: 'json',
              async: false,
              contentType: "application/json; charset=utf-8",
              data: {},
              success: function (result) {
                  data = result.d;
              },
              error: function (xhr, status, error) {
                  alert(error);
              }
          });
  
          return data;
      }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;form id="form1" runat="server"&gt;
  &lt;div&gt;
      &lt;div id="morris-donut-chart" style="height: 250px;"&gt;&lt;/div&gt;
  &lt;div id="myfirstchart" style="height: 250px;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  &lt;script&gt;        
      new Morris.Line({
          // ID of the element in which to draw the chart.
          element: 'myfirstchart',
          // Chart data records -- each entry in this array corresponds to a point on
          // the chart.
          data: [
            { year: '2008', value: 20 },
            { year: '2009', value: 10 },
            { year: '2010', value: 5 },
            { year: '2011', value: 5 },
            { year: '2012', value: 20 }
          ],
          // The name of the data record attribute that contains x-values.
          xkey: 'year',
          // A list of names of data record attributes that contain y-values.
          ykeys: ['value'],
          // Labels for the ykeys -- will be displayed when you hover over the
          // chart.
          labels: ['Value']
      });
  &lt;/script&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>Data page:</p>
  
  <pre><code>protected void Page_Load(object sender, EventArgs e)
  {
      var sb = new StringBuilder();
      sb.Append("[");
      sb.Append("  { label: '2012-10-01', value: 802 },");
      sb.Append("  { label: '2012-10-02', value: 783 },");
      sb.Append("  { label: '2012-10-03', value: 820 },");
      sb.Append("  { label: '2012-10-04', value: 839 },");
      sb.Append("  { label: '2012-10-05', value: 792 },");
      sb.Append("  { label: '2012-10-06', value: 859 },");
      sb.Append("  { label: '2012-10-07', value: 790 },");
      sb.Append("]");
  
      var jsonSerializer = new JavaScriptSerializer();
      string data = jsonSerializer.Serialize(sb.ToString());
  
      string json = data;
      Response.Clear();
      Response.ContentType = "application/json; charset=utf-8";
      Response.Write(json);
      Response.End();
  }
  </code></pre>