Populate Area Chart from database using jQuery morris plugin in ASP.Net

Hi venkatg,

Check this example. Now please take its reference and correct your code.

HTML

<div id="area_line_chart">
</div>
<link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            type: 'POST',
            url: "Default.aspx/GetChartData",
            dataType: 'json',
            contentType: "application/json; charset=utf-8",
            data: {},
            success: function (result) {
                new Morris.Area({
                    element: 'area_line_chart',
                    behaveLikeLine: true,
                    data: result.d,
                    xkey: 'w',
                    ykeys: ['x', 'y', 'z'],
                    labels: ['X', 'Y', 'Z'],
                    pointSize: 2,
                    hideHover: 'auto',
                    lineColors: ['rgb(97, 97, 97)', 'rgb(0, 206, 209)', 'rgb(255, 117, 142)']
                });
            },
            error: function (error) { alert(error.responseText); }
        });
    });
</script>

Namespaces

C#

using System.Data;

VB.Net

Imports System.Data

Code

C#

[WebMethod]
public static List<GraphData> GetChartData()
{
    // Get Data from Database.
    DataTable dt = new DataTable();
    dt.Columns.AddRange(new DataColumn[] { 
                        new DataColumn("w", typeof(string)),
                        new DataColumn("x", typeof(int)),
                        new DataColumn("y",typeof(int)),
                        new DataColumn("z",typeof(int))});
    dt.Rows.Add("2011 Q1", 2, 0, 0);
    dt.Rows.Add("2011 Q2", 50, 15, 5);
    dt.Rows.Add("2011 Q3", 15, 50, 23);
    dt.Rows.Add("2011 Q4", 45, 12, 7);
    dt.Rows.Add("2011 Q5", 20, 32, 55);
    dt.Rows.Add("2011 Q6", 39, 67, 20);
    dt.Rows.Add("2011 Q7", 20, 9, 5);
    List<GraphData> chartData = new List<GraphData>();
    foreach (DataRow dr in dt.Rows)
    {
        chartData.Add(new GraphData
        {
            w = Convert.ToString(dr["w"]),
            x = (Convert.ToInt32(dr["x"])),
            y = (Convert.ToInt32(dr["y"])),
            z = (Convert.ToInt32(dr["z"]))
        });
    }

    return chartData;
}

public class GraphData
{
    public string w { get; set; }
    public int x { get; set; }
    public int y { get; set; }
    public int z { get; set; }
}

VB.Net

<WebMethod()>
Public Shared Function GetChartData() As List(Of GraphData)
    ' Get Data from Database.
    Dim dt As DataTable = New DataTable()
    dt.Columns.AddRange(New DataColumn() {New DataColumn("w", GetType(String)), New DataColumn("x", GetType(Integer)), New DataColumn("y", GetType(Integer)), New DataColumn("z", GetType(Integer))})
    dt.Rows.Add("2011 Q1", 2, 0, 0)
    dt.Rows.Add("2011 Q2", 50, 15, 5)
    dt.Rows.Add("2011 Q3", 15, 50, 23)
    dt.Rows.Add("2011 Q4", 45, 12, 7)
    dt.Rows.Add("2011 Q5", 20, 32, 55)
    dt.Rows.Add("2011 Q6", 39, 67, 20)
    dt.Rows.Add("2011 Q7", 20, 9, 5)
    Dim chartData As List(Of GraphData) = New List(Of GraphData)()

    For Each dr As DataRow In dt.Rows
        chartData.Add(New GraphData With {
            .w = Convert.ToString(dr("w")),
            .x = (Convert.ToInt32(dr("x"))),
            .y = (Convert.ToInt32(dr("y"))),
            .z = (Convert.ToInt32(dr("z")))
        })
    Next

    Return chartData
End Function

Public Class GraphData
    Public Property w As String
    Public Property x As Integer
    Public Property y As Integer
    Public Property z As Integer
End Class

Screenshot