JSCharting é uma biblioteca de gráficos JavaScript com algumas características avançadas e grande saída de renderização. Ele utiliza SVG, embora você não precise estar familiarizado com ele. Há também alguma fallback em VML para compatibilidade com versões mais antigas em navegadores IE. A versão de avaliação gratuita está disponível no site se você deseja executar as amostras ou acompanhar localmente. Amostras online usando codepen também serão incorporadas abaixo.

Aqui está um exemplo que demonstra uma série de recursos interativos. Passe o mouse sobre os valores para ver as dicas e a legenda será ajustada em tempo real.

See the Pen Weather Patterns by Arthur Puszynski (@jsblog) on CodePen.

Configurando

JSCharting é fácil de configurar e de trabalhar. Os passos seguintes foram usados ​​para obter um gráfico em funcionamento a partir do zero. Há também um enorme conjunto de amostras que você pode usar como uma base para a personalização para um determinado requisito de visualização. Primeiro, inclua jQuery e os arquivos de biblioteca JSCharting em sua página:

<script type="text/javascript" src="/JSC/jquery-latest.min.js"></script>
<script type="text/javascript" src="/JSC/JSCharting.js"></script>

Em seguida, crie um elemento HTML div para segurar o gráfico:

<div id="chartDiv" style="width: 540px; height: 325px">

E então use jQuery para selecionar o elemento DOM e preenchê-lo com um gráfico por meio da API jQuery plugin:

$('#chartDiv').JSC(chartOptions);

As opções de gráfico definem uma série com quatro pontos usando o seguinte código:

var chartOptions = {
  series: [{
    name: 'Saw',
    type:'column',
    points: [
        { name: 'Q1', y: 230  },
        { name: 'Q2', y: 240  },
        { name: 'Q3', y: 267  },
        { name: 'Q4', y: 238  }
    ]
  }]
});

Você pode obter uma referência para o próprio objeto gráfico chamando a função JSC() no elemento jQuery ligado ao gráfico sem nenhum parâmetro.

var chart = $('#chartDiv').JSC();

 

Tipos de gráficos

Para especificar um tipo de gráfico, uma configuração simples, como {type: ‘column’} pode ser usada. Isso pode ser definido no nível das opções do gráfico ou no nível de série. Existem muitos tipos de gráficos disponíveis na biblioteca e alguns casos podem ser complexos para definir, no entanto, JSCharting utiliza uma abordagem interessante para simplificar essa configuração. Todos os diferentes tipos e opções de gráfico são definidos dentro de uma hierarquia de tipos de gráficos, permitindo configurações, tais como {type: ‘funnelSquareInverted’} que tradicionalmente exigiria ajustes separados, como { type: ‘funnel’, funnelShape:’square’, funnelOrientation:’inverted’}. JSCharting oferece um grande número de tipos de gráficos que podem ser explorados pela galeria.

Etiquetas do tipo tokens

Um bom recurso que torna os gráficos mais dinâmicos são etiquetas do tipo tokens. São tokens pré-definidos em vários níveis que se aplicam para o gráfico inteiro, para uma série ou para pontos individuais. Por exemplo, o título do gráfico permite usar tokens de nível desta forma:

{ titleLabelText: 'Acme Tool Sales Total: %sum Best Seller: %maxSeriesName' }

No nível da série, podemos especificar tokens para as entradas de legenda da seguinte forma:

{ defaultSeriesLegendEntryText: ' %name  %sum' }

Esses tokens funcionam automaticamente na maioria dos rótulos, descrições, urls e outro texto associado a gráfico, série ou ponto. O exemplo a seguir demonstra essas duas configurações de propriedade.

See the Pen Label Tokens by Arthur Puszynski (@jsblog) on CodePen.

Código

As opções de gráfico são codadas usando uma API declarativa bem organizada que separa a funcionalidade interna e os conceitos de programação de conceitos de gráficos e definições. O resultado final é uma solução que permite aos desenvolvedores fazer o que eles precisam, com menos tempo, menos código e menos confusão.

A biblioteca tem a capacidade de identificar uma definição de opção com erros ortográficos e avisar o desenvolvedor antes de um gráfico ir ao ar. Essa base de dados interna da API foi aproveitada de outra maneira interessante. Há uma configuração usada no exemplo acima: { defaultSeriesLegendEntryText: ‘ %name %sum’ }. No entanto, isso não é um nome de propriedade real dentro da API. Isso é definido como defaultSeries:{ legendEntry:{ text:’%name %sum’}}. No entanto, o gráfico pode reconhecer que defaultSeries é uma propriedade, e que legendEntry é uma propriedade dele, e que legendEntry contém uma propriedade de texto. Por conseguinte, permite que essa configuração seja usada. Os desenvolvedores são livres para usar essa sintaxe com atalho ou utilizar a sintaxe completa, de acordo com suas preferências.

