How to create a chart in MVC Having three values to show - asp.net-mvc

Question

I am new in MVC 5, not having much idea about creating chart.
i need to create a chart which will show the Four values from a table as such below FormatName,Month,SuccessCount, FailCount .
I want to show success and Failcount on the basis of Month for each Format.
Formats are client names.
I tried with several sites , but no idea how to show the three values.
Month FormatName SuccessCount FailedCount
Jan HPCL 20 32
Feb FG 23 0
Mar abcd 13 34
Apr Test 12 23
Above is the table which i want to show on chart.Unfortunately i cannot add image as it is not permitted yet on stackoverflow.
I have used below method to show the data in chart.
`public List BindFormatByMonth(string status)
{
DataTable dt1 = new DataTable();
DataTable dt2 = new DataTable();
dt1 = PBMSCommon.Database.ExecuteDataSet("usp_sel_DedupeDetails", status).Tables[0]; // success records
List ochartmodel = new List();
foreach (DataRow row in dt1.Rows)
{
FormatStatus omodel = new FormatStatus();
omodel.FormatName = Convert.ToString(row["NVFormatCode"]);
omodel.month = Convert.ToString(row["Month"]);
omodel.successCount = Convert.ToInt32(row["Status"]);
ochartmodel.Add(omodel);
}`
any help will be appreciated.
Pooja

Answer 1

You can use vertical bar chart for your requirement. I will suggest you to use chart.js. It responsive and user friendly.
So I have added a fiddler here! It would be use full to you!
Fiddle
Html:
<canvas id="myChart" width="400" height="400"></canvas>
Javascript:
var ctx = document.getElementById("myChart").getContext("2d");
var data = {
labels: ["Jan", "Feb", "Mar"],
datasets: [{
label: "HPCL",
backgroundColor: "skyblue",
data: [20, 32, 12]
}, {
label: "FG ",
backgroundColor: "maroon",
data: [23, 10, 15]
}, {
label: "abcd",
backgroundColor: "green",
data: [13, 34, 16]
}, {
label: "test",
backgroundColor: "violet",
data: [12, 23, 16]
}]
};
var myBarChart = new Chart(ctx, {
type: 'bar',
data: data,
options: {
barValueSpacing: 20,
scales: {
yAxes: [{
ticks: {
min: 0,
}
}]
}
}
});
Fiddle