Question

I am trying to use jq plot to plot a bar graph off car rentals per day so – the x-axis will contain Dates and then two bars – Rented/Not Rented. I currently get this back to a List in my controller. If I set a breakpoint I can see the data is returned and at the minute there is a count of 4 in the list (the max will be 10 ever as a Take(10) is done to on my Linq query to the DB.

So I can see the below as an example of a row in my List

Date         Rented   Not Rented
18/02/2013   100      200

The javascript for jq plot is below just with hard coded values to see if it displays which it does so what I want to try and get now is the values in S1 Replaced with each of my Rented Value from my list and the values in s2 replaced with my not rented and then the Ticks replaced with the corresponding date for that row

//s1 = Rented Values
//s2 = Not Rented Values
var s1 = [200, 600, 700, 1000];
var s2 = [460, 210, 690, 820];
// Can specify a custom tick Array.
// Ticks should match up one for each y value (category) in the series.
var ticks = ['Date', 'Date', 'Date', 'Date'];

I was looking for ideally something like a Hidden For on my cshtml page that would contain the List of results and somehow get access to this in JS? is that possible?

Answer 1

As always start by defining a view model:

public class MyViewModel
{
    public int Rented { get; set; }
    public int NotRented { get; set; }
    public DateTime Date { get; set; }
}

and then have your controller action query your backend and populate this view model:

public ActionResult SomeAction()
{
    IEnumerable<MyViewModel> model = ... go query your backend
    return View(model);
}

and finally in your strongly typed view:

@model IEnumerable<MyViewModel>
...
<script type="text/javascript">
    var s1 = @Html.Raw(Json.Encode(Model.Select(x => x.Rented)));
    var s2 = @Html.Raw(Json.Encode(Model.Select(x => x.NotRented)));
    var ticks = @Html.Raw(Json.Encode(Model.Select(x => x.Date.ToString("dd/MM/yyyy"))));

    // Now that you have the 3 arrays plot them up.
</script>