Morris.JS Chart in an MVC Application


As a designer we always wanted to have a good chart plugins in our application where we can provide data visualization through some graphical interface. We try to hook through various paid and free version of Charting controls. Recently I found a pretty good chart plugins which is an open source and can be downloaded from Github. This chart plugin is called Morris.js which is a jQuery based chart plugin and can be downloaded from the following link.

Here I am trying create a sample MVC application and show you the basic implementation of Morris.JS. Let’s get started by creating a basic MVC application without any Authentication logic. Once created, let’s have a new layout page and name it as _CustomLayout.cshtml under ~/Views/Shared folder.

Once you download the Morris.js library, unzip the file and place the unzipped folder under ~/Content folder.

image

Morris.js library entirely depends on another library named raphael.js and morris.js. So you need to download the raphael-min.js script file from the following location and place it under ~/Scripts folder.

image

Once done update your _CustomLayout.cshtml file with the following code where you need to refer the scripts and css files.

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
<link rel="stylesheet" href="@Url.Content(@"~/Content/morrisJS/morris.css")" />
<link rel="stylesheet" href="@Url.Content(@"~/Content/bootstrap.min.css")" />
<link rel="stylesheet" href="@Url.Content(@"~/Content/custom.css")" />
<script src="@Url.Content(@"~/Scripts/jquery-1.10.2.min.js")"></script>
<script src="@Url.Content(@"~/Scripts/bootstrap.min.js")"></script>
<script src="@Url.Content(@"~/Scripts/raphael-min.js")"></script>
<script src="@Url.Content(@"~/Content/morrisJS/morris.min.js")"></script>
</head>
<body>
<div>
@RenderBody()
</div>
</body>
</html>

Next create an index.cshtml view where you would like to display these charts. Apply the following code in the view.

@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_CustomLayout.cshtml";
}

<h2>Morris.JS Example</h2>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-6">
<div style="width:50%; float:left;">
<div id="line-chart"></div>
</div>
</div>
<div class="col-md-6">
<div style="width: 50%; float: left;">
<div id="area-chart"></div>
</div>
</div>
</div>
<div class="row"></div>
<div class="row">
<div class="col-md-6">
<div style="width: 50%; float: left;">
<div id="donut-chart"></div>
</div>
</div>
<div class="col-md-6">
<div style="width: 50%; float: left;">
<div id="bar-chart"></div>
</div>
</div>
</div>
</div>
</div>
</div>

The divs (“line-chart”, “bar-chart”, “area-chart” and “donut-chart”) will draw the graphs but for that to happen we need to provide a client-side script to get the data and draw the graph in these divs. The ID for these graphs will be the id of these divs. Let’s provide the script after the main div in the same view index.cshtml.

<script>
Morris.Line({
element: 'line-chart',
data: [
{ year: '2001', item1: 100, item2: 90 },
{ year: '2002', item1: 80, item2: 40 },
{ year: '2003', item1: 60, item2: 30 },
{ year: '2004', item1: 45, item2: 30 },
{ year: '2005', item1: 30, item2: 20 },
{ year: '2006', item1: 20, item2: 15 }
],
xkey: 'year',
ykeys: ['item1', 'item2'],
labels: ['Production', 'Sales'],
});

Morris.Donut({
element: 'donut-chart',
data: [
{ label: 'Sales In 2001', value: 100 },
{ label: 'Sales In 2002', value: 80 },
{ label: 'Sales In 2003', value: 60 },
{ label: 'Sales In 2004', value: 45 },
{ label: 'Sales In 2005', value: 30 },
{ label: 'Sales In 2006', value: 20 }
]
});
Morris.Area({
element: 'area-chart',
data: [
{ year: '2001', item1: 100, item2: 90 },
{ year: '2002', item1: 80, item2: 40 },
{ year: '2003', item1: 60, item2: 30 },
{ year: '2004', item1: 45, item2: 30 },
{ year: '2005', item1: 30, item2: 20 },
{ year: '2006', item1: 20, item2: 15 }
],
xkey: 'year',
ykeys: ['item1', 'item2'],
labels: ['Production', 'Sales']
});

Morris.Bar({
element: 'bar-chart',
data: [
{ year: '2001', item1: 100, item2: 90 },
{ year: '2002', item1: 80, item2: 40 },
{ year: '2003', item1: 60, item2: 30 },
{ year: '2004', item1: 45, item2: 30 },
{ year: '2005', item1: 30, item2: 20 },
{ year: '2006', item1: 20, item2: 15 }
],
xkey: 'year',
ykeys: ['item1', 'item2'],
labels: ['Production', 'Sales']
})
</script>

Once the script is done we need some custom style to provide a background box which will provide the x-axis and y-axis values with preloaded data on hovering over the graph. Let’s keep this custom style under ~/Content folder.

image

Let’s add some style inside the custom.css file.

.morris-hover {
position: absolute;
z-index: 1000;
}

.morris-hover.morris-default-style {
border-radius: 10px;
padding: 6px;
color: #666;
background: rgb(255, 216, 0);
border: solid 2px rgba(230, 230, 230, 0.8);
font-family: sans-serif;
font-size: 12px;
text-align: center;
}

.morris-hover.morris-default-style .morris-hover-row-label {
font-weight: bold;
margin: 0.25em 0;
}

.morris-hover.morris-default-style .morris-hover-point {
white-space: nowrap;
margin: 0.1em 0;
}

Once the style is finalized, it’s our turn to run the application and review the output. Here is the screenshot below which shows how the graph is drawn in the view

image

That’s it. This is a basic implementation of Morris.js chart plugin. We can also drive the data dynamically as JSON and then create the graph without hard-coding it. Happy coding

4 thoughts on “Morris.JS Chart in an MVC Application

  1. Great simplification.

    Can the x-axis always be date & time, can’t have anything else like in cities temperature, where x-axis has city names and y-axis has actual temperatures?

    Like

  2. This is how I passed data from the model to the chart. The model has a list of Chart Data.

    public class ChartData
    {
    public string label { get; set; }
    public int value { get; set; }
    }

    $(document).ready(function () {
    var model = @Html.Raw(Json.Serialize(Model.ChartData));
    Morris.Donut({
    element: ‘morris-donut-chart’,
    data: model,
    resize: true
    });
    });

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s