Incorrect display of Morris Area chart and missing x-axis data - morris.js

Question

I would like to know if someone can point me to the right direction. I have a View query named 'VwDashBoard_Areachart' that contains the following five fields with some information from the MSSQL server:
+-----+------+-----+-----+-----+
| ID | Year | OC | SS | ST |
+-----+------+-----+-----+-----+
| 1 | 2017 | 1 | 1 | 3 |
| 2 | 2018 | 1 | 1 | 2 |
| 3 | 2019 | 1 | 1 | 2 |
+-----+------+-----+-----+-----+
and I would like to present the data in the Morris Area Chart. I have the following code in the controller below:
public ActionResult AreaChart()
{
var mc = from mon in db.VwDashBoard_Areachart
select new
{
year = mon.Year,
value = mon.SS,
value1 = mon.OC,
value2 = mon.ST,
};
return Json(mc, JsonRequestBehavior.AllowGet);
}
And here's my script:
$(document).ready(function () {
$.get('#Url.Action("AreaChart")', function (result) {
new Morris.Area({
// ID of the element in which to draw the chart.
element: 'morris-area-charts',//'myfirstchart',
data: result,
xkey: 'year',
ykeys: ['value', 'value1', 'value2'],
labels: ['OC', 'SS', 'ST'],
pointFillColors: ['#ffffff'],
lineColors: ['#ccc', '#7a6fbe', '#28bbe3'],
redraw: true,
lineWidth: [1, 1, 1],
pointSize: 1,
});
});
});
This is the code from the razor:
<div class="panel-body">
<div id="morris-area-charts"></div>
</div>
Now when I run the script, it displays the Area chart but the chart display looks incorrect and does not display the year on the x-axis. However, the same result looks good if I display the chart as a bar chart.
I was wondering if I have forget to include something in the script or controller or the presentation of data layout from the View query needs to be modified in order to display the Area chart correctly.
I have tried putting in some static data and the Area chart displays correctly. The issue is when I am trying to fetch data from database. Any help would be really appreciated.

Answer 1

Your code looks good. Set the parseTime parameter to false to avoid Morris interpreting dates:
parseTime: false
Please try the following snippet based on your data:
var result = [
{ "year": "2017", "value": 1, "value1": 1, "value2": 3 },
{ "year": "2018", "value": 1, "value1": 1, "value2": 2 },
{ "year": "2019", "value": 1, "value1": 1, "value2": 2 }
];
new Morris.Area({
element: 'morris-area-charts',
data: result,
xkey: 'year',
ykeys: ['value', 'value1', 'value2'],
labels: ['OC', 'SS', 'ST'],
pointFillColors: ['#ffffff'],
lineColors: ['#ccc', '#7a6fbe', '#28bbe3'],
redraw: true,
lineWidth: [1, 1, 1],
pointSize: 1,
parseTime: false
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css" rel="stylesheet" />
<div class="panel-body">
<div id="morris-area-charts"></div>
</div>