What's new

Closed MVC5 - Javscript: How to return Array with quoted elements into ChartJS label

Status
Not open for further replies.

1nn0c3ntv5

Honorary Poster
Joined
Feb 10, 2020
Posts
143
Reaction
215
Points
133
Age
25
PROBLEM: nag re-return siya ng walang quotes
[Land Pollution, Water Pollution]

DESIRED SOLUTION: mag re-return dapat ng may quotes
["Land Pollution", "Water Pollution"]

SYNTAX:
IDataProvider
public interface IDataProvider
{
void EnvironmentalConcernsChart(out string EnvironmentalConcernCountList, out string EnvironmentalConcernList);
}

DataProvider

public void EnvironmentalConcernsChart(out string EnvironmentalConcernCountList, out string EnvironmentalConcernList)
{

using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings[CONNECTION].ToString()))
{
var query = con.Query<CHART_UserInformation>("CHART_EnvironmentalConcern", null, null, true, 0, CommandType.StoredProcedure).ToList();

var EnvironmentalConcernCount = (from temp in query
select temp.Number).ToList();

var EnvironmentalConcern = (from temp in query
select temp.Description).ToList();

EnvironmentalConcernCountList = string.Join(",", EnvironmentalConcernCount);
EnvironmentalConcernList = string.Join(",", EnvironmentalConcern);
}
}

DataGetController
public ActionResult BarChart()
{
try
{
string tempEnvironmentalConcernCount = string.Empty;
string tempEnvironmentalConcern = string.Empty;
_IDataProvider.EnvironmentalConcernsChart(out tempEnvironmentalConcernCount, out tempEnvironmentalConcern);
ViewBag.ECCount = tempEnvironmentalConcernCount.Trim();
//ViewBag.ECName = Newtonsoft.Json.JsonConvert.SerializeObject(tempEnvironmentalConcern);
ViewBag.ECName = tempEnvironmentalConcern.Trim();
return View();
}
catch (Exception)
{
throw;
}
}

CSHTML
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Charts</title>
<script src="You do not have permission to view the full content of this post. Log in or register now."></script>
<script>
var barChartData =
{

//labels: [@Html.Raw(ViewBag.ECName)],
labels: [@Html.Raw(ViewBag.ECName)],
datasets: [
{
label: 'Var X',
backgroundColor:
[
"#99e5e5",
"#f7bd83",
],
borderWidth: 2,
data: [@ViewBag.ECCount]
},
{
label: 'Var Y',
backgroundColor:
[
"#99e5e5",
"#f7bd83",
],
borderWidth: 2,
data: [@ViewBag.ECCount+1]
}
]
};

window.onload = function () {
var ctx1 = document.getElementById("barcanvas").getContext("2d");
window.myBar = new Chart(ctx1,
{
type: 'horizontalBar',
data: barChartData,
options:
{
scales: {
xAxes: [{
ticks: {
beginAtZero: true,
min: 0
}
}]
},
title:
{
display: true,
text: "Number of Environmental Concerns per Category 2020"
},
responsive: true,
maintainAspectRatio: true
}
});
}
</script>
</head>
<body>
<div style="text-align: center">
<canvas id="barcanvas"></canvas>
</div>
<div style="text-align: center">
Disclaimer:- This data is for demo it is
not real data it wont relate to any company
</div>
</body>

</html>
 
Yung nirereturn ng @Html.Raw(ViewBag.ECName) ay [Land Pollution, Water Pollution] kaya ayaw mag display ng chart

Dapat ["Land Pollution","Water Pollution"]
 
Nakalimutan ko i-update itong thread na'to, na solve ko na po by means of quoting the data from the dataprovider
 
Status
Not open for further replies.

Similar threads

Back
Top