Draw HTML5 Canvas charts based on DropDownList using ChartJs in ASP.Net

Hi onais,

Refer below example.

Using this article i have modified the code.

https://www.aspsnippets.com/Articles/Implement-Free-HTML5-Canvas-charts-using-Chartjs-in-ASPNet.aspx

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/excanvas/r3/excanvas.js" type="text/javascript"></script>
<script src="//cdn.jsdelivr.net/chart.js/0.2/Chart.js" type="text/javascript"></script>
<form id="form1" runat="server">
<script type="text/javascript">
    $(function () {
        LoadChart();
        $("[id*=ddlCountries]").bind("change", function () {
            LoadChart();
        });
    });
    function LoadChart() {
        $.ajax({
            type: "POST",
            url: "CS.aspx/GetChart",
            data: "{country: '" + $("[id*=ddlCountries]").val() + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {
                $("#dvChart").html("");
                $("#dvLegend").html("");
                var data = eval(r.d);
                var el = document.createElement('canvas');
                $("#dvChart")[0].appendChild(el);

                //Fix for IE 8
                if ($.browser.msie && $.browser.version == "8.0") {
                    G_vmlCanvasManager.initElement(el);
                }
                var ctx = el.getContext('2d');
                var userStrengthsChart;
                // Based on your chart type comment and uncomment the below line.
                userStrengthsChart = new Chart(ctx).Pie(data);
                //userStrengthsChart = new Chart(ctx).Doughnut(data);
                for (var i = 0; i < data.length; i++) {
                    var div = $("<div />");
                    div.css("margin-bottom", "10px");
                    div.html("<span style = 'display:inline-block;height:10px;width:10px;background-color:" + data[i].color + "'></span> " + data[i].text);
                    $("#dvLegend").append(div);
                }
            },
            failure: function (response) {
                alert('There was an error.');
            }
        });
    }
</script>
<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            Country:
            <asp:DropDownList ID="ddlCountries" runat="server">
                <asp:ListItem Text="USA" Value="USA" />
                <asp:ListItem Text="Germany" Value="Germany" />
                <asp:ListItem Text="France" Value="France" />
                <asp:ListItem Text="Brazil" Value="Brazil" />
            </asp:DropDownList>
        </td>
    </tr>
    <tr>
        <td>
            <div id="dvChart">
            </div>
        </td>
        <td>
            <div id="dvLegend">
            </div>
        </td>
    </tr>
</table>

C#

[WebMethod]
public static string GetChart(string country)
{
    string constr = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        string query = string.Format("select shipcity, count(orderid) from orders where shipcountry = '{0}' group by shipcity", country);
        using (SqlCommand cmd = new SqlCommand())
        {
            cmd.CommandText = query;
            cmd.CommandType = CommandType.Text;
            cmd.Connection = con;
            con.Open();
            using (SqlDataReader sdr = cmd.ExecuteReader())
            {
                StringBuilder sb = new StringBuilder();
                sb.Append("[");
                while (sdr.Read())
                {
                    sb.Append("{");
                    System.Threading.Thread.Sleep(50);
                    string color = String.Format("#{0:X6}", new Random().Next(0x1000000)); 
                    sb.Append(string.Format("text :'{0}', value:{1}, color: '{2}'", sdr[0], sdr[1], color));
                    sb.Append("},");
                }
                sb = sb.Remove(sb.Length - 1, 1);
                sb.Append("]");
                con.Close();
                return sb.ToString();
            }
        }
    }
}

Screenshot