Draw Morris Chart with MVC Web

Following is working View Name is: testChart.cshtml;
@{
ViewBag.Title = “testChart”;

}

<h2>testChart</h2>
<!DOCTYPE html>
<html>
<head>
<title> Test Page </title>
</head>
<body>
<div id=”myfirstchart” style=”height: 250px;”></div>
<div id=”Line-Example” style=”height: 250px;”></div>
<div id=”morris-donut-chart” style=”height: 250px;”></div>
</body>
</html>
<script type=”text/javascript”>

$(document).ready(function () {
$.get(‘@Url.Action(“GetSalesGraphData”)’, function (result) {

new Morris.Line({
// ID of the element in which to draw the chart.
element: ‘myfirstchart’,
// Chart data records — each entry in this array corresponds to a point on

data: result,
// The name of the data record attribute that contains x-values.
xkey: ‘Year’,
// A list of names of data record attributes that contain y-values.
ykeys: [‘Sales’],
// Labels for the ykeys — will be displayed when you hover over the
// chart.
labels: [‘Sales’]
});
});

})
</script>

@*<link rel=”stylesheet” href=”//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css”>

Following is Controller Page:

Using EF6 entity name: AWorksEntities, Stroed Procedure, Using ViewModel

[HttpGet]
public JsonResult GetSalesGraphData()
{ using (var context = new AWorksEntities())
{

var sales = context.f_uspGetTotalYearlySales();
List<YearlySales> ys = sales.Select(s=> new YearlySales
{
Year = s.Year.GetValueOrDefault(),
Sales = s.TotalSales.GetValueOrDefault()

}).ToList();
return Json(ys, JsonRequestBehavior.AllowGet);

}

public ViewResult testChart()
{
return View();
}