Populate Canvas Bar chart from Database using ChartJS in ASP.Net MVC

Hi nabilabolo,

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

Database

CREATE TABLE EQMlists
( 
	Id INT PRIMARY KEY IDENTITY,
	platform_family VARCHAR(50),
	inspection_status CHAR(10),
	EQM_FLAG INT
)
GO
INSERT INTO EQMlists VALUES('COUGAR_MLK', 'PASS', 1)
INSERT INTO EQMlists VALUES('COUGAR_MLK', 'PASS', 1)
INSERT INTO EQMlists VALUES('COUGAR_MLK', 'PASS', 1)
INSERT INTO EQMlists VALUES('COUGAR_MLK', 'PASS', 1)
INSERT INTO EQMlists VALUES('BISON_MLK', 'PASS', 1)
INSERT INTO EQMlists VALUES('GAMBIT_MLK_MT_22NM', 'PASS', 1)
INSERT INTO EQMlists VALUES('GAMBIT_MLK_SFF_22NM', 'PASS', 1)
INSERT INTO EQMlists VALUES('COUGAR', 'PASS', 1)
INSERT INTO EQMlists VALUES('ELK_MLK', 'PASS', 1)
INSERT INTO EQMlists VALUES('BISON', 'PASS', 1)
INSERT INTO EQMlists VALUES('COUGAR_MLK', 'PASS', 1)
INSERT INTO EQMlists VALUES('COUGAR_MLK', 'PASS', 1)
INSERT INTO EQMlists VALUES('COUGAR_MLK', 'PASS', 1)
INSERT INTO EQMlists VALUES('EAGLE_SFF_CFL', 'PASS', 1)
INSERT INTO EQMlists VALUES('SAILFISH', 'PASS', 1)
INSERT INTO EQMlists VALUES('COUGAR_MLK', 'PASS', 1)
INSERT INTO EQMlists VALUES('COUGAR_MLK', 'PASS', 1)
INSERT INTO EQMlists VALUES('COUGAR_MLK', 'PASS', 1)
INSERT INTO EQMlists VALUES('BISON', 'PASS', 1)

Controller

public class HomeController : Controller
{
    // GET: /Home/
    public ActionResult Index()
    {
        TestEntities db = new TestEntities();
        var platform_family = (from b in db.EQMlists
                                where b.inspection_status == "PASS"
                                orderby b.platform_family ascending
                                group b by b.platform_family into g
                                select new { platform_family = g.Key }).ToList();

        decimal total = db.EQMlists.Count();

        List<string> platformfamily = new List<string>();
        List<string> percentages = new List<string>();
        foreach (var item in platform_family)
        {
            decimal sum = db.EQMlists
                            .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"] %>';
        var datas = '<%=TempData["percentage"] %>';
        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