Vamos usar este gráfico para exibir dados de vendas mostrando o faturamento anual. Utilizamos o controle 'LineChart' sem nenhuma configuração extra, ou seja, tudo no default. Crie um controle 'LineChart' e dê a ele o ID que quizer, você pode também definir o tamanho.

<highchart:LineChart id="hcVendas" runat="server" Width="500" Height="350" />

Depois acesse o "code behind" da página para definir as séries de dados que serão exibidas no gráfico. Se desejar, configure o título, legenda e aspectos visuais, porém neste exemplo não foram feitas configurações visuais.

//definicoes de eixos
hcVendas.YAxis.Add(new YAxisItem { title = new Title("Faturamento") });
hcVendas.XAxis.Add(new XAxisItem { categories = new[] { "1994", "1995", "1996", "1997", "1998", "1999", "2000", "2001", "2002" } });
 
//dados
var series = new Collection<Serie>();
series.Add(new Serie { data = new object[] { 400, 435, 446, 479, 554, 634, 687, 750, 831 } });
 
//bind do controle
hcVendas.DataSource = series;
hcVendas.DataBind();

O resultado é este:

image

 

Veja o resultado funcionando no link: http://highcharts.100loop.com/Sample01.aspx

Retornar ao menu

Last edited Jan 18, 2012 at 8:05 PM by alrcastro, version 4

Comments

No comments yet.