Javascript Charts.js Como colocar dados reais no Gráfico?

Mizrain Phelipe Sá · 15 de dezembro de 2020

Tenho esse código para gráfico, porém gostaria de saber os princípios básicos para mudar os dados fixos por dados reais vindo do banco de dados de um sistema, utilizando o visual studio, como eu faria para colocar isso no "data" do gráfico?

<html>
<head>
<title></title>
</head>
<body>

<canvas id="myChart"></canvas>

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
</body>
</html>

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'line',

    // The data for our dataset
    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'My First dataset',
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 5, 2, 20, 30, 45]
        }]
    },

    // Configuration options go here
    options: {}
});

vini_seven · 15 de dezembro de 2020

18 minutos atrás, Mizrain Phelipe Sá disse:

Tenho esse código para gráfico, porém gostaria de saber os princípios básicos para mudar os dados fixos por dados reais vindo do banco de dados de um sistema, utilizando o visual studio, como eu faria para colocar isso no "data" do gráfico?


<html>
<head>
<title></title>
</head>
<body>

<canvas id="myChart"></canvas>

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
</body>
</html>


var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'line',

    // The data for our dataset
    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'My First dataset',
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 5, 2, 20, 30, 45]
        }]
    },

    // Configuration options go here
    options: {}
});

Segue um exemplo feito por mim usando o google chart..

 <?php

                              $query = "SELECT nm_equipamento, qtd_equipamento FROM tb_solic_item GROUP BY nm_equipamento";
                              $result = mysqli_query($connection, $query);

                                ?>
                        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
                        <script type="text/javascript">
                            google.charts.load('current', {'packages':['corechart']});
                            google.charts.setOnLoadCallback(drawChart);

                            function drawChart() {

                            var data = google.visualization.arrayToDataTable([
                            ['Equipamento', 'Quantidade'],
                                <?php
                                    while($row = mysqli_fetch_assoc($result)){
                                        echo "['".$row["nm_equipamento"]."',".$row["qtd_equipamento"]."],";
                                    }
                                ?>
                            ]);

Mizrain Phelipe Sá · 16 de dezembro de 2020

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',
        },        
        ]
    },    
});

GabrielSennaMs · 16 de dezembro de 2020

@Mizrain Phelipe Sá

Bom amigo uma coisa que eu achei estranho no seu código é que o objeto Chart recebe no primeiro argumento um Context do canvas e nesse código você não passa o Context e sim o elemento canvas.

Tenta iniciar com isso

            var ctx = document.getElementById('myChart').getContext('2d');
            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',
                    },        
                    ]
                },    
            });

Mizrain Phelipe Sá · 17 de dezembro de 2020

@GabrielSennaMs Obrigado, não tinha percebido isso!

Mais ainda não consigo trazer os dados reais para o gráfico, pode me ajudar nisso?

GabrielSennaMs · 17 de dezembro de 2020

@Mizrain Phelipe Sá Pra que eu possa entender como você quer mostrar os dados no grafico, você tem que me passar um exemplo dos dados que estão vindo do servidor.

Mizrain Phelipe Sá · 18 de dezembro de 2020

16 horas atrás, GabrielSennaMs disse:

@Mizrain Phelipe Sá Pra que eu possa entender como você quer mostrar os dados no grafico, você tem que me passar um exemplo dos dados que estão vindo do servidor.

O servidor esta me trazendo o número total de vitimas e autores registrados no banco, que no momento são 2 vitimas e 1 autor, aqui ta o grafico do google charts na tela com os dados: