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