Hi mahesh213,
Check this example. Now please take its reference and correct your code.
Namespaces
using System.Collections.Generic;
using System.Data;
using System.Linq;
Controller
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
public JsonResult GetChartData()
{
DataTable dt = new DataTable();
dt.Columns.Add("EId", typeof(string));
dt.Columns.Add("Count", typeof(int));
dt.Columns.Add("Date", typeof(string));
dt.Rows.Add(1, 20, "08/08/2020");
dt.Rows.Add(1, 15, "09/09/2020");
dt.Rows.Add(1, 5, "10/09/2020");
dt.Rows.Add(2, 5, "08/08/2020");
dt.Rows.Add(2, 3, "09/09/2020");
dt.Rows.Add(1, 8, "10/09/2020");
List<object> chartData = new List<object>();
List<string> ids = (from p in dt.AsEnumerable()
select p.Field<string>("EId")).Distinct().ToList();
ids.Insert(0, "EId");
chartData.Add(ids.ToArray());
List<string> dates = (from p in dt.AsEnumerable()
select p.Field<string>("Date")).Distinct().ToList();
foreach (string date in dates)
{
List<object> totals = (from p in dt.AsEnumerable()
where p.Field<string>("Date") == date
select p.Field<int>("Count")).Cast<object>().ToList();
totals.Insert(0, date.ToString());
chartData.Add(totals.ToArray());
}
return Json(chartData, JsonRequestBehavior.AllowGet);
}
}
View
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
$.ajax({
type: "POST",
url: "/Home/GetChartData",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
var options = {
title: 'Employee wise Order count',
legend: { position: 'bottom' },
width: 400,
height: 200
};
var data = google.visualization.arrayToDataTable(r);
var chart = new google.visualization.LineChart($("#chart")[0]);
chart.draw(data, options);
},
failure: function (r) {
alert(r.d);
},
error: function (r) {
alert(r.d);
}
});
}
</script>
</head>
<body>
<div id="chart" style="width: 600px; height: 500px;">
</div>
</body>
</html>
Screenshot
