Hi nabilabolo,
Check this example. Now please take its reference and correct your code.
Note : Change the percentage calculation if required and populate the record from Database.
Controller
public ActionResult Index()
{
// Get DataTable from Database.
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[] {
new DataColumn("platform_family", typeof(string)),
new DataColumn("inspection_status", typeof(string)),
new DataColumn("EQM_FLAG", typeof(int)) });
dt.Rows.Add("COUGAR_MLK", "PASS", 1);
dt.Rows.Add("COUGAR_MLK", "PASS", 1);
dt.Rows.Add("COUGAR_MLK", "PASS", 1);
dt.Rows.Add("COUGAR_MLK", "PASS", 1);
dt.Rows.Add("BISON_MLK", "PASS", 1);
dt.Rows.Add("GAMBIT_MLK_MT_22NM", "PASS", 1);
dt.Rows.Add("GAMBIT_MLK_SFF_22NM", "PASS", 1);
dt.Rows.Add("COUGAR", "PASS", 1);
dt.Rows.Add("ELK_MLK", "PASS", 1);
dt.Rows.Add("BISON", "PASS", 1);
dt.Rows.Add("COUGAR_MLK", "PASS", 1);
dt.Rows.Add("COUGAR_MLK", "PASS", 1);
dt.Rows.Add("COUGAR_MLK", "PASS", 1);
dt.Rows.Add("EAGLE_SFF_CFL", "PASS", 1);
dt.Rows.Add("SAILFISH", "PASS", 1);
dt.Rows.Add("COUGAR_MLK", "PASS", 1);
dt.Rows.Add("COUGAR_MLK", "PASS", 1);
dt.Rows.Add("COUGAR_MLK", "PASS", 1);
var platform_family = (from b in dt.AsEnumerable()
where b["inspection_status"].ToString() == "PASS"
orderby b["platform_family"] ascending
group b by b["platform_family"] into g
select new { platform_family = g.Key }).ToList();
decimal total = dt.AsEnumerable().Count();
List<string> platformfamily = new List<string>();
List<string> percentages = new List<string>();
foreach (var item in platform_family)
{
decimal sum = dt.AsEnumerable()
.Where(x => x["platform_family"] == item.platform_family)
.OrderBy(x => x["platform_family"])
.Count();
decimal percentage = (sum / total) * 100;
platformfamily.Add(item.platform_family.ToString());
percentages.Add(percentage.ToString("0.00"));
}
TempData["platform_family"] = string.Join(",", platformfamily);
TempData["percentage"] = string.Join(",", percentages);
return View();
}
View
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script type="text/javascript">
$(function () {
var labels = '<%=TempData["platform_family"] %>'; // Get from ViewBag.
var datas = '<%=TempData["percentage"] %>'; // Get from ViewBag.
var labelsArray = new Array();
var dataArray = new Array();
for (var i = 0; i < labels.split(',').length; i++) {
labelsArray.push(labels.split(',')[i]);
dataArray.push(datas.split(',')[i]);
}
var ctx1 = document.getElementById("lineChart").getContext('2d');
var lineChart = new Chart(ctx1, {
type: 'bar',
data: {
labels: labelsArray,
datasets: [{
label: '% Daily Sampling by Platform',
backgroundColor: '#3EB9DC',
data: dataArray
}]
},
options: {
tooltips: { mode: 'index', intersect: false },
responsive: true,
scales: {
xAxes: [{ stacked: true}],
yAxes: [{ stacked: true}]
}
}
});
});
</script>
<canvas id="lineChart" height="150" width="200"></canvas>
Screenshot