Posted on Leave a comment

Draw Morris Chart with MVC Web

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


<!DOCTYPE html>
<title> Test Page </title>
<div id=”myfirstchart” style=”height: 250px;”></div>
<div id=”Line-Example” style=”height: 250px;”></div>
<div id=”morris-donut-chart” style=”height: 250px;”></div>
<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’]



@*<link rel=”stylesheet” href=”//”>

<script src=”//”></script>
<script src=”//”></script>*@

<script src=”@Url.Content(“~/bower_components/morrisjs/morris.min.js”)”></script>
<script src=”@Url.Content(“~/Scripts/morris-data.js”)”></script>


Following is Controller Page:

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

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()

return Json(ys, JsonRequestBehavior.AllowGet);



public ViewResult testChart()
return View();

Leave a Reply

Your email address will not be published. Required fields are marked *