Sempre que precisei fazer aplicativos web que necessitavam de apresentar gráficos normalmente eu utilizava gráficos gerados a partir de bibliotecas flash ou flex, por achar que eles me dariam melhor apresentação e boa interatividade. Porém nos dois últimos projetos que desenvolvi, resolvi testar bibliotecas jQuery e devo dizer que me surpreendi muito como resultado obtido. Num primeiro momento (um ano atrás, mais ou menos) utilizei a o jqPlot que até o momento tinha sido o que apresentava melhores recursos. O resultado foi muito satisfatório.

Porém, há um mês atrás tive a oportunidade de fazer mais um projeto com a demanda de gerar pequenos gráficos, e novamente fui pesquisar o que tinha de novo neste sentido… acabei encontrando o Highcharts. Em poucas palavras: “Simplesmente fantástico”. Depois que entreguei o projeto, resolvi isolar a parte da geração dos gráficos para facilitar a re-utilização e claro, em poucos minutos me veio a idéia de disponibilizá-lo no Codeplex. E foi assim que nasceu o Highchasts.Net.

O Highcharts.Net é um framework open-source, criado para facilitar a utilização do da biblioteca ‘client-side’ do Highcharts (jQuery), através de controles server-side do asp.net. Ou seja, apenas configurando algumas propriedades e fazendo uma simples chamada “DataBind();” seu gráfico jQuery será renderizado na sua página.

Mas como funciona?

  • Primeiro baixe as DLL´s da primeira versão beta do Highcharts.Net, neste link;
  • Depois adicione a referência no seu projeto e registre no web.config os controles da seguinte forma:
<pages controlRenderingCompatibilityVersion="3.5" clientIDMode="AutoID">
   <controls>
	  <add tagPrefix="highchart" namespace="Highchart.UI" assembly="Highchart"/>
   </controls>
</pages>
  • Feito isso, você poderá declarar o controle em qualquer página seu “highchart control”, assim:
<highchart:Chart id="hcVendas" RenderType="line" Width="600" Height="320" runat="server"></highchart:Chart>
  • Para configurá-lo, você pode seguir as instruções intuitivamente. Abaixo um exemplo:
hcVendas.Title = new Title ("Faturamento Anual");

//definições de eixos
hcVendas.YAxis = new YAxis { title = new Title("Faturamento") };
hcVendas.XAxis = new XAxis { 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();

Este código renderiza um gráfico como este:

Mas é claro, já neste versão beta, você dispõe de seis tipos de rederização: gráficos de linha (como no exemplo), barras, colunas, área, curva (linha suavizada) e o gráfico de área com linhas suavizadas. Praticamente todas as configurações mais utilizadas para tornar os controles funcionais já estão disponíveis, mas em breve um número muito maior de configurações visuais serão adicionados.

Portanto, aproveitem e acompanhem as atualizações, pois num curto espaço de tempo teremos novos releases. Aguardo o feedback de todos. Abraços!