1

Preciso fazer uma dashboard e estou com uma dificuldade para popular um gráfico de linhas de um grafico canvas.

Eu preciso que os arrays de data e label sejam preenchidos com os dados da minha lista mas não sei como fazer

O que preciso fazer para conseguir isso

<script>

    var ctx = document.getElementsByClassName("line-chart");

    var teste = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"],
            datasets: [{
                label: "taxa de cliques 2017",
                data: [5, 10, 15, 12, 20, 30, 8, 7, 2, 3, 6, 1],
                borderWidth: 6,
                borderColor: 'rgba(77,166,253,0.85)',
                backgroundColor: 'transparent',
            },
            {
                label: "taxa de cliques 2017",
                data: [8, 11, 13, 2, 80, 40, 84, 71, 22, 43, 46, 11],
                borderWidth: 6,
                borderColor: 'rgba(6,204,6,0.85)',
                backgroundColor: 'transparent',
            }]
        },
        options: {
            title: {
                display: true,
                fontSize: 20,
                text: "Relatorio de CTR anual"
            },
            labels: {
                fontStyle: "bold",

            }
        }
    })


</script>

Meu projeto está com a versão Chart.JS referenciada abaixo

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

A minha conexão está em SQL, fiz um método pra preencher uma lista a partir de um select... eu consigo popular o List<> só não conheco como transferir esses dados para o JS

Segue

// metodo que é chamado a partir da controller

    public void teste(List<Pessoa> lista)
    {
        SqlConnection connection = new SqlConnection("DBConecction");
        connection.Open();
        SqlCommand command = new SqlCommand(SQL(), connection);
        var datatable = new DataTable();
        SqlDataAdapter DA = new SqlDataAdapter();

        DA.SelectCommand = command;

        DA.Fill(datatable);

        foreach (DataRow row in datatable.Rows)
        {
            lista.Add(new Pessoa { dia = Convert.ToInt32(row["dia"]), peso = Convert.ToDouble(row["peso"]) });
        }
    }

// string SQL

    public string SQL()
    {
        string sSQL = "select day(data_entrega) 'dia'  " + 
                            ",sum(peso_roadnet) 'peso' " +
                        "from ConsultaFreteRot2 " +
                        "where DATA_ENTREGA between '2018-03-01' " +
                               " and '2018-03-28' " +
                        "group by day(DATA_ENTREGA) " +
                        "order by dia";
        return sSQL;
    }

OBS: Não estou usando Entity Framework no projeto

2
  • Qual é a sua fonte de dados e como está fazendo sua consulta? Inclua o código à sua pergunta 13/04/2018 às 18:53
  • qual é a versão do Chart.js? 16/04/2018 às 5:57

1 Resposta 1

0

Montar um gráfico de dashboard desde o banco de dados vai precisar de integração e transformações de dados através camadas de seu sistema.

Partindo do seu exemplo e considerando que está usando asp.net mvc pela tag da pergunta, vai ser necessário que sua controller passe à view os dados já prontos. Um exemplo seria uma Lista com um objeto contendo 'label' e 'data' como variável.

Exemplo na Controller (um método privado para obter os dados):

private List<GraficoDiaPeso> teste()
{
    var lista = List<GraficoDiaPeso>();

    SqlConnection connection = new SqlConnection("DBConecction");
    connection.Open();
    SqlCommand command = new SqlCommand(SQL(), connection);
    var datatable = new DataTable();
    SqlDataAdapter DA = new SqlDataAdapter();

    DA.SelectCommand = command;

    DA.Fill(datatable);

    foreach (DataRow row in datatable.Rows)
    {
        lista.Add(new GraficoDiaPeso { label = row["dia"].ToString(), data = row["peso"].ToString() });
    }

    return lista;    
}

Para passar para a view em MVC existem opções: model, numa view fortemente tipada ou viewbag e viewdata, esse artigo AQUI explica melhor as diferenças entre ambos, mas por enquanto, utilizei viewbag pelos seguintes motivo: deixar o model para o objetivo geral da view, e por viewbag ser do tipo dynamic o que torna flexivel a view.

Exemplo na Controller (chamada ao método privado e passagem dos dados pela viewbag):

public ActionResult Index()
{
    ViewBag.Grafico_Pessoa_Peso = teste();
    return View();
}

Agora vem o que mais faltava no seu código, entregar para o javascript esses dados pelo razor (ou aspx).

Exemplo na view (com Razor):

@{
    var pesoDia = ViewBag.Grafico_Pessoa_Peso as List<pesoDia>;

    var Label = string.Join("\",\"", pesoDia.Select(n => n.Label));
    Label = "\"" + Label + "\"";

    var Value = string.Join(",", pesoDia.Select(n => n.Value));
}

<script>
var ctx = document.getElementById("line-chart");

var teste = new Chart(ctx, {
    type: 'line',
    data: {
        labels: [@Html.Raw(Label)],
        datasets: [{
            label: "taxa de cliques 2017",
            data: [@Value],
            borderWidth: 6,
            borderColor: 'rgba(77,166,253,0.85)',
            backgroundColor: 'transparent',
        },
        {
            label: "taxa de cliques 2017",
            data: [@Value],
            borderWidth: 6,
            borderColor: 'rgba(6,204,6,0.85)',
            backgroundColor: 'transparent',
        }]  
    },
    options: {
        title: {
            display: true,
            fontSize: 20,
            text: "Relatorio de CTR anual"
        },
        labels: {
            fontStyle: "bold",

        }
    }
    })
</script>

Graças ao framework MVC seu script foi renderizado pelo servidor e está pronto para rodar no browser, apenas certifique-se de executar o script quando todas as dependencias já estejam presentes na página.

2
  • Obg, resolveu o meu problema. 20/06/2018 às 14:11
  • Obg, resolveu o meu problema. O que eu precisava mesmo era incluir os dados pelo ViewBag e também utilizar o Razor, você salvou meu projeto 20/06/2018 às 14:24

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .