[Parte 5] Capítulo 7: Como criar gráficos a partir de um banco de dados

Se os dados para o gráfico estão em um banco de dados, é possível executar uma query e vincular ao gráfico os dados retornados nessa busca.

Esse procedimento mostra como ler e exibir os dados a partir do banco de dados utilizado nos posts do capítulo 6.

1 - Adicione uma pasta App_Data no diretório do site se essa pasta ainda não existir.
2 - Na pasta App_Data, adicione o banco de dados Padaria.sdf criado nos exemplos do capítulo 6.
3 - Crie um novo arquivo chamado GraficoDadosQuery.cshtml.
4 - Substitua a marcação pela marcação a seguir:

Inicialmente o código abre o banco de dados Padaria e o atribui à variável chamada db. Essa variável representa um objeto que pode ser utilizado para ler e escrever no banco de dados.

Em seguida, o código executa uma query SQL para obter o nome e o preço do produto. O código cria um novo gráfico e o mesmo é preenchido chamando o método DataBindTable. Esse método admite dois parâmetros. O dataSource é para os dados vindos da query e o parâmetro xField permite escolher qual coluna será utilizada para o eixo x do gráfico.

De forma alternativa, pode ser utilizado o método AddSeries para o helper Chart. O AddSeries permite escolher os parâmetros xValue e yValues. Neste caso, o método AddSeries pode ser utilizado assim:

Os dois métodos produzem o mesmo resultado. O AddSeries é mais flexível porque através dele é possível especificar o tipo do gráfico e seus dados de forma mais explícita. Já o DataBindTable é utilizado quando não é necessária flexibilidade extra.

5 - Execute a página no browser. Ambos os métodos retornarão a seguinte página: