Create multi-series Area (Line) Chart from database using ChartJS in ASP.Net

Hi George616,

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

HTML

<canvas id="Chart1" style="height: 250px; width: 100%;"></canvas>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<script type="text/javascript">
    $(function () {
        $.ajax({
            type: "POST",
            url: "Default.aspx/GetChartData",
            data: {},
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                var label = response.d.Labels;
                var datasetLabels = response.d.DatasetLabels;
                var datasetDatas = response.d.DatasetDatas;
                var dataSets = [];
                for (var i = 0; i < datasetDatas.length; i++) {
                    var dataSet = {
                        label: datasetLabels[i],
                        backgroundColor: GetRandomColor(),
                        data: datasetDatas[i]
                    };
                    dataSets.push(dataSet);
                }

                var ctx = document.getElementById("Chart1").getContext('2d');
                new Chart(ctx, {
                    type: 'line',
                    data: { labels: label, datasets: dataSets },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        title: { display: true, text: 'Month wise sale' },
                        legend: { display: true, position: "top" },
                        scales: { yAxes: [{ ticks: { beginAtZero: true } }] }
                    }
                });
            }
        });
    });

    function GetRandomColor() {
        var trans = '0.3';
        var color = 'rgba(';
        for (var i = 0; i < 3; i++) {
            color += Math.floor(Math.random() * 255) + ',';
        }
        color += trans + ')';
        return color;
    }
</script>

Namespaces

C#

using System.Data;
using System.Web.Services;

VB.Net

Imports System.Data
Imports System.Web.Services

Code

C#

[WebMethod]
public static ChartData GetChartData()
{
    // Get the data from database.
    DataTable dt = new DataTable();
    dt.Columns.AddRange(new DataColumn[] {
        new DataColumn("Month"), new DataColumn("Motorcycles"), new DataColumn("Bicycles") });
    dt.Rows.Add("January", 30, 65);
    dt.Rows.Add("February", 50, 60);
    dt.Rows.Add("March", 40, 81);
    dt.Rows.Add("April", 20, 80);
    dt.Rows.Add("May", 80, 60);
    dt.Rows.Add("June", 30, 60);

    ChartData chartData = new ChartData();
    chartData.Labels = dt.AsEnumerable().Select(x => x.Field<string>("Month")).ToArray();
    chartData.DatasetLabels = new string[] { "Motorcycles", "Bicycles" };
    List<int[]> datasetDatas = new List<int[]>();

    List<int> motorcycles = new List<int>();
    List<int> bicycles = new List<int>();
    foreach (DataRow dr in dt.Rows)
    {
        motorcycles.Add(Convert.ToInt32(dr["Motorcycles"]));
        bicycles.Add(Convert.ToInt32(dr["Bicycles"]));
    }

    datasetDatas.Add(motorcycles.ToArray());
    datasetDatas.Add(bicycles.ToArray());
    chartData.DatasetDatas = datasetDatas;
    return chartData;
}

public class ChartData
{
    public string[] Labels { get; set; }
    public string[] DatasetLabels { get; set; }
    public List<int[]> DatasetDatas { get; set; }
}

VB.Net

<WebMethod>
Public Shared Function GetChartData() As ChartData
    ' Get the data from database.
    Dim dt As DataTable = New DataTable()
    dt.Columns.AddRange(New DataColumn() {
                        New DataColumn("Month"), New DataColumn("Motorcycles"), New DataColumn("Bicycles")})
    dt.Rows.Add("January", 30, 65)
    dt.Rows.Add("February", 50, 60)
    dt.Rows.Add("March", 40, 81)
    dt.Rows.Add("April", 20, 80)
    dt.Rows.Add("May", 80, 60)
    dt.Rows.Add("June", 30, 60)
    Dim chartData As ChartData = New ChartData()
    chartData.Labels = dt.AsEnumerable().Select(Function(x) x.Field(Of String)("Month")).ToArray()
    chartData.DatasetLabels = New String() {"Motorcycles", "Bicycles"}
    Dim datasetDatas As List(Of Integer()) = New List(Of Integer())()
    Dim motorcycles As List(Of Integer) = New List(Of Integer)()
    Dim bicycles As List(Of Integer) = New List(Of Integer)()

    For Each dr As DataRow In dt.Rows
        motorcycles.Add(Convert.ToInt32(dr("Motorcycles")))
        bicycles.Add(Convert.ToInt32(dr("Bicycles")))
    Next

    datasetDatas.Add(motorcycles.ToArray())
    datasetDatas.Add(bicycles.ToArray())
    chartData.DatasetDatas = datasetDatas
    Return chartData
End Function

Public Class ChartData
    Public Property Labels As String()
    Public Property DatasetLabels As String()
    Public Property DatasetDatas As List(Of Integer())
End Class

Screenshot