Um tutorial sobre FusionCharts detalhados em jQuery

Publicados: 2022-03-11

A visualização de dados facilita a leitura

Ao lidar com a análise de dados, a maioria das empresas confia no MS Excel ou no Google Sheets. Embora sejam ferramentas poderosas, é difícil perceber tendências, muito menos fazer algum sentido em grandes linhas de dados de planilhas. Lidar com dados apresentados dessa forma não é muito interessante, mas uma vez que você adiciona visualização a esses dados, as coisas ficam mais fáceis de gerenciar, e esse é o tópico do tutorial de hoje - fazer gráficos interativos usando jQuery.

É difícil perceber tendências nas linhas de dados da planilha, mas depois que você adiciona a visualização...

Usarei a biblioteca de gráficos JavaScript do FusionCharts para este projeto, pois oferece uma grande biblioteca de mais de 90 gráficos, é compatível com todos os navegadores e é muito fácil de trabalhar. Ele também oferece um plugin dedicado para jQuery que facilitará nosso trabalho.

Vou começar fazendo um gráfico básico usando a biblioteca JavaScript principal do FusionCharts e seu plug-in de gráficos jQuery, depois adicionarei a capacidade de detalhamento a ele. O detalhamento permite que você vá de um gráfico para outro clicando em um gráfico de dados.

O termo 'data plot' é contextual; refere-se a uma coluna em um gráfico de colunas, linhas em um gráfico de linhas, fatias de pizza em um gráfico de pizza. Ao clicar em um gráfico de dados do gráfico pai, você é apresentado a um gráfico filho, mostrando os dados relativos um nível mais profundo.

Clicar em um gráfico de dados no gráfico pai exibirá um gráfico filho.

Entendendo o FusionCharts

Antes de começarmos o tutorial, vamos abordar a anatomia básica do FusionCharts. Cada gráfico é composto por estes elementos-chave:

Legenda: O título no gráfico. Ele explica o que está sendo mapeado.
Subtítulo: O texto abaixo da legenda especificando informações adicionais do gráfico, muitas vezes indica um período de tempo a partir do qual os dados foram coletados.
Legenda: exibe um símbolo para cada gráfico de dados no gráfico. Um determinado gráfico pode ser habilitado ou desabilitado clicando em seu respectivo ícone de legenda.
Gráfico de dados: São representações de dados no gráfico. Um gráfico de dados pode ser uma coluna em um gráfico de colunas, linhas em um gráfico de linhas ou fatias de pizza em um gráfico de pizza.
Dica de ferramenta: texto que aparece quando você passa o mouse sobre um gráfico de dados, usado para transmitir informações adicionais sobre esse gráfico de dados específico.

Fazendo um gráfico de detalhamento

Antes de começarmos, aqui está uma captura de tela do gráfico que faremos neste tutorial. Você pode ver o JSFiddle aqui ou acessar o código fonte completo do projeto no meu repositório GitHub.

Uma prévia do projeto jquery final deste tutorial.

Eu dividi o processo de fazer um gráfico de detalhamento em cinco etapas, então vamos começar.

Etapa 1: incluindo arquivos JavaScript e criando o contêiner do gráfico

Primeiro, precisamos incluir todos os arquivos JS dos quais nosso projeto é dependente usando a tag <script> . Se a página ainda não existir, crie um documento HTML em branco e inclua os arquivos abaixo na seção <head> . Agora precisamos dos quatro arquivos a seguir:

jQuery reduzido
Biblioteca JS principal do FusionCharts (inclui fusioncharts.js e fusioncharts.charts.js )
Plugin jQuery do FusionCharts

Nossa seção <head> ficará assim:

 <!-- jQuery --> <script type="text/javascript" src="jquery.min.js"></script> <!-- FusionCharts JS file --> <script type="text/javascript" src="js/fusioncharts.js"></script> <script type="text/javascript" src="js/fusioncharts.charts.js"></script> <!-- jQuery charts plugin --> <script type="text/javascript" src="js/jquery-plugin.js"></script> <!-- custom theme file (optional) --> <script type="text/javascript" src="js/toptal.js"></script>

Agora que temos todas as dependências incluídas, é hora de criar o container <div> para o gráfico e incorporá-lo em nossa página com o seguinte código HTML:

 <div>drill-down chart will load here</div>

Agora, podemos selecioná-lo usando o seletor $ do jQuery dentro do código:

 $("#drill-down-chart")

Observação: se você tiver mais de um gráfico em sua página, precisará de um contêiner separado para cada gráfico com um id exclusivo .

A visualização de dados facilita a leitura.

Etapa 2: obter e estruturar dados

