Populate (Bind) jQuery Morris Chart based on DropDownList using jQuery AJAX in ASP.Net

Hi King,

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

Database

For this example I have used of Northwind database that you can download using the link given below.

Download Northwind Database

HTML

<div align="center">
    <asp:DropDownList ID="ddlCustomerID" runat="server">
        <asp:ListItem Text="Maria" Value="ALFKI"></asp:ListItem>
        <asp:ListItem Text="Ana Trujillo" Value="ANATR"></asp:ListItem>
        <asp:ListItem Text="Antonio Moreno" Value="ANTON"></asp:ListItem>
        <asp:ListItem Text="Thomas Hardy" Value="AROUT"></asp:ListItem>
        <asp:ListItem Text="Christina Berglund" Value="BERGS"></asp:ListItem>
    </asp:DropDownList>
    <div id="line-chart">
    </div>
</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 () {
        BindMorrisChart('');
        $('[id*=ddlCustomerID]').on('change', function () {
            var id = $(this).val();
            BindMorrisChart(id);
        });
    });

    function BindMorrisChart(id) {
        $('#line-chart').empty();
        $.ajax({
            type: 'POST',
            url: "Default.aspx/GetGraphData",
            data: '{ "customerId": "' + id + '" }',
            dataType: 'json',
            contentType: "application/json; charset=utf-8",
            success: function (result) {
                new Morris.Donut({
                    element: 'line-chart',
                    data: result.d,
                    xkey: 'label',
                    ykeys: ['value'],
                    labels: ['value']
                });
            },
            error: function (error) {
                alert(error.responseText);
            }
        });
    }
</script>

Namespaces

C#

using System.Collections.Generic;
using System.Configuration;
using System.Data.SqlClient;
using System.Web.Services;

VB.Net

Imports System.Collections.Generic
Imports System.Configuration
Imports System.Data.SqlClient
Imports System.Web.Services

Code

C#

[WebMethod()]
public static List<GraphData> GetGraphData(string customerId)
{
    List<GraphData> graphDataList = new List<GraphData>();
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    SqlConnection con = new SqlConnection(constr);
    SqlCommand cmd = new SqlCommand("SELECT TOP 10 CAST(RequiredDate AS DATE) OrderDate, SUM(Freight) Freight FROM Orders WHERE CustomerID = @Id OR @Id IS NULL GROUP BY RequiredDate");
    cmd.Parameters.AddWithValue("@Id", !string.IsNullOrEmpty(customerId) ? customerId : (object)DBNull.Value);
    cmd.Connection = con;
    con.Open();
    SqlDataReader sdr = cmd.ExecuteReader();
    while (sdr.Read())
    {
        graphDataList.Add(new GraphData()
        {
            label = Convert.ToDateTime(sdr["OrderDate"]).ToString("dd/MM/yyyy"),
            value = (Convert.ToInt32(sdr["Freight"]))
        });
    }
    con.Close();

    return graphDataList;
}

public class GraphData
{
    public int value { get; set; }
    public string label { get; set; }
}

VB.Net

<WebMethod()>
Public Shared Function GetGraphData(ByVal customerId As String) As List(Of GraphData)
    Dim graphDataList As List(Of GraphData) = New List(Of GraphData)()
    Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Dim con As SqlConnection = New SqlConnection(constr)
    Dim cmd As SqlCommand = New SqlCommand("SELECT TOP 10 CAST(OrderDate AS DATE) OrderDate, SUM(Freight) Freight FROM  Orders GROUP BY Orderdate")
    cmd.Parameters.AddWithValue("@Id", If(Not String.IsNullOrEmpty(customerId), customerId, CObj(DBNull.Value)))
    cmd.Connection = con
    con.Open()
    Dim sdr As SqlDataReader = cmd.ExecuteReader()
    While sdr.Read()
        graphDataList.Add(New GraphData() With {
            .label = Convert.ToString(sdr("OrderDate")),
            .value = (Convert.ToInt32(sdr("Freight")))
        })
    End While
    con.Close()

    Return graphDataList
End Function

Public Class GraphData
    Public Property value As Integer
    Public Property label As String
End Class

Screenshot