0

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>

14
  • Não interessa o google charts para essa questão... você tem que apresentar o que retornam /Vitima/AjaxQuantidadeVitimas e /Autor/AjaxQuantidadeAutores. E afinal o seu backend é php ou c#? 16/12/2020 às 13:54
  • Tudo no c# e elas retornam a quantidade de autores e vitimas cadastrados.
    – user198468
    16/12/2020 às 14:00
  • Então pq a tag php na pergunta? Apresente o retorno delas e ou a action com a model no backend 16/12/2020 às 14:00
  • Pronto, adicionei o retorno de uma, mais e o mesmo procedimento da outra.
    – user198468
    16/12/2020 às 14:21
  • Não seria somente no método em que você cria o chart chamar previamente as funções de coleta dos dados e no array de Data do Chart passar as informações? 16/12/2020 às 14:26

1 Resposta 1

0

O que você está implementando, não faz sentido nenhum, mas já que insiste tanto...

Mesmo no gráfico do google, o que você está exibindo não faz sentido algum. Está apenas repetindo números em posições diferentes... O que você quer representar com esse gráfico?

   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)
    }

No backend, método GetNumeroVitimas() retorna apenas um inteiro com o total de vítimas, como não recebe nenhum argumento ele sempre vai trazer o mesmo resultado dada à query que está sendo feita no banco de dados. E acredito que tenha o mesmo problema na query de autores.

string query = "SELECT COUNT(TP_VITIMA.COD_VITIMA)"
    + " FROM [dbo].[TP_VITIMA] "
    + " WHERE TP_VITIMA.[DT_EXCLUSAO_LOGICA] IS NULL ";

Agora veja no exemplo abaixo como nada disso faz sentido. Ignorando o backend, porque o resultado seria o mesmo, apenas com dois números diferentes. É isso que você está fazendo

function GetQuantidadeVitimas() {
  let qtnd_vitimas = 10;
  return qtnd_vitimas;
}

function GetQuantidadeAutor() {
  let qntd_Autores = 7;
  return qntd_Autores;
}
var qtdVitimas = GetQuantidadeVitimas();
var qtdAutores = GetQuantidadeAutor();

let ctx = document.getElementById('myChart');
let chart = new Chart(ctx, {
   options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    },
  type: 'bar',
  data: {
    labels: ["Abril", "Agosto", "Setembro", "Novembro", "Dezembro"],
    datasets: [{
      label: 'Qualquer coisa',
      data: [qtdVitimas, qtdAutores, qtdVitimas, qtdAutores, qtdVitimas],
      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>

Ainda abstraindo a questão dos valores e do backend, você precisa de um dataset para cada tipo de dados que você quer representar.

function GetQuantidadesVitimas() {
  let arrVitimas = [2,4,3,5,1];
  return arrVitimas;
}

function GetQuantidadesAutor() {
  let arrAutores = [1,3,2,4,1]
  return arrAutores;
}
var qtdVitimas = GetQuantidadesVitimas();
var qtdAutores = GetQuantidadesAutor();

let ctx = document.getElementById('myChart');
let chart = new Chart(ctx, {
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  },
  type: 'bar',
  data: {
    labels: ["Abril", "Agosto", "Setembro", "Novembro", "Dezembro"],
    datasets: [{
        label: 'Vítimas',
        data: qtdVitimas,
        borderColor: 'rgba(77,166,253,0.85)',
        backgroundColor: 'red',
      },
      {
        label: 'Autores',
        data: qtdAutores,
        borderColor: 'rgba(77,166,253,0.85)',
        backgroundColor: 'blue',
      }
    ]
  },
});
<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>

Agora você precisa entender essa estrutura alterar o no seu backend as queries es os métodos para obter esses resultados.

5
  • Creio que agora entendi melhor, obrigado.
    – user198468
    17/12/2020 às 14:24
  • Mais tem uma coisa que não entendi, na parte do "let arrVitimas" e "let arrAutores" vc coloca números fixos, porém que eu quero que os valores venham do banco, como faço?
    – user198468
    17/12/2020 às 14:48
  • É o que eu estou dizendo desde o início... essa questão está fechada... agora você precisa olhar no seu backend, como consultar o banco e retornar os valores nesse formato... Depois disso você já tem o método original que faz a requisição via ajax para obter esses dados. 17/12/2020 às 14:52
  • @MizrainPhelipeSá agora, se você não está disposto a entender que, você está atacando o problema pela ponta errada e não quer quebrar as suas dúvidas em partes. O melhor que eu posso fazer é remover a resposta e votar para fechar a sua pergunta... 17/12/2020 às 15:02
  • Agora já percebi que me falta mais estudo de backend para poder dar continuidade nesse processo. obrigado pelo esforço e disposição!
    – user198468
    18/12/2020 às 12:29

Você deve fazer log-in para responder a esta pergunta.