tgriffiths tgriffiths - 6 months ago 78
Javascript Question

Pass Json Data To MVC Razor View

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

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.
}