tgriffiths tgriffiths - 8 months ago 88
Javascript Question

Pass Json Data To MVC Razor View

I'm using JQuery Flot Charts within my MVC 5 application. I wish to create horizontal bar charts, and this tutorial is helpful

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
variable using an Ajax call in my MVC Razor View which calls a Controller Action which returns Json (see below).

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

I suppose what I need to know is, can I return from my Controller Action two sets of data, one for the
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
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.



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.