Criando gráficos com o React Google Charts

#googlecharts #react #createreactapp

Para quem não conhece, o Google Charts é uma ferramenta de gráficos poderosa, simples de usar e gratuita. Você pode escolher desde simples gráficos de dispersão a mapas

Criando um novo projeto usando create-react-app:

create-react-app react-google-charts

Vamos adicionar no projeto o Google Charts:

yarn add react-google-charts

Vamos abrir o arquivo src/App.js e remover os códigos que não vamos utilizar e fazer o import do Goolge Charts:

import React from 'react';
import { Chart } from "react-google-charts";
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
      </header>
    </div>
  );
}

export default App;

Agora vamos criar 2 states para controlar as informações do gráfico: um vai ser para os options e o outro para o data:

import React, { useState } from 'react';
import { Chart } from "react-google-charts";
import logo from './logo.svg';
import './App.css';

function App() {
  const [options, setOptions] = {}
  const [data, setData] = []
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
      </header>
    </div>
  );
}

export default App;

No options vamos adicionar o titulo e no data os valores do gráfico:

import React, { useState } from 'react';
import { Chart } from "react-google-charts";
import logo from './logo.svg';
import './App.css';

function App() {
  const [options, setOptions] = {
    title: 'Gráfico de Pizza'
  }
  const [data, setData] = [
    ['React', 100],
    ['Angula', 80],
    ['Vue', 50],
  ]
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
      </header>
    </div>
  );
}

export default App;

Para finalizar vamos adicionar o componente Chat e passar nosso state para ele:

import React, { useState } from 'react';
import { Chart } from "react-google-charts";
import logo from './logo.svg';
import './App.css';

function App() {
  const [options, setOptions] = useState({
    title: 'Gráfico de Pizza'
  })
  const [data, setData] = useState([
    ['Linguagens', 'Quantidade'],
    ['React', 100],
    ['Angula', 80],
    ['Vue', 50],
  ])
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <div>
          <Chart
            width={'500px'}
            height={'300px'}
            chartType="PieChart"
            data={data}
            options={options}
          />
        </div>
      </header>
    </div>
  );
}

export default App;

Agora só falta visualizar o gráfico, rode o comando abaixo na pasta do projeto e acesse o projeto no seu navegador http://localhost:3000/:

yarn start

O Google Chats tem diversos gráficos para você utilizar e você pode adicionar mais de um gráfico na pagina, como por exemplo, o de barra

import React, { useState } from 'react';
import { Chart } from "react-google-charts";
import logo from './logo.svg';
import './App.css';

function App() {
  const [options, setOptions] = useState({
    title: 'Gráfico de Pizza'
  });
  const [optionsBar, setOptionsBar] = useState({
    title: 'Gráfico de Barra'
  });
  const [data, setData] = useState([
    ['Linguagens', 'Quantidade'],
    ['React', 100],
    ['Angula', 80],
    ['Vue', 50],
  ]);
  const [dataBar, setDataBar] = useState([
    ['Cidades', '2010 População', '2000 População'],
    ['New York City, NY', 8175000, 8008000],
    ['Los Angeles, CA', 3792000, 3694000],
    ['Chicago, IL', 2695000, 2896000],
    ['Houston, TX', 2099000, 1953000],
    ['Philadelphia, PA', 1526000, 1517000],
  ])
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <div style={{display: "flex"}}>
          <Chart
            width={'500px'}
            height={'300px'}
            chartType="PieChart"
            data={data}
            options={options}
          />
          <Chart
            width={'500px'}
            height={'300px'}
            chartType="BarChart"
            data={dataBar}
            options={optionsBar}
          />
        </div>
      </header>
    </div>
  );
}

export default App;

Atualize seu navegador e veja o novo gráfico

Como eu disse no começo do texto ele é bem simples de utilizar e bem poderoso, acesse o link do Google Chats e veja na documentação todos os modelos de gráficos e suas configurações

Obrigado por ler este artigo. Espero poder fornecer-lhes algumas informações úteis. Se sim, eu ficaria muito feliz se você recomendasse este post e clicasse no botão do ♥ para que mais pessoas possam ver isso.

Se houver perguntas ou você quiser adicionar algo aqui, por favor, deixe um comentário, ou me procure no Twitter.