Como criar seu primeiro gráfico em JavaScript com o JSCharting

Artigo original: https://www.freecodecamp.org/news/how-to-make-your-first-javascript-chart/

Quando se está começando como desenvolvedor JavaScript iniciante, acho que é importante buscar projetos interessantes. Assim, você pode se divertir enquanto aprende e provavelmente encontrará uma área de especialização que seja do seu agrado.

Como se costuma dizer, "se você ama o que faz, nunca trabalhará um dia sequer em sua vida".

Neste artigo, apresentarei a visualização de dados de front-end, que é minha paixão pessoal. Talvez ela também se torne sua paixão!

Os momentos mais gratificantes para mim como desenvolvedor são quando posso ver ou experimentar os resultados do que criei. É muito gratificante criar um gráfico que revela insights interessantes sobre seus dados ou uma experiência interativa que ajuda a explorar detalhes de um conjunto de dados exclusivo. Quanto mais significativo for o resultado, mais gratificante será a sensação.

No entanto, percebi que a quantidade de trabalho que você dedica a um projeto não está necessariamente relacionada à sensação de realização – às vezes, a sensação é ótima mesmo quando foi relativamente fácil.

Com o tempo, você encontrará ferramentas que o ajudarão a ser mais eficiente e, às vezes, você moverá montanhas com pouco esforço. Há muitas bibliotecas de gráficos e ferramentas disponíveis na área de visualização de dados. Com as ferramentas certas, você criará novos gráficos com pouco esforço, independentemente do tipo de gráfico de que precisar. Pessoalmente, acho que a visualização dos dados gera uma grande recompensa pelo seu investimento de tempo e esforço.

Neste tutorial, você usará várias ferramentas para obter dados pela Internet, processará esses dados e desenhará um belo gráfico que pode ser visualizado em qualquer navegador moderno. Você pode clicar nos links abaixo para baixar o código de exemplo de cada etapa individualmente, visualizar todos no GitHub, ou baixar todas as etapas de uma só vez aqui: all-steps.zip.

O resultado

Ao final do tutorial, você criará este gráfico interativo orientado por dados. Você aprenderá a obter dados pela Internet, a processá-los e a criar um gráfico com esses dados. Você também poderá criar seus próprios gráficos do zero.

Depois de processar os dados e fazer o gráfico, você também aprenderá a fazer ajustes no gráfico, incluindo a modificação da legenda padrão, a ativação de pontos de foco (em inglês, crosshairs) no eixo x com dicas (em inglês, tooltips) e a aplicação de anotações de texto para adicionar contexto e outras informações ao gráfico.

As ferramentas

Para começar, use um navegador da internet como o que você provavelmente está usando para ler este artigo. Recomendo o Chrome, pois ele oferece uma ótima experiência e ferramentas integradas para desenvolvedores.

Em seguida, você precisará de um editor de texto. Algo simples como o bloco de notas funcionará. No entanto, sugiro usar um editor de código mais avançado, como o VS Code, pois esse é um ambiente no qual você passará muito tempo. Ele proporcionará a você uma experiência de programação mais conveniente e agradável, além de tornar a escrita em HTML5, CSS e JavaScript mais agradável aos olhos. O mais importante é que, se você esquecer uma citação ou uma vírgula em algum lugar, um editor de código poderá ajudá-lo a encontrar o erro.

Este artigo pode ajudá-lo a escolher o melhor editor de código em JavaScript para o desenvolvimento para a Web (texto em inglês).

Você usará a biblioteca de gráficos JSCharting para desenhar e adicionar a funcionalidade interativa ao gráfico automaticamente. Não serão necessárias outras bibliotecas do JavaScript, como o jQuery, ou plataformas de front-end, como o React e o Angular (comumente usadas em projetos de sites).

Por que JSCharting?

