This is how the view might look
@model wapitest.Models.ChartData
<!doctype html>
@{
ViewBag.Title = "Index";
Layout = null;
}
<html>
<head>
<title>Line Chart</title>
<script src="~/Scripts/Chart.js"></script>
</head>
<body>
@Model.title
<div style="width:30%">
<div>
<canvas id="canvas" height="450" width="600"></canvas>
</div>
</div>
<script>
var lineChartData = {
labels : @Html.Raw(Model.label) ,
datasets : [
{
label: "D1",
fillColor : "rgba(220,220,220,0.2)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(220,220,220,1)",
data : @Model.data
},
{
label: "D2",
fillColor : "rgba(151,187,205,0.2)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(151,187,205,1)",
data : [7,6,5,4,3,2,1]
}
]
}
window.onload = function(){
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData, {
responsive: true
});
}
</script>
</body>
</html>
This is the model
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace wapitest.Models
{
public class ChartData
{
public string label { get; set; }
public string data { get; set; }
public string title { get; set; }
}
}
And this is the controller function
public ActionResult Chart()
{
ViewBag.Title = "Line chart";
ChartData cd = new ChartData();
cd.title = "Chart Title";
cd.data = "[1,5,10,15,5,4,3]";
cd.label = @"[""mon"", ""tue"", ""wed"", ""thu"", ""fri"", ""sat"", ""sun""]";
return View(cd);
}
Kind of lost where you have data: @Model.data....what is .data??
ReplyDeletedata is
DeleteChartData cd = new ChartData();
cd.title = "Chart Title";
cd.data = "[1,5,10,15,5,4,3]";
cd.label = @"[""mon"", ""tue"", ""wed"", ""thu"", ""fri"", ""sat"", ""sun""]";
as per the controller function
Sorry for the late reply, only just saw your comment and work has been busy for the last few months