working with strongly typed data in Javascript

I'm using asp.net with Razor I have a controller that returns return View(db.sales.ToList());

my model is

   public class sales
{
    public int ID { get; set; }
    public string month { get; set; }
    public int sale {get;set;}
}

My view gets

@model IEnumerable<salesmonths.Models.sales>

i'm creating a chart using Javascript how to extract the months into a string table and the sales into an int table

and this is the chart script

<script>

    var barChartData = {
        labels : ["January"],/// i want to place the month table here
        datasets : [

            {
                fillColor : "rgba(151,187,205,0.5)",
                strokeColor : "rgba(151,187,205,1)",
                data : [28,48,40,19,96,27,100] /// and the sale table here
            }
        ]

    }

var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Bar(barChartData);

</script>

Answers


You may make an ajax call once you page finishes loading to your controller action method to get the data in JSON format and use that to build the chart. Most chart libraries accept JSON format data as input to draw the chart.

$(function(){

  $.getJSON("@Url.Action("Sales","Home")",function(response){
    //JSON data is in "response" variable now.
  });

});

Assuming your Action method returns JSON representation when the call is from an ajax request. You may use the Request.IsAjaxRequest method to determine whether the request is coming from an ajax request or a normal http request.

public ActionResult Sales()
{
   var saleListVM=new List<salesmonths.Models.Sales>();
   // to do :Load data to the list
   if(Request.IsAjaxRequest())
   {
      return Json(saleListVM,JsonRequestBehaviour.AllowGet);
   }
   //not an ajax request- let's return the view model the normal view
   return View(saleListVM);
}

So this action method will return a JSON representation of your data like below one when being called with an ajax request.

[
    {     "ID": 0, "month": "Jan", "sale": 134   },
    {     "ID": 0, "month": "FEb", "sale": 534   }
]

Now in your getJSON method's call back, you may loop through the items in the array and set that to the "options" of the chart. $(function () {

    $.getJSON("@Url.Action("Sales","Home")", function (response) {
        var salesLabels = [];
        var salesData = [];

        //Let's loop through the items in array and add to our temp array

        $.each(response, function (index, item) {
            salesLabels.push(item.month);
            salesData.push(item.sale);
        });

        var barChartData = {
                labels: salesLabels,
                datasets: [
                            {
                                fillColor: "rgba(151,187,205,0.5)",
                                strokeColor: "rgba(151,187,205,1)",
                                data: salesData
                            }
                        ]
                    };

       var myLine=new Chart(document.getElementById("canvas").getContext("2d"))
                                                         .Bar(barChartData);


    });

});
</script>

Need Your Help

How could I make this code shorter?

excel vba

How can I make this code shorter?