I'm implementing asp.net core project. In the razor view my code is like the following:
In a div tag, I call PieChartShow(XLabels,YValues,piechart); and i want to pass XLabels, YValues and piechart as the input parameters of PieChartShow javascript function and the third parameter "piechart" is the related canvas id. But now my problem is myXLabels is unknown inside the block of data in the function PieChartShow. I appreciate if anyone suggests me how I can pass XLabels and YValues into PieChartShow function.
What I have tried:
@using System.Linq;
@model CSDDashboard.TempClasses.ChartListObjects
@{
var XLabels = Newtonsoft.Json.JsonConvert.SerializeObject(Model.TotalReqStatus.Select(i => i.DimensionOne).ToList());
var YValues = Newtonsoft.Json.JsonConvert.SerializeObject(Model.TotalReqStatus.Select(i => i.Quantity).ToList());
ViewData["Title"] = "Pie Chart";
var XLabels1 = Newtonsoft.Json.JsonConvert.SerializeObject(Model.GrantedTimeAvg.Select(i => i.DimensionOne).ToList());
var YValues1 = Newtonsoft.Json.JsonConvert.SerializeObject(Model.GrantedTimeAvg.Select(i => i.Quantity).ToList());
ViewData["Title"] = "Line Chart";
var XLabels2 = Newtonsoft.Json.JsonConvert.SerializeObject(Model.GrantedPercent.Select(i => i.DimensionOne).ToList());
var YValues2 = Newtonsoft.Json.JsonConvert.SerializeObject(Model.GrantedPercent.Select(i => i.Quantity).ToList());
ViewData["Title"] = "Line Chart";
var XLabels3 = Newtonsoft.Json.JsonConvert.SerializeObject(Model.GrantedApiToApplicantAvg.Select(i => i.DimensionOne).ToList());
var YValues3 = Newtonsoft.Json.JsonConvert.SerializeObject(Model.GrantedApiToApplicantAvg.Select(i => i.Quantity).ToList());
ViewData["Title"] = "Line Chart";
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
@**@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
html, body, h1, h2, h3, h4, h5 {
font-family: "Raleway", sans-serif
}
</style>
</head>
<body>
<canvas id="piechart" style="width:100%; height:500px"></canvas>
<canvas id="linechart1" style="width:100%; height:500px"></canvas>
<canvas id="linechart2" style="width:100%; height:500px"></canvas>
<canvas id="linechart3" style="width:100%; height:500px"></canvas>
<div class="container" style="width:100%; height:500px">
<div class="row">
</div>
<div class="col-3">
@*style="width:30%">*@
<!-- pie chart -->
<script type="text/javascript">
@*Pie chart eliminated*@
PieChartShow(XLabels,YValues,piechart);
</script>
<!--cell 4 row 1-->
</div>
</div>
<div class="row">
<div class="col-4">
<!-- line chart -->
<script type="text/javascript">
LineChartShow(XLabels1, YLabels1,linechart1);
</script>
<!--cell 1 row 2-->
</div>
<div class="col-4">
<!-- line chart -->
<script type="text/javascript">
LineChartShow(XLabels2, YLabels2,linechart2);
</script>
<!--cell2 row 2-->
</div>
<div class="col-4">
<!-- line chart -->
<script type="text/javascript">
LineChartShow(XLabels3, YLabels3,,linechart3);
</script>
<!--cell3 row3-->
</div>
</div>
</div>
</body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
var PieChartShow =
$(function () {
Here is where I have problem in getting arguments[0]
var myXLabels = arguments[0];
var YYalues = arguments[1];
var chartName = arguments[2];
var ctx = document.getElementById(chartName).getContext('2d');
var data = {
labels: @Html.Raw(myXLabels),
datasets: [{
label: "API Charts",
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 0, 0)',
'rgba(0, 255, 0)',
'rgba(0, 0, 255)',
'rgba(192, 192, 192)',
'rgba(255, 255, 0)',
'rgba(255, 0, 255)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 0, 0)',
'rgba(0, 255, 0)',
'rgba(0, 0, 255)',
'rgba(192, 192, 192)',
'rgba(255, 255, 0)',
'rgba(255, 0, 255)'
],
borderWidth: 1,
data: @Html.Raw(YValues)
}]
};
var options = {
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
min: 0,
beginAtZero: true
},
gridLines: {
display: true,
color: "rgba(255,99,164,0.2)"
}
}],
xAxes: [{
ticks: {
min: 0,
beginAtZero: true
},
gridLines: {
display: false
}
}]
}
};
var myChart = new Chart(ctx, {
options: options,
data: data,
type:'pie'
});
});
@**@
var LineChartShow = $(function () {
var chartName = arguments[2];
var ctx = document.getElementById(chartName).getContext('2d');
var data = {
labels: @Html.Raw(arguments[0]),
@*labels: @Html.Raw(),*@
@*labels: @Html.Raw(),*@
datasets: [{
label: "API Charts",
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 0, 0)',
'rgba(0, 255, 0)',
'rgba(0, 0, 255)',
'rgba(192, 192, 192)',
'rgba(255, 255, 0)',
'rgba(255, 0, 255)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 0, 0)',
'rgba(0, 255, 0)',
'rgba(0, 0, 255)',
'rgba(192, 192, 192)',
'rgba(255, 255, 0)',
'rgba(255, 0, 255)'
],
borderWidth: 1,
data: @Html.Raw(YValues1)
}]
};
var options = {
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
min: 0,
beginAtZero: true
},
gridLines: {
display: true,
color: "rgba(255,99,164,0.2)"
}
}],
xAxes: [{
ticks: {
min: 0,
beginAtZero: true
},
gridLines: {
display: false
}
}]
}
};
var myChart = new Chart(ctx, {
options: options,
data: data,
type: 'line'
});
});
</script>
Submit an article or tip