ASP. NET Core MVC Problem creating Chart.js Using data from SQL Server - asp.net-core-mvc

Question

I am trying to create a Chart.js from data I am getting from a SQL Table in ASP.NET Core MVC. I am successfully receiving the data, because I tested printing it as a table on the website and it worked. The problem is I am not being able to display the same data in a Chart.js
HomeModel.cs:
namespace SiteFinanceiroGG.Models
{
public class TickerCadastral
{
//...
}
[Keyless]
public class TickerCotacoes
{
public string CodigoNegociacao { get; set; }
[DataType(DataType.Date)]
public DateTime DataPregao { get; set; }
public string Moeda { get; set; }
[Column(TypeName = "decimal(13,2)")]
public double PrecoMin { get; set; }
[Column(TypeName = "decimal(13,2)")]
public double PrecoMax { get; set; }
[Column(TypeName = "decimal(13,2)")]
public double PrecoUltimoNegocio { get; set; }
}
public class TickerMultipleModel
{
public List<TickerCadastral> tickerCadastral { get; set; }
public List<TickerCotacoes> tickerCotacoes { get; set; }
}
}
MyDbContex.cs:
namespace SiteFinanceiroGG.Data
{
public class MyDbContext : DbContext
{
public MyDbContext (DbContextOptions<MyDbContext> options)
: base(options)
{
}
public DbSet<TickerCadastral> TickerCadastral { get; set; }
public DbSet<TickerCotacoes> TickerCotacoes { get; set; }
}
}
HomeController.cs:
namespace SiteFinanceiroGG.Controllers
{
public class HomeController : Controller
{
private readonly MyDbContext _context;
public HomeController(MyDbContext context)
{
_context = context;
}
public IActionResult Index()
{
return View();
}
public async Task<IActionResult> Acoes(string searchString)
{
if (searchString == null)
{
return View();
}
else
{
TickerMultipleModel tickerMultipleModel = new TickerMultipleModel();
tickerMultipleModel.tickerCadastral = await _context.TickerCadastral.Where(m => m.CodigoNegociacao == searchString).ToListAsync();
tickerMultipleModel.tickerCotacoes = await _context.TickerCotacoes.Where(m => m.CodigoNegociacao == searchString)
.OrderBy(m=>m.DataPregao).ToListAsync();
return View(tickerMultipleModel);
}
}
}
}
Acoes.cshtml (table works, but the chart doesn't show up):
#model SiteFinanceiroGG.Models.TickerMultipleModel
#{
ViewData["Title"] = "Ações";
}
<h2>Ações</h2>
#using (Html.BeginForm("Acoes", "Home", FormMethod.Get))
{
#Html.TextBox("searchString");
<input type="submit" value="Pesquisar" placeholder="Buscar Ações" />
}
#if (Model != null)
{
<div>
<canvas id="myChart" width="600" height="400"></canvas>
</div>
<table class="table">
<tbody>
<tr>
<th>#Html.DisplayNameFor(model => model.tickerCotacoes[0].DataPregao)</th>
<th>#Html.DisplayNameFor(model => model.tickerCotacoes[0].CodigoNegociacao)</th>
<th>#Html.DisplayNameFor(model => model.tickerCotacoes[0].Moeda)</th>
<th>#Html.DisplayNameFor(model => model.tickerCotacoes[0].PrecoMin)</th>
<th>#Html.DisplayNameFor(model => model.tickerCotacoes[0].PrecoMax)</th>
<th>#Html.DisplayNameFor(model => model.tickerCotacoes[0].PrecoUltimoNegocio)</th>
</tr>
#foreach (var item in Model.tickerCotacoes)
{
<tr>
<td>#item.DataPregao</td>
<td>#item.CodigoNegociacao</td>
<td>#item.Moeda</td>
<td>#item.PrecoMin</td>
<td>#item.PrecoMax</td>
<td>#item.PrecoUltimoNegocio</td>
</tr>
}
</tbody>
</table>
}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('myChart');
var DataPregao = [];
var PrecoUltimoNegocio=[];
#if (Model != null)
{
#foreach(var item in Model.tickerCotacoes)
{
#:DataPregao.push(#item.DataPregao);
#:PrecoUltimoNegocio.push(Convert.ToDecimal(#item.PrecoUltimoNegocio));
}
}
new Chart(ctx, {
type: 'line',
data: {
labels: DataPregao,
datasets: [{
label: '# of Votes',
data: PrecoUltimoNegocio,
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>

Answer 1

Modify your js code below:
#if (Model != null)
{
#foreach (var item in Model.tickerCotacoes)
{
#:DataPregao.push('#item.DataPregao'); //add '' surround the #item.DataPregao
//add # before Convert
#:PrecoUltimoNegocio.push(#Convert.ToDecimal(#item.PrecoUltimoNegocio));
}
}