O JSCharting é uma biblioteca de gráficos em JavaScript que pode desenhar muitos tipos diferentes de gráficos usando SVG. Ela é fácil de usar e de começar a aprender, sendo, portanto, é uma boa opção para este tutorial. A API (Interface de Programação de Aplicativos, ou seja, as opções e configurações necessárias para criar gráficos) torna as coisas difíceis mais simples e é uma boa opção para fazer experiências com visualizações de dados.

Você pode usar o JSCharting gratuitamente para uso pessoal e comercial com a marca incluída.

Você pode criar gráficos responsivos com o JSCharting por meio de algumas etapas simples:

• Defina uma tag <div> no HTML com um ID único.
• Forneça essa id, os dados e quaisquer outras opções ao chamar JSC.Chart() no arquivo JavaScript.

É isso. O JSC desenhará um gráfico de aparência profissional preenchendo essa tag div com elementos visuais em SVG. O gráfico será responsivo e interativo sem nenhum esforço extra.

Os dados

Você usará um arquivo de dados fornecido pelo NCHS (National Center for Health Statistics, o Centro Nacional de Estatísticas em Saúde) que lista a expectativa de vida histórica de homens e mulheres nos EUA.

Você pode encontrar esses dados aqui: https://data.cdc.gov/resource/w9j2-ggv5.csv.

Esse arquivo CSV contém dados que categorizam as expectativas de vida por ano, raça e sexo. Você usará alguns desses dados para desenhar uma simples linha de tendência para homens e mulheres nos últimos 100 anos.

O arquivo CSV (de Comma Separated Values, que significa valores separados por vírgula) é um formato muito bom para transmitir dados pela Internet. É compacto, legível por humanos e você pode abri-lo diretamente no Excel, o que também é ótimo.

Portanto, sem mais delongas, vamos começar.

Passo 1 – adicionar um gráfico em branco

O primeiro arquivo zip contém um ponto de partida em branco que pode ser preenchido à medida que avançamos. Se você se perder ou ficar confuso, ou se quiser pular adiante, o arquivo zip no final ou ao longo de cada seção o deixará atualizado.

Se desejar fazer o download de todos os arquivos de uma só vez, pegue o arquivo all-steps.zip.

step1-a.zip

Esse arquivo zip contém os seguintes arquivos:

• index.html
• js/index.js

O arquivo .html está vazio, exceto por algum código padrão que o torna um arquivo válido, enquanto o arquivo .js está completamente vazio.

A primeira coisa a fazer é adicionar alguns scripts ao arquivo HTML da página da Web. Normalmente, as pessoas sugerem adicionar tags <script> dentro das tags <head>. No entanto, para scripts que afetam o conteúdo HTML, geralmente é melhor adicioná-los após o fechamento da tag </body>.

Essa técnica carrega todo o HTML no DOM antes de executar qualquer JavaScript. O gráfico precisa do HTML carregado antes de poder desenhar nele. O DOM (de Document Object Model – em português, Modelo de Objeto de Documentos) é uma representação de seu código HTML na memória do navegador. Depois que o HTML é carregado no DOM, o navegador pode exibi-lo e o JavaScript pode interagir com ele.

Comece adicionando a biblioteca JSCharting ao arquivo HTML. Abra o arquivo index.html no editor de sua preferência. Em seguida, adicione uma tag de script para incluir o JSCharting após a tag de fechamento </body>. O código resultante na parte inferior do arquivo deve ter a seguinte aparência:

</body>
<script src="https://code.jscharting.com/2.9.0/jscharting.js"></script>
</html>

O URL dessa biblioteca aponta para uma CDN (Content Delivery Network – em português, rede de distribuição de conteúdo). Ela hospeda o código do gráfico e torna conveniente adicionar rapidamente a biblioteca a qualquer página HTML para criar protótipos de gráficos e fazer experimentos. Você também pode baixar e usar a biblioteca localmente ou usar o pacote npm em seu projeto, mas a CDN não exige nenhuma etapa adicional.

Em seguida, usando a mesma técnica, adicione outra tag de script fazendo referência ao seu arquivo JavaScript em branco. Adicione esse script após o script de jscharting.js para que tenha a seguinte aparência:

