Pass Json Data To MVC Razor View

Question

I'm using JQuery Flot Charts http://www.flotcharts.org/ within my MVC 5 application. I wish to create horizontal bar charts, and this tutorial is helpful http://www.jqueryflottutorial.com/how-to-make-jquery-flot-horizontal-bar-chart.html

The following 3 lines of code pass in the data that the chart plugin uses to create the chart

var rawData = [[1582.3, 0], [28.95, 1], [1603, 2], [774, 3], [1245, 4], [85, 5], [1025, 6]];
var dataSet = [{ label: "Precious Metal Price", data: rawData, color: "#E8E800" }];
var ticks = [[0, "Gold"], [1, "Silver"], [2, "Platinum"], [3, "Palldium"], [4, "Rhodium"], [5, "Ruthenium"], [6, "Iridium"]];

My charts however, can not use hard coded values like this above, and instead the data passed into my chart needs to be dynamic. I can pass data into the rowData variable using an Ajax call in my MVC Razor View which calls a Controller Action which returns Json (see below).

$.ajax({
            type: "GET",
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            url: '/Statistics/GetTestData/',
            error: function () {
                alert("An error occurred.");
            },
            success: function (data) {

            var rawData = [data];
            }

});

My problem is how can I also pass the data from my Controller Action into the ticks variable?

I suppose what I need to know is, can I return from my Controller Action two sets of data, one for the rawData variable in the format of

[[1582.3, 0], [28.95, 1], [1603, 2], [774, 3], [1245, 4], [85, 5], [1025, 6]]

and, secondly for the ticks variable in the format of

[[0, "Gold"], [1, "Silver"], [2, "Platinum"], [3, "Palldium"], [4, "Rhodium"], [5, "Ruthenium"], [6, "Iridium"]]

Hopefully this makes sense.

Any feedback or advice would be greatly appreciated.

Thanks.

Answer 1

can I return from my Controller Action two sets of data

Of course, as a composite model. The action returns only one thing, but that thing can be a model which has more than one property on it. I don't know your object structure, but a contrived model might look like:

public class ChartViewModel
{
    public RawDataModel RawData { get; set; }
    public TicksModel Ticks { get; set; }
}

Then your controller action would just return an instance of that:

var model = new ChartViewModel
{
    RawData = GetRawData(),
    Ticks = GetTicks()
};
return Json(model);

This composite model then becomes a convenient place to include other properties or behavior which might be needed by other client-side code or other views related to this one.

Then in your client-side code you would set the values based on those properties:

success: function (data) {
    var rawData = data.RawData;
    var ticks = data.Ticks;
    // etc.
}

Answer 2

You need controller code like that

public JsonResult SomeController()
{
  var rawData = rawEnumerable.Select(x => new[] { x.First, x.Second }).ToArray();
  var ticks = ticksEnumerable.Select(x => new[] { x.First, x.Second }).ToArray();
  retu Json(new{ Ticks = ticks ,RawData = rawData });
}

Answer 3

You can also double wrap it in list (List<List<object>>) and return it - will map just fine to flot.

Example:

var grouped =
result.GroupBy(o => o.USER_ID).Select(agent => new
{
    data = new List<List<object>>
    {
        new List<object>
        {
            agent.Key,
            agent.Count()
        }
    },
    color = "#84d455"
}).ToList();

return Json(grouped, JsonRequestBehavior.AllowGet);

then in JS:

function onCancellationAgentsReceived(series) {
        $("#agentcancellations").empty();
        $.plot("#agentcancellations", series, {
            bars: { show: true, barWidth: 0.7, align: "center" }, xaxis: {mode: "categories", tickLength: 0, position: "bottom"}});
    }