Tag: Morris Chart

Posted on

JasonP Implementaion on MVC Controller

 

Please use following link for reference.

 

http://www.snu.net/index.php/2016/11/07/an-asp-net-mvc-jsonp-actionresult-nik-codes/

 

Create this controller code:

JsonpResult.cs

Code Snippet
  1. using System;
  2. using System.Text;
  3. using System.Web;
  4. using System.Web.Mvc;
  5. using System.Web.Script.Serialization;
  6.  
  7. namespace TelerikMvcApp1.Controllers
  8. {
  9.     public class JsonpResult :ActionResult
  10.     {
  11.         public string CallbackFunction { get; set; }
  12.         public Encoding ContentEncoding { get; set; }
  13.         public string ContentType { get; set; }
  14.         public object Data { get; set; }
  15.  
  16.         public JsonpResult(object data) : this(data, null) { }
  17.         public JsonpResult(object data, string callbackFunction)
  18.         {
  19.             Data = data;
  20.             CallbackFunction = callbackFunction;
  21.         }
  22.  
  23.         public override void ExecuteResult(ControllerContext context)
  24.         {
  25.             if (context == null) throw new ArgumentNullException("context");
  26.  
  27.             HttpResponseBase response = context.HttpContext.Response;
  28.  
  29.             response.ContentType = string.IsNullOrEmpty(ContentType) ? "application/x-javascript" : ContentType;
  30.  
  31.             if (ContentEncoding != null) response.ContentEncoding = ContentEncoding;
  32.  
  33.             if (Data != null)
  34.             {
  35.                 HttpRequestBase request = context.HttpContext.Request;
  36.  
  37.                 var callback = CallbackFunction ?? request.Params["callback"] ?? "callback";
  38.  
  39. #pragma warning disable 0618 // JavaScriptSerializer is no longer obsolete
  40.                 var serializer = new JavaScriptSerializer();
  41.                 response.Write(string.Format("{0}({1});", callback, serializer.Serialize(Data)));
  42. #pragma warning restore 0618
  43.             }
  44.         }
  45.     }
  46. }

Use the above controller code as shown below:

Code Snippet
  1.  
  2. public ActionResult UsageJasonP()
  3. {
  4.     db.Configuration.LazyLoadingEnabled = false;
  5.     db.Configuration.ProxyCreationEnabled = false;
  6.     var waterusages = db.WaterUsages;
  7.  
  8.     //return Json(waterusages, JsonRequestBehavior.AllowGet);
  9.     return new JsonpResult(waterusages,"receive");
  10. }

Below is modified Ajax Call from

 

   1: var url = "http://localhost:15214/water/UsageJasonP?callback=?";

   2: $.ajax({

   3:     url: url, dataType: "jsonp", jsonpCallback: "receive", callback: "receive",

   4:     success: function (data, status) {

   5:         //mySurvey.closePopup();

   6:         alert("Success");

   7:         console.log(data);

   8:     },

   9:     error: function (xOptions, textStatus) {

  10:         alert("fails");

  11:     }

  12: });

Now using the above call, you can draw Morris Charts.

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