Tooltips elegantes

As tooltips automáticas são bem adequadas para anotar dados sem quaisquer configurações específicas na maioria dos casos. O gráfico examina as etiquetas do eixo e a formatação para criar uma dica de ferramenta descritiva para cada ponto por padrão. Por exemplo, quando definimos uma etiqueta y do eixo e formatação com este código:

yAxis: {
  labelText: 'Sales (USD)',
  formatString: 'c' /*Currency Formatting*/
}

A tooltip descreve automaticamente o valor y do ponto com texto, tal como “Vendas (USD): $ 434,22”.

JSCharting muitas vezes vai surpreendê-lo com pequenos detalhes que economizam tempo e oferecem um resultado polido.

Mapeamento

O novo tipo de gráfico de mapeamento oferece um conjunto integrado de países do mundo e seus estados/províncias. Esses mapas podem ser vistos na seguinte amostra de mapas JS de todos os países do mundo.

Isso é bom, porque você não tem que encontrar shapefiles ou arquivos de origem geoJSON para fazer um mapa, já que as várias áreas geográficas são pré-otimizadas e prontas para usar. Você também não precisa aprender uma nova API de configuração de mapeamento e pode continuar a alavancar a série padrão e os pontos com os quais já está familiarizado.

Desenhar um simples mapa dos EUA é possível com apenas estas poucas opções de gráfico:

{
  type: 'map',
  series: [
    {map: 'US'}
  ]
}

É possível modificar esse gráfico para mostrar Illinois em vermelho por meio da adição de um ponto da série dos EUA ligado a IL e uma definição de cor da seguinte forma:

{
  type: 'map',
  series: [{
    map: 'US',
    points:[
      {map: 'US.IL', color: 'red'}
    ]
  }]
}

See the Pen Simple JS Map Code by Arthur Puszynski (@jsblog) on CodePen.

JSCharting fornece um recurso de contexto para seus gráficos de mapeamento geográfico que oferece automaticamente o contexto para o mapa primário por meio de uma lista opcional de áreas para desenhar no fundo. Por exemplo, se minha série só mostrou um ponto para US.IL, usar essa definição seria tirar o resto dos EUA do entorno dele, mas sem ter qualquer outro efeito no gráfico como ajustar o zoom ou o modo de exibição em toda a extensão do mapa dos EUA. Mapeamento de áreas de contexto são também desenhados em tons neutros para não chamar a atenção de distância da principal área de interesse.

{ mappingBaseLayers: 'US' }

Os mapas também podem ser carregados dinamicamente (em tempo real) e com zoom de forma interativa. Depois que um gráfico é inicializado, adicionar um mapa do país é tão fácil como:

chart.addSeries({ map:'US' });

Este codepen ilustra muito bem a flexibilidade do componente de mapeamento JSCharting junto com as características de cargas dinâmicas acima mencionadas:

See the Pen Click to load maps. by Arthur Puszynski (@jsblog) on CodePen.

Para mais exemplos da facilidade de uso do mapeamento e de todas as suas funcionalidades, veja a galeria de recursos de mapa.

Conclusão

Com JSCharting, você está pronto rapidamente para o trabalho e tem um conjunto completo de tipos de gráfico de vetor e resolução independente para atender às suas necessidades de visualização. Com tantas opções de ferramentas de gráficos, sendo que todas pretendem fazer o mesmo trabalho, JSCharting traz uma API mais intuitiva e menos código enquanto gera um resultado melhor por padrão (o que, por sua vez, economiza mais código ). Para os desenvolvedores, mais código equivale a mais tempo, e a razão de optar por usar uma biblioteca de gráficos em primeiro lugar é para poupar tempo (vs mexer com D3 ou construir algo a partir do zero)! JSCharting tem um nível de polimento e quanto mais você trabalhar com ele, mais sutilezas você descobre.

***

Joe Zim faz parte do time de colunistas internacionais do iMasters. A tradução do artigo é feita pela redação iMasters, com autorização do autor, e você pode acompanhar o artigo em inglês no link: http://www.joezimjs.com/javascript/javascript-charting-made-easy-with-js-charting/#more-2376