Highcharts.Net 2.0 e novidades para ASP.Net MVC

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.