loading...

Criando gráficos com o React Google Charts

hjdesigner profile image Henrique Rodrigues ・3 min read

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

Exemplo visual do gáfico

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.

Discussion

pic
Editor guide
Collapse
lucianofa profile image
José Luciano de Faria

obrigado pelo artigo Henrique!