How to dispaly Multi Line Chart using jQuery Chart plugin in ASP.Net

Hi mod7609,

Refer the below code.

HTML

<div id="dvChart">
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/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 () {
        $.ajax({
            type: "POST",
            url: "CS.aspx/GetChart",
            data: "{}",
            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: labels,
                    datasets:
                    [
                        {
                            label: "",
                            fillColor: "rgba(255, 255, 193, 0.2)",
                            strokeColor: "#FCD209",
                            pointColor: "#FF8C00",
                            data: series1
                        },
                        {
                            label: "",
                            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>

Code

[WebMethod]
public static List<object> GetChart()
{
    List<object> chartData = new List<object>();
    string query = "SELECT SUBSTRING(DATENAME(MONTH,[Time]),0,4)+CONVERT(VARCHAR(10),DATEPART(DAY,[Time])) Day FROM PL_PK";
    DataTable dtYears = GetData(query);
    List<string> labels = new List<string>();
    foreach (DataRow row in dtYears.Rows)
    {
        labels.Add(row["Day"].ToString());
    }
    chartData.Add(labels);

    query = "SELECT SUBSTRING(DATENAME(MONTH,[Time]),0,4)+CONVERT(VARCHAR(10),DATEPART(DAY,[Time])) Day,Total FROM PL_PK";
    DataTable dtCountry1 = GetData(query);

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

    query = "SELECT SUBSTRING(DATENAME(MONTH,[Time]),0,4)+CONVERT(VARCHAR(10),DATEPART(DAY,[Time])) Day,[Plan] FROM PL_PK";
    DataTable dtCountry2 = GetData(query);

    List<int> series2 = new List<int>();
    foreach (DataRow row in dtCountry2.Rows)
    {
        series2.Add(Convert.ToInt32(row["Plan"]));
    }
    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;
    }
}

SQL

CREATE TABLE PL_PK([ID] INT,[L90] INT,[B90] INT,[Time] DATETIME,Total INT,[Plan] INT)
INSERT INTO PL_PK VALUES(57,100,100,'2016/10/10',200,10)
INSERT INTO PL_PK VALUES(58,50,50,'2016/10/11',100,10)
INSERT INTO PL_PK VALUES(59,58,48,'2016/10/12',106,12)
INSERT INTO PL_PK VALUES(60,48,50,'2016/10/13',98,50)
INSERT INTO PL_PK VALUES(61,88,45,'2016/10/14',133,60)
INSERT INTO PL_PK VALUES(62,70,80,'2016/10/15',150,70)
INSERT INTO PL_PK VALUES(63,90,40,'2016/10/16',130,50)

Screenshot