</body>
<script src="https://code.jscharting.com/2.9.0/jscharting.js"></script>
<script src="js/index.js"></script>
</html>

Ótimo. Estamos quase prontos para desenhar um gráfico em branco. A última coisa que você precisa fazer é adicionar uma tag <div> dentro do arquivo HTML para definir onde queremos que este gráfico seja desenhado.

Adicione este código HTML dentro das tags <body>.

<body>
    <div id="chartDiv" style="width:50%; height:300px; margin:0 auto;"></div>
</body>

A div deve ter um id para que você possa informar ao gráfico em qual div deve ser desenhada. Nesse caso, o id é chartDiv.

Você pode notar o atributo style da tag <div>. Ele faz com que a div tenha 50% da largura da janela e 300 pixels de altura. O estilo de margem margin: 0 auto; centraliza a div na página. O gráfico será preenchido independentemente do tamanho da div, portanto, alterar o tamanho da div é uma boa maneira de controlar o tamanho do gráfico.

Está tudo pronto com o arquivo HTML. Abra o arquivo index.js e adicione um gráfico em branco a essa página escrevendo o seguinte código, que inclui a div id chartDiv:

JSC.Chart('chartDiv', {});

Abra o arquivo index.html em um navegador (arraste e solte o arquivo em um navegador da Web como o Chrome).

Ainda não há muito para ver, mas você pode notar um pequeno logotipo da JSC nesta página. Isso indica que um gráfico está conectado e sendo desenhado.

step1-b.zip

Passo 2 – brinque um pouco com o gráfico

Para testar, vamos adicionar alguns valores para o gráfico visualizar e ver como ele funciona.

Voltando ao arquivo index.js, substitua o conteúdo pelo código a seguir, que adiciona mais opções ao gráfico.

JSC.Chart('chartDiv', {
   type: 'horizontal column',
   series: [
      {
         points: [
            {x: 'Apples', y: 50},
            {x: 'Oranges', y: 42}
         ]
      }
   ]
});

Agora, atualize (F5) a janela do navegador onde a página index.html está carregada.

Muito bom! Você acabou de criar seu primeiro gráfico usando JavaScript.

Você criou um gráfico de barras ao definir a opção de tipo de gráfico como 'horizontal column'. Se você preferir uma coluna vertical, defina o valor como 'column'. Você também adicionou uma série com dois pontos ao gráfico para Maçãs e Laranjas (Apples e Oranges, em inglês, respectivamente).

Todos os dados do gráfico são compostos de séries e pontos. Uma série é simplesmente um grupo de pontos de dados. Os gráficos podem conter uma ou mais séries de dados. Os pontos de dados consistem em valores que mapeiam os eixos x e y. Os pontos também podem incluir muitas outras variáveis e valores descritivos.

O exemplo acima contém apenas uma série. Agora vamos dar uma olhada nas opções para um gráfico com duas séries. Substitua o conteúdo do arquivo JavaScript por este código.

JSC.Chart('chartDiv', {
   type: 'horizontal column',
   series: [
      {
         name:'Andy',
         points: [
            {x: 'Apples', y: 50},
            {x: 'Oranges', y: 32}
         ]
      },{
         name:'Anna',
         points: [
            {x: 'Apples', y: 30},
            {x: 'Oranges', y: 22}
         ]
      }
   ]
});

Ao atualizar da janela do navegador será exibido este gráfico.

As opções do gráfico são semelhantes. Ainda é um gráfico de barras, mas dessa vez há um objeto extra no array de séries.  Também adicionamos propriedades de nome para cada série para que o gráfico possa identificá-las na legenda.

Se estiver interessado em criar gráficos diferentes, como gráficos de radar, gráficos de área, gráficos de pizza, gráficos de Gantt ou até mesmo gráficos de mapa de calor de calendário, dê uma olhada na galeria de exemplos do JSCharting e o código-fonte (opções de gráfico) usado para criar esses gráficos. Você pode aprender rapidamente a usar outros recursos de gráficos copiando os exemplos disponíveis.