O FusionCharts aceita dados nos formatos JSON e XML, mas optei por usar JSON, pois ele se tornou o formato padrão para troca de dados entre aplicativos da web. A matriz de dados JSON para um gráfico básico contém um objeto para cada plotagem de dados e, dentro de cada objeto de plotagem de dados, definimos seu respectivo rótulo e valor. Essa estrutura se parece com:

 "data": [{ "label": "Q1", "value": "850000", }, { "label": "Q2", "value": "2070000", },... // more data objects ]

À medida que traçamos nosso gráfico de detalhamento, seu JSON fica mais complexo. A ligação entre os gráficos pai e filho requer mais um par key - value dentro de cada objeto da matriz de dados. A nova chave (sem surpresa, chamada link ) conterá o id do gráfico filho que você obterá quando o gráfico de dados pai for clicado. O formato para definir o id do gráfico filho é newchart-dataFormat-childId . Como estamos usando JSON, sabemos que tudo o que vincularmos será newchart-json-childId . Aqui está como definimos para o nosso gráfico:

 "data": [{ "label": "Q1", "value": "850000", "link": "newchart-json-q1" }, { "label": "Q2", "value": "2070000", "link": "newchart-json-q2" }, ... // more data objects]

Etapa 3: inserir dados do gráfico

Depois de ter os dados prontos, é hora de inserir o gráfico em sua página usando o método insertFusionCharts fornecido pelo plugin jQuery:

 $("#drill-down-chart").insertFusionCharts({ type: 'column2d', id: "mychart", width: '100%', height: '450', dataFormat: 'json', dataSource: { "chart": { "caption": "Quarterly Revenue for 2015", "paletteColors": "#9EA5FC", "xAxisName": "Quarter (Click to drill down)", "yAxisName": "Revenue (In USD)", // more chart configuration options }, "data": [ // see step-2 for explanation ], "linkedData": [ // explained in step-4 ] } })

Vamos detalhar o trecho de código acima:

type define o tipo de gráfico pai que estamos plotando. Nesse caso, column2d . Cada gráfico na biblioteca do FusionCharts tem um alias exclusivo. Você pode encontrar o alias para o gráfico que deseja plotar na página de lista de gráficos do FusionCharts.
id define o id exclusivo para o gráfico, não deve ser confundido com o id do elemento <div> que contém nosso gráfico. O id de um gráfico é usado para selecionar um gráfico para aplicar manipuladores de eventos e métodos de chamada. Faremos uso disso na Etapa 5.
width e height definem a dimensão do gráfico em pixels ou porcentagem. 100% de largura informa ao gráfico para ocupar toda a largura do contêiner.
Definimos o formato dos dados usando o atributo dataFormat . Estamos usando JSON para nosso exemplo, mas também existem outros formatos de dados aceitáveis, como um URL XML. Para saber mais sobre formatos de dados, consulte a página de documentação oficial do FusionCharts.
dataSource contém o conteúdo real do gráfico e o objeto de chart dentro dele contém as opções de configuração do gráfico, como legenda e subtítulo. A matriz data deve parecer familiar, pois a criamos na Etapa 2 (contém os dados a serem plotados) e linkedData contém o conteúdo do gráfico filho (o gráfico que você obtém depois de clicar em um gráfico de dados no gráfico pai).

Relacionado: Contrate os 3% melhores arquitetos freelancers de Big Data.

Etapa 4: criando a matriz de dados vinculados para gráficos filho

Agora que temos o gráfico pai definido, é hora de criar um gráfico filho para cada gráfico de dados, um processo muito semelhante à criação do gráfico pai. O array linkedData , criado no método 'insertFusionCharts', definirá um objeto separado para cada gráfico filho. Veja como são os dados do primeiro gráfico filho:

 "linkeddata": [{ "id": "q1", "linkedchart": { "chart": { "caption": "Monthly Revenue", "subcaption": "First Quarter", "paletteColors": "#EEDA54, #A2A5FC, #41CBE3", "labelFontSize": "16", // more configuration options }, "data": [{ "label": "Jan", "value": "255000" }, { "label": "Feb", "value": "467500" }, //more data] } }, //content for more child charts

id é o id do gráfico filho individual que definimos na Etapa 2. linkedChart é semelhante ao dataSource da Etapa 3, pois contém o conteúdo real desse gráfico. Existem vários outros atributos que vão dentro do objeto do gráfico, que eu abordo em detalhes na seção posterior, “Melhorando o design com atributos do gráfico”.

Etapa 5: configuração de detalhamento personalizada

Diversos tipos de gráficos

Até agora, nosso código de exemplo tem os gráficos pai e filho compartilhando o mesmo tipo de gráfico. Se você quiser fazer uma busca detalhada em um tipo de gráfico diferente (de coluna para pizza, por exemplo), faça isso vinculando o evento fusionchartsrendered .

 $('#drill-down-chart').bind('fusionchartsrendered', function(event, args) { FusionCharts.items['mychart'].configureLink({ type: "doughnut2d", overlayButton: { message: 'BACK', // Set the button to show diff message bgColor: '#FCFDFD', borderColor: '#cccccc' } }); });

No código acima, o evento fusionchartsrendered chamará o método configureLink , que define o tipo de todos os gráficos filho mais as opções de botão de sobreposição. Você também pode especificar tipos de gráfico separados para cada gráfico filho. Existem muitas opções disponíveis no método configureLink , então você pode achar útil revisar sua documentação de referência de API do FusionCharts.

Renderizando Gráficos em Diferentes Divs

Outra coisa legal que você pode fazer é renderizar o gráfico filho em um contêiner diferente em vez do mesmo que seu pai. Para isso, defina um contêiner HTML <div> separado após o contêiner do gráfico pai e passe seu id para o atributo renderAt conforme mostrado abaixo:

 $('#chart-container').bind('fusionchartsrendered', function(event, args) { FusionCharts.items['mychart'].configureLink({ type: "doughnut2d", renderAt:"chart-container2", overlayButton: { message: 'BACK', // Set the button to show diff messafe bgColor: '#FCFDFD', borderColor: '#cccccc' } }); });

O valor dado ao atributo renderAt especifica o id do <div> no qual o gráfico filho será renderizado ( chart-container2 ).

Melhorando o design com atributos de gráfico

Seguindo este tutorial, você obterá um gráfico funcional, mas será um pouco feio se você deixar por isso mesmo. Para uma apresentação mais atraente, você precisará usar “atributos de gráfico” cosméticos. Os atributos de gráfico são definidos dentro do objeto de chart e usados para personalizar as opções de renderização. Você pode achar útil consultar o gráfico explicativo FusionCharts ao revisar estes atributos configuráveis chave:

paletteColors define a cor dos gráficos de dados. Se você der uma única cor aqui, todas as colunas serão dessa cor. Se você fornecer várias cores, a primeira coluna terá o primeiro valor, a segunda coluna terá o segundo valor e assim por diante.
plotSpacePercent controla o espaço entre as colunas. O valor padrão para isso é 20 (o valor é um inteiro, mas a unidade é uma porcentagem) e o intervalo permitido é de 0 a 80. Um valor de zero fará com que as colunas se agrupem e grudem umas nas outras.
baseFont define a família de fontes do gráfico. Você pode usar qualquer fonte que desejar; Eu usei o Open Sans do Google no meu gráfico. Basta incluir o arquivo de fonte externa em sua página HTML para usá-lo em seu gráfico.
plotToolText permite personalizar as dicas de ferramentas. Usando macros como $label e * $dataValue , você pode mostrar informações específicas sobre um determinado gráfico de dados de dentro de um <div> e, em seguida, estilizar esse <div> usando CSS embutido. Aqui está o que eu fiz no nosso exemplo:

 "plotToolText": "<div>$label: $dataValue</div>"

theme permite que você defina seus atributos de gráfico em um arquivo diferente e os aplique uma vez aqui, em vez de sobrecarregar seu objeto de gráfico com vários atributos de gráfico. Você pode encontrar o arquivo de tema para este tutorial - toptal.js - dentro da pasta JS do repositório GitHub do projeto.

Isso é tudo que vou cobrir, mas há mais de cem atributos para um gráfico, então se você quiser explorar mais, visite a página de atributos do gráfico do FusionCharts e procure seu tipo de gráfico específico.

Mais recursos de FusionCharts e jQuery

Embora eu tenha abordado os elementos mais importantes na criação de um gráfico de detalhamento usando jQuery, há uma boa chance de você precisar de ajuda ao tentar fazer isso sozinho. Para esse momento, aqui estão alguns recursos adicionais:

Plugin de gráficos jQuery: Para inspiração, visite a página oficial do plugin de gráficos jQuery para ver alguns exemplos ao vivo.
Documentação: Se você não conseguir descobrir algo, a documentação é o primeiro lugar que você deve procurar. Aqui estão links úteis para o plugin jQuery e o gráfico de detalhamento (também conhecido como gráficos vinculados).
Demonstrações: Cada biblioteca de gráficos oferece amostras ao vivo para mostrar seus recursos, e o FusionCharts não é diferente. Vá até a galeria de demonstração com mais de 800 amostras ao vivo, com código-fonte completo, se precisar de algumas ideias. Há uma boa chance de que o que você está tentando fazer já está disponível. Não há necessidade de começar do zero; apenas bifurque o violino e prossiga a partir daí!
Mais extensões: Se você não usa JavaScript ou jQuery vanilla, pode explorar mais plugins e wrappers oferecidos pelo FusionCharts nesta página. Eles têm plugins dedicados para uma variedade de bibliotecas e frameworks como Angular, React, Java, ASP.NET etc.

PS: Eu estarei na seção de comentários abaixo, então sinta-se à vontade para postar qualquer dúvida que possa ter sobre o meu artigo. Fico feliz em ajudar!

Relacionado: Mineração de Dados para Análise Preditiva de Redes Sociais