Depois de alguns meses, já estabilizamos muitas novas features no Highcharts.Net. Além de portar várias novas features na versão webforms, também criamos os helpers e o suporte final para Asp.Net MVC. Aliás, não posso deixar de agradecer aos amigos que contribuem constantemente no projeto: André Castro, Rahul Sud, “testmyo” e recentemente, Charles Fortes. Se você ainda não conhece o projeto, vou mostrar alguns detalhes sobre ele.
Instalando o Highcharts.Net
A opção mais simples é fazer a instalação usando o Nuget.
Uma vez executado o comando, você já está pronto para usar o Highcharts.Net. Nós temos duas versões disponíveis, uma para ser utilizada em projetos webforms (compatível com framework 3.5) e outra para ASP.Net MVC (compatível com framework 4.0).
Usando em projetos ASP.Net Webforms
Primeiramente, declare o controle <highcharts> no seu .aspx
<highcharts:LineChart ID="hcMeuGrafico" Width="700" Height="450" runat="server" />
Depois você pode configurar todo o gráfico no seu código C# e usar um DataBind() simples.
//definições de eixos hcMeuGrafico.YAxis.Add(new YAxisItem { title = new Title("Faturamento") }); hcMeuGrafico.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 } }); hcMeuGrafico.PlotOptions = new PlotOptionsLine { dataLabels = new DataLabels { enabled = true } }; //bind do controle hcMeuGrafico.DataSource = series; hcMeuGrafico.DataBind();
Ficando assim:
Estamos ainda evoluindo a documentação do projeto, mas a grande maioria das configurações é bem intuitiva. E você também pode consultar a documentação oficial do projeto, pois as configurações são muito semelhantes.
Novidade! Gráficos com Ajax DataSource
Uma das novas features que mais gosto é a possibilidade de criar um gráfico vinculado à uma atualização constante via requisições Ajax. É muito útil para desenvolver painéis de monitoramento em tempo real. Para fazer isso é muito simples. Primeiramente, nós configuramos o gráfico normalmente, definindo eixos, séries e labels.
Para usar mais esta novidade, basta configurar a propriedade: AjaxDataSource.
// JSON Data Source hcVendas.AjaxDataSource = new AJAXSource("./PaginaQueRetornaUmJson.aspx", 5000, false, false, true); // (source, delay, clearAll, onlyOnce, shift)
Veja um exemplo online.
Usando em projetos ASP.Net MVC
Depois de utilizar o Nuget para instalar o Highcharts.Net no seu projeto, basta criar no seu ViewData um ChartOptions.
//ChartViewData.cs using Highcharts.Core.Options; namespace DemoMVC.Models { public class ChartViewData { public ChartOptions ChartData { get; set; } } }
E configurar este ChartOptions no seu controller:
//LineChartController.cs using System.Web.Mvc; using DemoMVC.Models; using Highcharts.Core; using Highcharts.Core.Data.Chart; using Highcharts.Core.Options; using Highcharts.Core.PlotOptions; namespace DemoMVC.Controllers { public class LineChartController : Controller { // // GET: /LineChart/ public ActionResult Index() { return View(GetViewData()); } private static ChartViewData GetViewData() { var chartOptions = new ChartOptions { Title = new Title("Faturamento"), PlotOptions = new PlotOptionsLine { dataLabels = new DataLabels {enabled = true} } }; //Chart Axis chartOptions.YAxis.Add(new YAxisItem { title = new Title("Porcentagem") }); chartOptions.XAxis.Add(new XAxisItem { categories = new object[] { "1750", "1800", "1850", "1900", "1950", "1999", "2050" } }); //Chart Data chartOptions.Series.Add(new Serie { data = new object[] { 502, 635, 809, 947, 1402, 3634, 5268 } }); return new ChartViewData { ChartData = chartOptions }; } } }
E então use o Helper na sua view:
@using Highcharts.MVC; @model DemoMVC.Models.ChartViewData @Html.LineChartFor(Model.ChartData)
Renderizando um gráfico assim:
Temos que comemorar mais esta versão estável, mas sabemos que ainda há muito o que ser feito e você está convidado à colaborar conosco no Codeplex.