step2.zip

Passo 3 – prepare os dados

O formato de dados CSV é exatamente isso: valores separados por vírgula. O arquivo contém linhas e cada linha representa um registro ou entrada. Normalmente, a primeira linha de valores contém os nomes de cada valor separado por vírgula (coluna). As linhas subsequentes contêm os valores propriamente ditos.

name,age
chris,26
mike,34

O CSV é legível por humanos, mas há variações desse formato. Às vezes, se os valores contiverem vírgulas (por exemplo, endereços de correspondência), o formato não funcionará como está, de modo que cada valor também é envolvido por aspas. Dessa forma, as vírgulas dentro das aspas são ignoradas e o formato ainda pode funcionar usando apenas as vírgulas fora das aspas para separar os valores.

"name","age","parents"
"Chris","26","Gregory, Mary"
"Mike","34","David, Sarah"

Os valores também podem ser separados usando um caractere diferente, como tabulações no lugar de vírgulas.

Não vamos, porém, nos prender a minúcias. O JSCharting fornece várias ferramentas que ajudam nesse processo e usaremos uma delas para não nos preocuparmos com o formato do arquivo CSV e convertê-lo em JSON (JavaScript Object Notation). O resultado será um array de objetos. Cada objeto representa uma linha com propriedades nomeadas. A primeira linha do arquivo CSV é usada para definir os nomes dessas propriedades.

Este é o url dos dados nos quais estamos interessados: https://data.cdc.gov/resource/w9j2-ggv5.csv.

Você pode clicar para fazer o download e abri-lo no Excel.

No entanto, você fará o download e acessará esses dados CSV em tempo real usando o código JavaScript. O código abaixo pode ser um pouco confuso no início, mas é curto e você pode reutilizá-lo para obter qualquer arquivo CSV, texto ou JSON pela internet de modo programático. É semelhante à antiga tecnologia AJAX, mas muito mais simples de usar.

Mais uma vez, substitua o conteúdo do arquivo index.js pelo seguinte:

fetch('https://data.cdc.gov/resource/w9j2-ggv5.csv')
   .then(function (response) {
      return response.text();
   })
   .then(function (text) {
	csvToSeries(text);
   })
   .catch(function (error) {
      //Something went wrong
      console.log(error);
   });

function csvToSeries(text) {
   console.log(text);
}

Por que é tão complicado? É porque quando você solicita um arquivo, ele não fica disponível imediatamente. Há um atraso e você precisa aguardar a chegada do arquivo. Portanto, primeiro você solicita o arquivo de outro site usando fetch().

fetch('https://data.cdc.gov/resource/w9j2-ggv5.csv')

Em seguida, o código dentro da função de argumento then(...) é chamado com a resposta quando ela chega. Essa função converte a resposta em texto e a retorna, que passa o resultado para a próxima função do método then().

.then(function (response) {
	return response.text();
})

A próxima função do método then(...) chama a função csvToSeries() e passa o texto como argumento.

.then(function (text) {
	csvToSeries(text);
})

Na função do método catch(), você pode especificar o que fazer se algo der errado. Por exemplo, talvez a internet não esteja disponível ou o URL não esteja correto.

.catch(function (error) {
	//Something went wrong
	console.log(error);
});

Nesse caso, o erro é enviado para o console.

Na função csvToSeries(), passamos esse texto para o console para inspeção.

function csvToSeries(text) {
   console.log(text);
}

Observação: a função fetch() nativa não é compatível com o Internet Explorer 11. Se você também quiser oferecer suporte a esse navegador, poderá usar a função JSC.fetch() que vem com o JSCharting. Ela oferece a mesma funcionalidade, mas acrescenta suporte adicional ao IE11.

Arraste o arquivo index.html para uma janela do navegador (ou atualize a página se já estiver aberta) e pressione F12. Isso abrirá a janela DevTools do navegador Chrome. Por padrão, a metade inferior da janela do DevTools mostrará a saída do console. É para lá que o texto é enviado quando você executa códigos usando:

