For multi line chart in MVC using chart.js (dynamic)
Create a Class LabelPoint, Reference your X and Y points on the graph
so the data looks something like this [ { Label : "ABC" , DataPoint :[ { X: '222' , Y :60 } ] } ]
It will be an array of object, in that object there will be an array of object.
[DataContract]
public class LabelPoint
{
[DataMember(Name = "label")]
public string Label { get; set; }
public DataPoint DataPoint { get; set; }
}
[DataContract]
public class DataPoint
{
[DataMember(Name = "x")]
public List<string> X { get; set; }
[DataMember(Name = "y")]
public List<string> Y { get; set; }
}
Controller Code
List dataPoints = detailIM
.GroupBy(p => p.Product,
(k, c) => new LabelPoint()
{
DataPoint = new DataPoint { X = c.Select(y =>
y.Quantity).ToList(), Y = c.Select(cs => cs.Date).ToList() },
Label = k
}
).ToList();
ViewBag.DataPoints = dataPoints;
on your cshtml, retrieve the values
var data = @Html.Raw(Json.Encode(ViewBag.DataPoints));
var dataSet = []; var qty= []; var dates= [];
for (var i = 0; i < data.length; i++) {
qty.push(data[i].DataPoint.Y);
for (var d = 0; d < data[i].DataPoint.X.length; d++) {
dates.push(data[i].DataPoint.X[d]);
}
dataSet.push(
{
label: data[i].Label,
data: data[i].DataPoint.Y,
fill: false,
borderColor: poolColors(qty.length),
pointBorderColor: "black",
pointBackgroundColor: "white",
lineTension: 0.1
}
);
}
var options = {
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: "Date",
fontSize: 20
},
}],
yAxes: [{
ticks: {
beginAtZero:true
},
scaleLabel: {
display: true,
labelString: 'Quantity',
fontSize: 20
}
}]
}
};
var uniq = [ ...new Set(dates) ];
<canvas id="myChart"></canvas>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: uniq,
datasets:dataSet
},
options: options
});
function dynamicColors() {
var r = Math.floor(Math.random() * 255);
var g = Math.floor(Math.random() * 255);
var b = Math.floor(Math.random() * 255);
return "rgba(" + r + "," + g + "," + b + ", 0.5)";
}
function poolColors(a) {
var pool = [];
for(i = 0; i < a; i++) {
pool.push(dynamicColors());
}
return pool;
}