Category: Information Technology

Various IT related article

Posted on

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”>

<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>*@

<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

[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();
}

Posted on

Morris chart to fetch data from a local JSON file

http://stackoverflow.com/questions/21797450/morris-chart-to-fetch-data-from-a-local-json-file

I am trying to create a morris donut chart. I have modified it to get data from a local json file, but for some reason it doesnt load the chart.No error in the console also.

Here is the html file

<meta charset=utf-8 />
<title>Morris.js Donut Chart Example</title>
</head>
<body onLoad="drawChart()">
<div id="donut-example"></div>
</body>

<script>
      function drawChart() {
      var jsonData = $.getJSON("data.json", function(json) {
    console.log(json); // show the info in console
});
        Morris.Donut({
              element: 'donut-example',
              data: jsonData
            });
      }
</script>
</html>

And here is my data.json file

  [ {label: "Download Sales", value: 12},     {label: "In-Store Sales", value: 30},     {label: "In-Store Sales", value: 25},     {label: "Mail-Order Sales", value: 20} ]

Depends on your data conversion on server side you maybe parse it to json array again;

For example;

function drawChart() {
        $.getJSON('@Url.Action("GetJsonData", "Home")',
           function (data) {
               Morris.Donut({
                   element: 'donut-example',
                   data: JSON.parse(data),
                   formatter: function (x) { return x + "%" }
               });
           }
        );
    }