console.log(text);

Você também pode colar ou escrever código nessa janela do console para executá-lo. Tente colar todo o trecho de código acima na janela do console (ao lado do caractere >) e pressione Enter. Você perceberá que obtém o mesmo resultado na saída da janela do console. Isso pode ser útil para testar uma linha de código e fazer experimentos.

step3-a.zip

Neste ponto, você recuperou o texto do arquivo CSV pela internet e o enviou ao console para provar que ele funciona. Agora podemos começar a trabalhar com ele.

Vamos dar uma olhada nesse arquivo de dados para ter uma ideia do que há nele: https://data.cdc.gov/resource/w9j2-ggv5.csv

Usei o Excel para classificar as linhas pela coluna do ano para analisar as linhas de dados de um único ano.

Cada ano contém 9 linhas com dados baseados em raça e sexo. Estamos interessados apenas nos valores destacados de homens e mulheres de todas as raças para cada ano. Você criará duas séries com base nas linhas destacadas. Uma série para valores femininos e outra para valores masculinos.

Agora que você tem uma ideia do que precisa acontecer, vamos começar.

Primeiro, vamos usar a função JSC.csv2Json() para converter o texto no formato JSON e passá-lo para o console para ver o que ele faz.

Atualize a função csvToSeries() com o seguinte código:

function csvToSeries(text) {
   let dataAsJson = JSC.csv2Json(text);
   console.log(dataAsJson)
}

Atualize o navegador para ver a saída atualizada do console.

O console mostra um array de 1062 registros. Este é um desses registros:

{year: 1900, race: "All Races", sex: "Both Sexes", average_life_expectancy: 47.3, mortality: 2518}

Observação: o console pode exibir arrays e objetos para inspeção e você pode expandir e recolher seções no console para explorar detalhes.

O nome da propriedade average_life_expectancy é um pouco longo, mas você precisará usá-lo. Para evitar digitá-lo mais de uma vez, defina uma constante para armazenar esse nome. Quando você precisar usar essa propriedade, basta escrever o nome da constante lifeExp. Ela terá esta aparência, row[lifeExp], em vez de row.average_life_expectancy.

Adicione esta linha na parte superior da função csvToSeries().

