Multi-Series HTML5 Canvas Chart in ASP.Net

Following is an example of MultiSeries Line Chart using HTML5 Canvas.

Database

Install the Northwind and Pubs Sample Databases in SQL Server Express

HTML

<asp:DropDownList ID="ddlCountries1" runat="server">
    <asp:ListItem Text="USA" Value="USA" Selected="True"></asp:ListItem>
    <asp:ListItem Text="Finland" Value="Finland"></asp:ListItem>
    <asp:ListItem Text="Italy" Value="Italy"></asp:ListItem>
    <asp:ListItem Text="Germany" Value="Germany"></asp:ListItem>
    <asp:ListItem Text="Mexico" Value="Mexico"></asp:ListItem>
    <asp:ListItem Text="Sweden" Value="Sweden"></asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="ddlCountries2" runat="server">
    <asp:ListItem Text="USA" Value="USA"></asp:ListItem>
    <asp:ListItem Text="Finland" Value="Finland"></asp:ListItem>
    <asp:ListItem Text="Italy" Value="Italy"></asp:ListItem>
    <asp:ListItem Text="Germany" Value="Germany" Selected="True"></asp:ListItem>
    <asp:ListItem Text="Mexico" Value="Mexico"></asp:ListItem>
    <asp:ListItem Text="Sweden" Value="Sweden"></asp:ListItem>
</asp:DropDownList>
<hr />
<div id="dvChart">
</div>

Namespaces

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

Code

[WebMethod]
public static List<object> GetChart(string country1, string country2)
{
    List<object> chartData = new List<object>();
    string query = "SELECT DISTINCT DATEPART(YEAR, OrderDate) Year FROM Orders";
    DataTable dtYears = GetData(query);
    List<int> labels = new List<int>();
    foreach (DataRow row in dtYears.Rows)
    {
        labels.Add(Convert.ToInt32(row["Year"]));
    }
    chartData.Add(labels);

    query = "SELECT DATEPART(YEAR, OrderDate) Year, COUNT(DATEPART(YEAR, OrderDate)) TotalOrders";
    query += " FROM Orders WHERE ShipCountry = '" + country1 + "' GROUP BY DATEPART(YEAR, OrderDate)";
    DataTable dtCountry1 = GetData(query);

    List<int> series1 = new List<int>();
    foreach (DataRow row in dtCountry1.Rows)
    {
        series1.Add(Convert.ToInt32(row["TotalOrders"]));
    }
    chartData.Add(series1);

    query = "SELECT DATEPART(YEAR, OrderDate) Year, COUNT(DATEPART(YEAR, OrderDate)) TotalOrders";
    query += " FROM Orders WHERE ShipCountry = '" + country2 + "' GROUP BY DATEPART(YEAR, OrderDate)";
    DataTable dtCountry2 = GetData(query);

    List<int> series2 = new List<int>();
    foreach (DataRow row in dtCountry2.Rows)
    {
        series2.Add(Convert.ToInt32(row["TotalOrders"]));
    }
    chartData.Add(series2);

    return chartData;
}

private static DataTable GetData(string query)
{
    DataTable dt = new DataTable();
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand(query))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter())
            {
                cmd.CommandType = CommandType.Text;
                cmd.Connection = con;
                sda.SelectCommand = cmd;
                sda.Fill(dt);
            }
        }
        return dt;
    }
}

JavaScript

<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="//cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
    LoadChart();
    $("[id*=ddlCountries1], [id*=ddlCountries2]").bind("change", function () {
        LoadChart();
    });
});
function LoadChart() {
    var country1 = $("[id*=ddlCountries1]").val();
    var country2 = $("[id*=ddlCountries2]").val();
    $.ajax({
        type: "POST",
        url: "CS.aspx/GetChart",
        data: "{country1: '" + country1 + "', country2: '" + country2 + "'}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (r) {
            var labels = r.d[0];
            var series1 = r.d[1];
            var series2 = r.d[2];
            var data = {
                labels: r.d[0],
                datasets: [
                            {
                                label: country1,
                                fillColor: "rgba(255, 255, 193, 0.2)",
                                strokeColor: "#FCD209",
                                pointColor: "#FF8C00",
                                data: series1
                            },
                            {
                                label: country2,
                                fillColor: "rgba(217, 237, 247, 0.2)",
                                strokeColor: "#BCE8F1",
                                pointColor: "#0090CB",
                                data: series2
                            }
                        ]
            };
            $("#dvChart").html("");
            var canvas = document.createElement('canvas');
            $("#dvChart")[0].appendChild(canvas);

            //Fix for IE 8
            if ($.browser.msie && $.browser.version == "8.0") {
                G_vmlCanvasManager.initElement(canvas);
            }
            var ctx = canvas.getContext('2d');
            ctx.canvas.height = 300;
            ctx.canvas.width = 500;
            var lineChart = new Chart(ctx).Line(data, {
                bezierCurve: false
            });
        },
        failure: function (response) {
            alert('There was an error.');
        }
    });
}
</script>

Screenshot