Hi EmadKhan,
Check this example. Now please take its reference and correct your code.
HTML
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
DrawChart($('#RadioButtonList1').find('input[type=radio]:checked').val());
});
function DrawChart(chartType) {
$.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(),
borderColor: 'red',
borderWidth: 1,
data: datasetDatas[i]
};
dataSets.push(dataSet);
}
var ctx = document.getElementById("Chart1").getContext('2d');
new Chart(ctx, {
type: chartType,
data: { labels: label, datasets: dataSets },
options: {
responsive: false,
title: { display: true, text: 'Project Billing Amount' },
legend: { display: true, position: "top" },
layout: {
padding: { left: 50, right: 50, top: 50, bottom: 50 }
},
scales: {
yAxes: [{ ticks: { beginAtZero: true}}]
}
}
});
}
});
}
function GetRandomColor() {
var trans = '0.3'; // 80% transparency
var color = 'rgba(';
for (var i = 0; i < 3; i++) {
color += Math.floor(Math.random() * 255) + ',';
}
color += trans + ')';
return color;
}
</script>
<asp:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="true" RepeatDirection="Horizontal">
<asp:ListItem Text="Bar" Value="bar" Selected="True" />
<asp:ListItem Text="Column" Value="horizontalBar" />
<asp:ListItem Text="Line" Value="line" />
<asp:ListItem Text="Radar" Value="radar" />
</asp:RadioButtonList>
<hr />
<canvas id="Chart1" style="width: 800px; height: 400px;"></canvas>
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()
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[] {
new DataColumn("ProjectName", typeof(string)),
new DataColumn("AmountToBill",typeof(decimal)),
new DataColumn("AmountBilled",typeof(decimal))});
dt.Rows.Add("Four Seasons", 100000, 50000);
dt.Rows.Add("Blossoms Hill", 250000, 10000);
dt.Rows.Add("Future Colony", 10000, 5000);
dt.Rows.Add("Green Valleys", 100000, 50000);
dt.Rows.Add("Bahria Town", 40000, 20000);
dt.Rows.Add("Saadi Town", 400000, 200000);
dt.Rows.Add("Nazeer Villas", 250000, 10000);
dt.Rows.Add("Khokar Park", 10000, 5000);
dt.Rows.Add("ASF Valley", 250000, 10000);
dt.Rows.Add("Askari Park", 10000, 5000);
ChartData chartData = new ChartData();
string[] Labels = (dt.AsEnumerable().Select(p => p.Field<string>("ProjectName"))).Distinct().ToArray();
chartData.Labels = Labels;
List<string> datasetLabels = new List<string>();
for (int i = 1; i < dt.Columns.Count; i++)
{
datasetLabels.Add(dt.Columns[i].ColumnName);
}
chartData.DatasetLabels = datasetLabels.ToArray();
List<decimal[]> datasetDatas = new List<decimal[]>();
for (int i = 0; i < chartData.DatasetLabels.Length; i++)
{
List<decimal> data = new List<decimal>();
for (int j = 0; j < Labels.Length; j++)
{
decimal amount = (dt.AsEnumerable().Where(p => p.Field<string>("ProjectName") == Labels[j])
.Select(p => p.Field<Decimal>(chartData.DatasetLabels[i]))).FirstOrDefault();
data.Add(amount);
}
datasetDatas.Add(data.ToArray());
}
chartData.DatasetDatas = datasetDatas;
return chartData;
}
public class ChartData
{
public string[] Labels { get; set; }
public string[] DatasetLabels { get; set; }
public List<decimal[]> DatasetDatas { get; set; }
}
VB.Net
<WebMethod()>
Public Shared Function GetChartData() As ChartData
Dim dt As DataTable = New DataTable()
dt.Columns.AddRange(New DataColumn() {New DataColumn("ProjectName", GetType(String)),
New DataColumn("AmountToBill", GetType(Decimal)),
New DataColumn("AmountBilled", GetType(Decimal))})
dt.Rows.Add("Four Seasons", 100000, 50000)
dt.Rows.Add("Blossoms Hill", 250000, 10000)
dt.Rows.Add("Future Colony", 10000, 5000)
dt.Rows.Add("Green Valleys", 100000, 50000)
dt.Rows.Add("Bahria Town", 40000, 20000)
dt.Rows.Add("Saadi Town", 400000, 200000)
dt.Rows.Add("Nazeer Villas", 250000, 10000)
dt.Rows.Add("Khokar Park", 10000, 5000)
dt.Rows.Add("ASF Valley", 250000, 10000)
dt.Rows.Add("Askari Park", 10000, 5000)
Dim chartData As ChartData = New ChartData()
Dim Labels As String() = (dt.AsEnumerable().[Select](Function(p) p.Field(Of String)("ProjectName"))).Distinct().ToArray()
chartData.Labels = Labels
Dim datasetLabels As List(Of String) = New List(Of String)()
For i As Integer = 1 To dt.Columns.Count - 1
datasetLabels.Add(dt.Columns(i).ColumnName)
Next
chartData.DatasetLabels = datasetLabels.ToArray()
Dim datasetDatas As List(Of Decimal()) = New List(Of Decimal())()
For i As Integer = 0 To chartData.DatasetLabels.Length - 1
Dim data As List(Of Decimal) = New List(Of Decimal)()
For j As Integer = 0 To Labels.Length - 1
Dim amount As Decimal = (dt.AsEnumerable().Where(Function(p) p.Field(Of String)("ProjectName") = Labels(j)) _
.Select(Function(p) p.Field(Of Decimal)(chartData.DatasetLabels(i)))).FirstOrDefault()
data.Add(amount)
Next
datasetDatas.Add(data.ToArray())
Next
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 Decimal())
End Class
Screenshot
