Tenho um gráfico do Google Charts que funciona perfeitamente trazendo os dados do banco através do ajax, porém tentei fazer o mesmo com o Charts.js e não consigo. Gostaria de saber como eu faço para colocar dados reais no gráfico do Charts.js aproveitando as minhas function get já criadas para o outro gráfico.
// ESTA E A FUNCTION DO GRAFICO GOOGLE CHARTS QUE FUNCIONA, COM AS "CONST" TRAZENDO OS DADOS
async function drawChart15() {
const qtndVitimas = await GetQuantidadeVitimas()
const qtndAutores = await GetQuantidadeAutor()
const container = document.querySelector('#graficoGoogle16')
const data = new google.visualization.arrayToDataTable([
['Legendas', 'Abril', 'Agosto', "Setembro", "Novembro", "Dezembro"],
[qtndVitimas, qtndVitimas, qtndAutores, qtndVitimas, qtndAutores, qtndVitimas],
])
const options = {
height: 250,
width: 500
}
const chart = new google.visualization.ColumnChart(container)
chart.draw(data, options)
}
Agora vou mostrar as duas function que eu criei para puxarem os dados pelo ajax.
// AMBAS FUNCTION ESTÃO TRAZENDO OS DADOS CORRETAMENTE
async function GetQuantidadeVitimas() {
let qtnd_vitimas = 0
const url = `/Vitima/AjaxQuantidadeVitimas`
try {
const resposta = await fetch(url);
const resultado = await resposta.json();
qtnd_vitimas = resultado
} catch (e) {
console.error(e);
}
return qtnd_vitimas;
}
async function GetQuantidadeAutor() {
let qntd_Autores = 0
const url = `/Autor/AjaxQuantidadeAutores`
try {
const resposta = await fetch(url);
const resultado = await resposta.json();
qntd_Autores = resultado
} catch (e) {
console.error(e);
}
return qntd_Autores;
}
Essas duas funções retornam a quantidade de vitimas e autores cadastrados no banco de dados. Irei mostrar o passo a passo do GetNumeroVitimas().
//aqui pegando os dados do banco
public int GetNumeroVitimas()
{
using (IDbConnection cn = ConnectionAnaliseCriminal)
{
try
{
cn.Open();
string query = "SELECT COUNT(TP_VITIMA.COD_VITIMA)"
+ " FROM [dbo].[TP_VITIMA] "
+ " WHERE TP_VITIMA.[DT_EXCLUSAO_LOGICA] IS NULL ";
return cn.Query<int>(query).SingleOrDefault();
}
finally
{
cn.Close();
}
}
}
//Passa pela ControllerBase
protected int NumeroVitimas(int codFormulario) => new VitimaDados().GetNumeroVitimas(GetCodCrimeByCodFormulario(codFormulario));
// dps a "VitimaController onde e add a viewbag e o ajax
ViewBag.NumeroVitimas = NumeroVitimas(codFormulario);
[HttpGet]
public JsonResult AjaxQuantidadeVitimas()
{
return Json(new VitimaDados().GetNumeroVitimas());
}
Agora eu queria fazer a mesma coisa com o gráfico do Charts.js para mostrar os dados reais vindo do banco porém não estou conseguindo. Alguém sabe como resolver?
// SCRIPT PURO DO CHARTS.JS PORÉM EU QUERO INSERIR NA "DATA" OS MEUS DADOS VINDO DO BANCO PELO AJAX, ASSIM COMO FIZ NO OUTRO GRÁFICO, PORÉM NÃO ESTOU CONSEGUINDO
var ctx = document.getElementById('myChart');
var chart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: 'titulo grafico',
data: [1, 2, 3, 4, 5, 6],
borderColor: 'rgba(77,166,253,0.85)',
backgroundColor: 'red',
},
]
},
});
<html>
<head>
<title></title>
</head>
<body>
<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
</body>
</html>
/Vitima/AjaxQuantidadeVitimas
e/Autor/AjaxQuantidadeAutores
. E afinal o seu backend é php ou c#?