Creating a line chart in MVC with chart JS

Question

I have a table in sql having date and count field. i want to show a line chart in mvc.

here is the code:

public JsonResult LineChart()

{

DataSet ds = dbop.GetViews();

List<ListReg> list = new List<ListReg>();

foreach (DataRow dr in ds.Tables[0].Rows)

{

list.Add(new ListReg

{

eFile_registered = Convert.ToInt32(dr["eFile_registered"]),

eFile_Month = Convert.ToDateTime(dr["eFile_Month"])

});

}

return Json(list, JsonRequestBehavior.AllowGet);

}

 

<script>

$.ajax({

type: "POST",

url: "/test/LineChart",

method: 'GET',

dataType: "JSON",

success: function (list) {

console.log(list);

var month = list[0];

var count = list[1];

console(month);

var ctx = document.getElementById("canvas").getContext('2d');

var myChart = new Chart(ctx, {

type: 'line',

height: "230px",

width: "300px",

responsive: false,

animation: false,

legend: { position: 'bottom' },

data: {

//labels: ["M", "T", "W", "T", "F", "S", "S"],

labels: month,

datasets: [{

label: 'Monthly Expenses',

data: count,

backgroundColor: "#4286f4"

}]

}, options: {

events: ['click'],

scaleShowValues: true,

scales: {

yAxes: [{

ticks: {

beginAtZero: true

}

}],

xAxes: [{

ticks: {

autoSkip: false

}

}]

}

}

});

},

"error": function (list) {

alert("Some Error Occured!");

}

});

</script>

}