function csvToSeries(text) {
	const lifeExp = 'average_life_expectancy';
	...

Você pode processar esses dados usando JavaScript simples. O resultado final que queremos são duas séries com pontos de dados que incluem um ano e a expectativa de vida para cada ponto.

Atualize a função csvToSeries() com o seguinte código:

function csvToSeries(text) {
	const lifeExp = 'average_life_expectancy';
	let dataAsJson = JSC.csv2Json(text);
	let male = [], female = [];
	dataAsJson.forEach(function (row) {
		 //add either to male, female, or discard.
		console.log(row);
	});
}

Ele define arrays para pontos de dados masculinos e femininos. Em seguida, ele chama a função array dataAsJson.forEach() passando uma função de retorno de chamada (callback) function(row){...} como argumento. A função forEach() executará a função de retorno de chamada para cada item no array dataAsJson. Por enquanto, chamaremos apenas console.log(row) em cada linha que a função de retorno de chamada encontrar.

Atualize o navegador e inspecione a saída do console.

Vamos adicionar alguma lógica para filtrar os dados que desejamos e registrar o resultado na janela do console. Substitua a função csvToSeries() por este código.

function csvToSeries(text) {
	const lifeExp = 'average_life_expectancy';
	let dataAsJson = JSC.csv2Json(text);
	let male = [], female = [];
	dataAsJson.forEach(function (row) {
		 //add either to male, female, or discard.
		if (row.race === 'All Races') {
			if (row.sex === 'Male') {
				male.push({x: row.year, y: row[lifeExp]});
			} else if (row.sex === 'Female') {
				female.push({x: row.year, y: row[lifeExp]});
			}
		}
	});
    console.log([male, female]);
}

Dentro da função de retorno de chamada, você decide se a linha é de interesse e a utiliza. Caso contrário, você a descarta.

if (row.race === 'All Races') {
	if (row.sex === 'Male') {
		//add data to male array
		male.push({x: row.year, y: row[lifeExp]});
	} else if (row.sex === 'Female') {
		//add data to female array
		female.push({x: row.year, y: row[lifeExp]});
	}
}

A lógica verifica se o valor row.race é igual a 'All Races'. Se for, verifica se a propriedade row.sex é igual a 'Male' ou 'Female'. Se a linha for igual a qualquer uma delas, ele adiciona os dados aos arrays male ou female como um objeto de ponto {x, y}. Observe o uso da constante lifeExp definida acima, que ajuda a encurtar esse código.

No final, você usou console.log([male, female]) para passar as variáveis male e female (masculino e feminino, em inglês) para o console para inspeção e para garantir que o código funcionou conforme o esperado.

Depois de atualizar o navegador, o console mostra o resultado, que são dois arrays, cada um com 118 pontos de dados que abrangem os anos de 1900 a 2017.

Por fim, em vez de passar o resultado para o console, envolva esses pontos de dados em um array de duas séries que o gráfico possa usar diretamente e retorne-os.

Adicione este código no final da função csvToSeries():

return [
   {name: 'Male', points: male},
   {name: 'Female', points: female}
];

Se o valor retornado fosse enviado para o console, ele produziria este resultado:

Como você pode ver, a lógica para filtrar as linhas é bastante simples e você pode ajustá-la para obter outros detalhes desse conjunto de dados.

Para saber mais sobre como lidar com arquivos CSV usando os utilitários do JSCharting, consulte este tutorial. Quando você estiver pronto para um tratamento de dados mais avançado, o utilitário JSC.nest() poderá ser usado para criar séries e pontos a partir de dados JSON com muito pouco código.

step3-b.zip

Passo 4 – juntando tudo

A seção de manipulação de dados foi a etapa mais difícil, mas só ela permitirá que você manipule e extraia dados de interesse de qualquer arquivo CSV. É aqui que tudo se encaixa e que você terá uma sensação de realização.

Comece adicionando uma função renderChart() ao final do arquivo index.js. Você passará os dados da série para essa função como um argumento.

function renderChart(series){
   JSC.Chart('chartDiv', {
      series: series
   });
}

Na função do método then() que chama a função csvToSeries(), passe o resultado da série para a função renderChart() para ver o que ela desenha no navegador.

.then(function (text) {
	let series = csvToSeries(text);
	renderChart(series);
})

step4-a.zip

Agora, atualize o navegador. Você deverá ver este gráfico que usa os dados CSV processados na seção anterior. Não é incrível?

Uau, o que aconteceu em 1918? A expectativa de vida caiu significativamente lá. De acordo com a Wikipédia, houve uma pandemia de gripe envolvendo o vírus H1N1 que dizimou uma parte da população mundial. Esse evento infeliz mostra como a visualização de dados fornece insights que você normalmente não obteria apenas observando os números.

Você criou um gráfico usando o tipo de série de linhas padrão e ele está com boa aparência, mas pode fazer alguns ajustes para melhorá-lo ainda mais.

Primeiro, adicione um título na parte superior para explicar o que o usuário está vendo e uma anotação na parte inferior do gráfico para dar crédito à fonte dos dados. Atualize a função do construtor JSC.Chart() para passar as seguintes opções:

function renderChart(series){
	JSC.Chart('chartDiv', {
		title_label_text: 'Life Expectancy in the United States',
		annotations: [{
			label_text: 'Source: National Center for Health Statistics',
			position: 'bottom left'
		}],
		series: series
	});
}

Quando você atualiza o navegador, pode ver o gráfico atualizado.

Você adicionou uma anotação com texto do rótulo e uma configuração de posição. Também podemos usar outra anotação para o título, mas foi mais fácil usar o rótulo do título neste exemplo.

É fácil controlar a posição da anotação usando valores como 'top right' ou 'inside bottom right'. O valor 'inside' significa que a anotação é colocada dentro da área do gráfico onde os dados são desenhados. Este exemplo de gráfico de posições de caixa demonstra todas as opções de configuração de posição.

A legenda mostra a soma dos valores de pontos de cada série, mas a soma não é importante para esse conjunto de dados. Você pode reduzir as colunas de legenda para mostrar apenas o ícone e o nome da série usando essa configuração:

legend_template: '%icon,%name'

No entanto, você não precisa realmente usar uma legenda. Será mais limpo se simplesmente rotular as próprias linhas. Você pode desativar a legenda e instruir o gráfico a escrever o nome da série no último ponto de cada série de linhas com essas opções de gráfico:

legend_visible: false,
defaultSeries_lastPoint_label_text: '<b>%seriesName</b>',

O token'%seriesname' é um dos muitos tokens relacionados a pontos que podem ser usados em qualquer texto de rótulo de ponto para mostrar detalhes e cálculos de pontos.

Por fim, vamos ativar a tooltip do eixo x para mostrar a expectativa de vida masculina e feminina em um determinado ano. Em dispositivos móveis, você pode tocar no gráfico para ver a tooltip. Ao usar um PC, a tooltip é exibida ao passar o mouse sobre o gráfico.

xAxis_crosshair_enabled: true,

Você deve estar se perguntando: por que todos esses sublinhados nos nomes das propriedades? Esse não é o nome real da propriedade. É uma forma abreviada de escrever:

xAxis: {crosshair: {enabled: true}},

Você pode achar mais conveniente especificar uma configuração com sublinhados e o JSCharting entenderá o que você quer dizer.

O texto padrão da tooltip é claro, mas vamos personalizá-lo um pouco para torná-lo nosso.

Como tooltip mostra informações sobre cada ponto, o texto é definido nas opções de ponto. A propriedade defaultPoint define as opções de ponto que todos os pontos herdarão automaticamente.

defaultPoint_tooltip: '%seriesName <b>%yValue</b> years',

Para obter mais informações sobre esse recurso, consulte o tutorial sobre mouse de mira (ponto focal) e tooltip (texto em inglês).

Quando você aplicar todas essas opções, seu código será semelhante ao trecho a seguir. Substitua toda a função renderChart() por este código:

function renderChart(series){
	JSC.Chart('chartDiv', {
		title_label_text: 'Life Expectancy in the United States',
		annotations: [{
			label_text: 'Source: National Center for Health Statistics',
			position: 'bottom left'
		}],
        legend_visible: false,
		defaultSeries_lastPoint_label_text: '<b>%seriesName</b>',
		defaultPoint_tooltip: '%seriesName <b>%yValue</b> years',
		xAxis_crosshair_enabled: true,
		series: series
	});
}

Atualize a janela do navegador mais uma vez.

Você conseguiu!

Primeiro, você buscou dados CSV usando JavaScript nativo. Em seguida, você os converteu no formato JSON e filtrou os dados em duas séries. Com essas séries, você criou um belo gráfico de linhas interativo usando o JSCharting e o configurou para ter uma aparência profissional.

Você pode personalizar e ajustar ainda mais os gráficos para atender às suas necessidades específicas. Visite a seção de tutoriais para saber mais sobre um tópico específico ou encontre gráficos semelhantes ao que deseja criar na galeria de exemplos e copie-os para continuar sua jornada de visualização de dados.

Se tiver problemas ao trabalhar com o JSCharting, sinta-se à vontade para entrar em contato com a equipe de suporte. Eles terão prazer em orientá-lo ou ajudar a resolver qualquer problema que você possa encontrar.

step4-b.zip

Desafio adicional

Não usamos todos os dados disponíveis nesse arquivo CSV. Vamos fazer experiências com ele para nos divertirmos e praticarmos.

Crie este gráfico usando o que você aprendeu:

Este arquivo zip contém a resposta:

step5-bonus.zip

Você consegue pensar em outros gráficos que pode fazer com esses dados? Continue experimentando e aproveite cada minuto!