How to bind MVC data to Plotly

I'm attempting to bind JSON data to a Plotly graph in MVC. Console is empty and the graph isn't displaying at all. I'm open to alternate methods of doing this.

I have an MVC model:

public class DataUploadModels

[Key]
public int id get; set;
public string Empname get; set;
public string Empid get; set;
public string Title get; set;
public decimal Annualizedbase get; set;
public decimal Annualizedtcc get; set;
public decimal grade get; set;



It has some sample data which I'm returning to a view in JSON:

public ActionResult Plotly()

List<DataUploadModels> list = db.DataUploadModels.ToList();
ViewBag.jsondata = this.Json(list);

return View();



And I'm trying to create a simple plot of it in my view:

<div id="tester" style="width:600px;height:250px;"></div>
<script>
array = @Json.Encode(ViewBag.jsondata)
xs = ;
for (i = 1, i < 3, i++)
xs += array.Data[i].Title;
;
ys = ;
for (i = 1, i < 3, i++)
ys += array.Data[i].Annualizedbase;
;
TESTER = document.getElementById('tester');
Plotly.plot( TESTER, [
x: xs,
y: ys ],
margin: t: 0 );
</script>


Plotly is included in the _Layout.cshtml file and was working with hard-coded data.

x

x += array.Data[i].Title;

xs

x: xs

x: [xs]

for (i = 1, i < 3, i++) xs.push( array.Data[i].Title);

array = @Html.Raw(Json.Encode(ViewBag.jsondata))

1 Answer
1

To assign your ViewBag property to a javascript array, use

ViewBag

var array = @Html.Raw(Json.Encode(ViewBag.jsondata))


and then in the for loops you need to .push() the value into your xs and ys arrays

for

.push()

xs

ys

var array = @Html.Raw(Json.Encode(ViewBag.jsondata))
xs = ;
for (i = 1, i < 3, i++)
xs += array.push(Data[i].Title);
;
ys = ;
for (i = 1, i < 3, i++)
ys += array.push(Data[i].Annualizedbase);
;


Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.