CODEWITHSUNDEEP
asp.netajaxchartsmorris.js
MTplus
MTplus

Reputation: 2391

Morris chart does not display data from external URL

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 myfirstchart.

Anyone see what I am missing?

Chart page:

<head runat="server">
<title></title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<script type="text/javascript">
    $(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;
    }
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
    <div id="morris-donut-chart" style="height: 250px;"></div>
<div id="myfirstchart" style="height: 250px;"></div>
</div>
</form>
<script>        
    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']
    });
</script>

</body>

Data page:

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

Upvotes: 1

Views: 928

Answers (1)

krlzlx
krlzlx

Reputation: 5822

Use a WebMethod:

[WebMethod]
public static string getGraph()
{
    List<object> json = new List<object>();

    json.Add(new { label = "2012-10-01", value = 802 });
    json.Add(new { label = "2012-10-02", value = 783 });
    json.Add(new { label = "2012-10-03", value = 820 });
    json.Add(new { label = "2012-10-04", value = 839 });
    json.Add(new { label = "2012-10-05", value = 792 });
    json.Add(new { label = "2012-10-06", value = 859 });
    json.Add(new { label = "2012-10-07", value = 790 });

    List<object> jsonObject = new List<object>();

    jsonObject.Add(new { 
        graph = json
    });

    return new JavaScriptSerializer().Serialize(jsonObject); ;
}

And update your javascript with a call to the WebMethod getGraph:

$(document).ready(function () {
    var graph = Graph();

    Morris.Donut({
        element: 'morris-donut-chart',
        data: graph[0].graph,
        resize: true
    });
});

function Graph() {
    var data = "";
    $.ajax({
        type: 'POST',
        url: 'data.aspx/getGraph',
        dataType: 'json',
        async: false,
        contentType: "application/json; charset=utf-8",
        data: {},
        success: function (result) {
            data = $.parseJSON(result.d);
        },
        error: function (xhr, status, error) {
            alert(error);
        }
    });

    return data;
}

Upvotes: 1

Related Questions