Iniciando com amCharts

Neste artigo iremos falar sobre o amCharts, uma biblioteca JavaScript utilizada para criar diversos tipos de gráficos responsivos e interativos. Se você não se importar de ter o logo deles no canto esquerdo inferior (imagem abaixo) poderá usa-lo sem custo. Do contrário, existem valores para diferentes usos da biblioteca.

O que você precisa

Como a ideia é fornecer um tutorial básico, iremos começar com o mínimo necessário para montar os gráficos. Para isso precisamos possuir ou linkar algumas bibliotecas do deles na nossa página HTML conforme abaixo.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>amCharts</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Um css básico para que o gráfico apareça melhor bem na tela -->
    <style>
        .chart{
            width: 700px;
            max-width: 90vw;
            margin: 0 auto;
            height: 400px;
            max-height: 80vh;
        }
    </style>
</head>
<body>
    <!-- Está div montará nosso gráfico -->
    <div id="chartdiv" class="chart"></div>

    <!-- Estas são as bibliotecas necessárias. -->
    <script src="https://www.amcharts.com/lib/4/core.js"></script>
    <script src="https://www.amcharts.com/lib/4/charts.js"></script>
    
    <!-- Aqui irá nosso código JavaScript -->
    <script src="main.js"></script>
</body>
</html>

 


Montando um gráfico de pizza (Pie Chart)

Para montar um gráfico de pizza, você precisará:

  1. Capturar a DIV que exibirá o gráfico
    let grafico = am4core.create("chartdiv", am4charts.PieChart);
  2. Fornecer uma lista JavaScript de objetos (ou Json) que possuem as propriedades que serão agrupadas com o mesmo nome em todos objetos. É possível apontar para um arquivo externo, mas vamos fazer a versão simples primeiro
    grafico.data = [
            {
                tipo: "imposto",
                valor: 5000
            },
            {
                tipo: "mão de obra",
                valor: 4000
            },
            {
                tipo: "matéria prima",
                valor: 8000
            },
            {
                tipo: "escritório",
                valor: 3000
            },
            {
                tipo: "transporte",
                valor: 1500
            },
            {
                tipo: "outros",
                valor: 1000
            }
        ];
  3. Preencher os dados de configuração conforme os comentários no código abaixo.
    // Cria uma variavel de gráfico de pizza e vincula ela a div do gráfico
    let pieSeries = grafico.series.push(new am4charts.PieSeries());
    
    // Informa o gráfico que a propriedade valor será 
    pieSeries.dataFields.value = "valor";
    pieSeries.dataFields.category = "tipo";

Resultado

Como você pode ver, obtivemos o resultado abaixo utilizando o mínimo de configuração e código JavaScript. Ao mergulhar na documentação, você verá que é possível fazer alterações em praticamente todas as faces do gráfico.


Montando um gráfico de Barras (Bar Chart)

Agora que já possuímos uma noção básica do amCharts, iremos adaptar as coisas utilizadas no gráfico de pizza e adicionar mais algumas coisas

  • Para capturamos e criarmos o gráfico, o código é bem parecido, mas ao invés de utilizarmos a propriedade PieChart, usaremos a XYChart.
    let grafico = am4core.create("chartdiv", am4charts.XYChart);
    // Comparado com o anterior
    // let grafico = am4core.create("chartdiv", am4charts.PieChart);
  • Para nossos dados, iremos utilizar exatamente o mesmo objeto utilizado anteriormente.
    grafico.data = [
            //Mesmo objeto que anteriormente
        ];
  • Desta vez, iremos adicionar legendas aos eixos X e Y para ficarem mais claras as informações passadas.
    let eixoX = grafico.xAxes.push(new am4charts.CategoryAxis());
    eixoX.title.text = "Tipo de Custos";
    
    let eixoY = grafico.yAxes.push(new am4charts.ValueAxis());
    eixoY.title.text = "Custo (R$)";

  • No gráfico de barras precisamos informar explicitamente o local de onde eixoX obterá sua lista de dados.
    eixoX.dataFields.category = "tipo";
  • Por último iremos criar uma serie, que no amCharts significa uma coleção de pontos de dados similares e logicamente agrupados. A série conterá os dados que serão visualizados na relação dos eixos X e Y, nesse caso sendo as barras, mas no gráfico de linhas seria a os pontos ao qual a linha passa

Resultado

Como você pode ver pela imagem abaixo, o amcharts cuida da criação do gráficos de barras de uma forma simples e bonita


Conclusão

A biblioteca do amCharts é simples de utilizar e produz ótimos resultados com pouco código. Para saber como alterar cores, efeitos e outras coisas, acesse o site da documentação ou também o site dos demos.

Para obter o código fonte desta postagem, clique no link de download

[download id=”1684″]

Aprendendo ReactJS: Parte 2

Este artigo é uma continuação da série Aprendendo ReactJS.

Para acessar o artigo anterior, acesse: Aprendendo ReactJS: Introdução



Utilizando atributos com JSX

É possível fornecer valores de atributos usando strings

let elemento = <button className="btnRemover">Remover</button>

Obs.: devido ao fato que “class” é uma palavra reservado do JavaScript, quando você estiver definindo a propriedade classe de uma tag html, utilize a palavra propriedade JavaScript className.

Você também pode fornecer atributos utilizando expressões JavaScript cercadas por chaves:

let elemento = <img src={produto.urlImagem}/>

 

Obs.: Não coloque a expressão dentro de uma string pois isso fará ela ser tratada como uma string pura.

//Não faça isso.    
let elemento = <img src="{produto.urlImagem}"/>

 

Nota: Atributos JSX tem sua nomenclatura definida pela convenção “camelCase”. Por isso atributos HTML como fontsize se tornam fontSize no JSX.

 

Utilizando um objeto style no JSX

O atributo “style” das tags html podem ser populados com um objeto style no lugar de uma string. Veja o exemplo abaixo:

let styleObject = {

    backgroundColor: 'red',

    color: 'blue',

    fontSize: 25,

    width: 100

}

let elemento = <input style={styleObject} />

 

No exemplo abaixo, usaremos o primeiro grupo de chaves para a expressão JavaScript e o segundo para definir o objeto anônimo que definirá o style.

let element = <input style = {{width:200,height:100}}/>

 

 

Utilizando o JSX com elemento aninhados.

Elemento React podem ser aninhados/agrupados dentro de outros elementos React desde que na raiz do elemento exista uma única tag que contem todos.

// Neste exemplo, possuímos 3 elemento e apenas a div externa está na raiz
let elemento = (

    <div>
        <div>Olá MundoJS</div>
        <div>Olá MundoJS</div>
    </div>

)

// Já neste exemplo temos 2 elementos na raiz do objeto. Isso fará com que o React de erro.
var elemento2 = (

    <div>Olá MundoJS</div> 
    <div>Olá MundoJS</div>
)

 

Utilizando objetos JSX

Objetos criados com JSX podem ser manipulados como objetos JavaScript. Eles podem ser inseridos em vetores, utilizados em condicionais, utilizados em loops, passados como argumentos e retornados por funções.

// Exemplo de um objeto JSX utilizado em um IF

let produto = { nome: "banana", quantidade: 0 }

if (produto.quantidade === 0) {

    let elemento = <h1>O produto {produto.nome} não possuí estoque</h1>

}

else {

    let elemento = <h1>O produto {produto.nome} possuí {produto.quantidade} unidades em estoque</h1>

}

ReactDOM.render(

    elemento,
    document.getElementById("root")

)

Componentes React

Um componente React é um componente independente e reutilizável que exibe Elementos React baseados em suas propriedades e estados. Existem 2 tipos de componentes:

  • Componentes Funcionais
  • Componentes de Classe

Os componentes de classe têm um estado, métodos de ciclo de vida e propriedades. Enquanto componentes funcionais tem apenas propriedades. Primeiro veremos como funcionam os componentes funcionais e mais tarde falaremos de como os componentes de classe.

 

Componentes Funcionais

Este tipo de componente é apenas uma função que retorna elementos React. A convenção padrão do ReactJS pede que ao criar uma função, que o nome dela comece com letra maiúscula. Veja o exemplo abaixo:

function OlaMundoJS() {
    return <h1>Olá MundoJS!</h1>
}

 

Para utilizar o componente React que você criou dentro do JSX, basta criar uma tag HTML com o mesmo nome que o componente React.

let elemento = <OlaMundoJS/>

 

Outro exemplo

ReactDOM.render(

    <OlaMundoJS />,

    document.getElementById("root")
)

Em ambos casos, o elemento React exibido será aquele retornado pelo componente funcional HelloWorld.

 

Adicionando propriedades aos componentes funcionais

O primeiro parâmetro passado para um componente funcional é um objeto que contem as propriedades do componente.

function OlaMundo(props) {

    return <h1>mensagem: {props.mensagem}</h1>

}

 

Você pode dar valores as propriedades da mesma forma que são dados valores a atributos HTML.

ReactDOM.render(

    <HelloWorld message="Olá Mundo!" />,

    document.getElementById("root")

)

 

Propriedades podem ser strings, vetores ou qualquer outro tipo de objeto JavaScript. Você também pode utilizar elementos React como propriedades:

function OlaMundo(props) {
    return <h1>Valor: {props.listanumeros[props.index]} </h1>
}

ReactDOM.render(
    <OlaMundo index="3" listaNumeros={[1, 2, 3, 4, 5]} />,
    document.getElementById("root")
)

Criando Componentes

Componentes funcionais podem incluir outros componentes funcionais na sua exibição. Isto nos permite deixar nossos componentes organizados e fáceis de entender. Por exemplo, veja o exemplo abaixo de uma lista de supermercado.

function TituloCompras(props) {
    return (
        <div>
            <h1>{props.titulo}</h1>
            <h2>Total de Itens: {props.numItens}</h2>
        </div>
    )
}


function ItemLista(props) {
    return <li>{props.item}</li>
}


function ListaCompras(props) {
    return (
        <div>
            <h3>{props.cabecalho}</h3>
            <ol>
                <ItemLista item={props.itens[0]} />
                <ItemLista item={props.itens[1]} />
                <ItemLista item={props.itens[2]} />
            </ol>
        </div>
    )
}


function AppDeCompras(props) {
    return (
        <div>
            <TituloCompras titulo="Minha Lista de Compras" numItens="9" />
            <ListaCompras cabecalho="Comida" itens={["Maça", "Pão", "Banana"]} />
            <ListaCompras cabecalho="Roupa" itens={["Camiseta", "Tenis"]} />
            <ListaCompras cabecalho="Outros" itens={["Papel", "Copos", "Potes"]} />
        </div>
    )
}

ReactDOM.render(
    <AppDeCompras />,
    document.getElementById("root")
)

 

E compare isso com apenas definir todos os componentes de IU em um único componente funcional.

function AppDeCompras(props) {
    return (
        <div>
            <div>
                <h1>Minha lista de Compras</h1>
                <h2>Total Number of Items: 9</h2>
            </div>
            <div>
                <h3>Comida</h3>
                <ol>
                    <li>Maça</li>
                    <li>Pão</li>
                    <li>Banana</li>
                </ol>
            </div>
            <div>
                <h3>Roupa</h3>
                <ol>
                    <li>Camiseta</li>
                    <li>Tenis</li>
                </ol>
            </div>
            <div>
                <h3>Outros</h3>
                <ol>
                    <li>Papel</li>
                    <li>Copos</li>
                    <li>Potes</li>
                </ol>
            </div>
        </div>
    )
}



ReactDOM.render(
    <AppDeCompras />,
    document.getElementById("root")
)

É isso ai, esse artigo apresentou diversas coisas que valem serem testadas e praticadas para você se sentir confiante em usar o JSX e criar componentes.

Fique de olho que assim que possível estarei postando a terceira parte.

Você pode fornecer quantas propriedades você quiser. Todas elas serão acessíveis pelo parâmetro “props”.

Inteligência Artificial: Deeplearn.js

A biblioteca Deeplearn.js permite o treinamento de redes neurais, não exigindo instalação de software ou back-end. “Uma biblioteca de aprendizado de máquina do lado do cliente pode ser uma plataforma para explicações interativas, para prototipagem e visualização rápidas, e até para computação offline”, disseram pesquisadores do Google. “E se nada mais, o navegador é uma das plataformas de programação mais populares do mundo”.

Ela é oferecida pelo Google no formato código aberto, com aceleração de hardware para aprendizagem de máquina que é executada em pelo seu navegador. Atualmente ela é suportada apenas na versão desktop do Google Chrome, mas o projeto está para oferecer suporte a outros dispositivos.

Usando a API JavaScript para o WebGL, o Deeplearn.js pode realizar cálculos no GPU. Isso oferece um desempenho significativo, passando assim os limites de velocidade do JavaScript, segundo os pesquisadores.

O Deeplearn.js imita a estrutura da biblioteca de inteligência de máquina TensorFlow da empresa e NumPy, um pacote de computação científica baseado em Python. “Também implementamos versões de algumas das operações TensorFlow mais utilizadas. Com o lançamento do Deeplearn.js, estaremos fornecendo ferramentas para exportar pesos dos pontos de verificação TensorFlow, o que permitirá aos autores importá-los para páginas da internet para a inferência Deeplearn.js “.

Embora o TypeScript da Microsoft seja o idioma escolhido, Deeplearn.js pode ser usado com JavaScript puro. As demonstrações de Deeplearn.js são apresentadas na página inicial do projeto. O Deeplearn.js junta outros projetos que trazem aprendizado de máquina para JavaScript e o navegador, incluindo TensorFire, que permite a execução de redes neurais dentro de uma página e ML.js, que fornece ferramentas de aprendizado de máquina e análise numérica em JavaScript para Node.js.

Caso você tenha interesse em conhecer mais, o site oficial deles é o https://deeplearnjs.org/index.html e eles oferecem diversos demos para que os novos programadores possam ter uma ideia do potencial do Deeplearn. Caso você queira brincar com o código, veja este link: https://deeplearnjs.org/index.html#demos

Iniciando com Chart.js

 

[download id=”404″]

Caso queira ver meu próximo artigo, acesse: Gráficos Dinâmicos com Eventos – Chart.js

Hoje em dia, criar gráficos do zero é uma missão complicada, pois além de ter que escrever todo o Javascript também precisamos pensar no design responsivo, felizmente temos bibliotecas que facilitam nossa vida e deixam o trabalho ainda mais rápido.

O Chart.js é uma biblioteca muito utilizada pela comunidade, é uma biblioteca excelente e muito fácil de usar, mesmo se você não tiver conhecimentos avançados de Javascript você vai conseguir criar gráficos bons, bonitos e responsivos.

Importando Chart.js

Para começar, precisamos escolher a forma de importação, podemos fazer isso por um CDN ou fazendo download.

Existem dois tipos de arquivos Chart.min.js e Chart.js, os arquivos com a extensão .min.js são arquivos que foram minificados, comprimidos para que o carregamento em tela seja mais rápido.

Se você deseja utilizar um CDN, basta clicar neste Link para pegar a versão mais recente do Chart.js ou simplesmente copiar a linha de código abaixo e colar no corpo do seu HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>

Se você prefere fazer download dos arquivos do Chart.js basta clicar neste Link para fazer o download e fazer uma importação normal de Javascript.

<script src="SuaPasta/Chart.min.js"></script>

Gerando o primeiro gráfico

A primeira coisa que precisamos para gerar o nosso plano cartesiano é criar uma tag canvas no HTML e atribuir um id para ela:

<canvas id="primeiroGrafico"></canvas>

Indo para o arquivo Javascript, precisamos criar uma variável capturando nosso canvas e contexto:

let primeiroGrafico = document.getElementById('primeiroGrafico').getContext('2d');

O próximo passo é criar outra variável e instanciar a classe do chart.js passando por parâmetro o nosso canvas e um Objeto Javascript de preferencias deste gráfico:

let primeiroGrafico = document.getElementById('primeiroGrafico').getContext('2d');
                        
let chart = new Chart(primeiroGrafico, {});

É nesse objeto que vamos configurar nosso gráfico, em primeiro lugar vamos dizer qual é o tipo de gráfico que queremos, usando a propriedade type, atribuindo a ela o tipo que desejamos, os tipos que o chart.js disponibiliza são line (gráfico comum de linhas), bar (gráfico de barras), pie (gráfico de pizza), e muito mais, neste exemplo iremos utilizar o tipo line:

let chart = new Chart(primeiroGrafico, {
    type: 'line'             
});

Logo após iniciarmos o plano cartesiano, iremos configurar os dados do nosso gráfico usando a propriedade data:

let chart = new Chart(primeiroGrafico, {
    type: 'line',
                        
    data: {
        labels: ['2000', '2001', '2002', '2003', '2004', '2005'],
                    
        datasets: [
            {
                label: 'Crecimento Populacional',
                data: [173448346, 175885229, 178276128, 180619108, 182911487, 185150806]
            }
        ]
    }
});

A propriedade data também é um objeto, no exemplo acima configuramos duas propriedades para o objeto data, que são labels e datasets.

Na propriedade labels inserimos um array de string referente aos pontos do gráfico no eixo X

Na propriedade datasets inserimos um array de Objetos, referente aos dados apresentados no Gráfico, a propriedade label é o título do gráfico, na propriedade data inserimos um array de number referente aos pontos do Gráfico no eixo Y

Importante:

Você deve inserir um array de Strings na propriedade labels, na propriedade data você deve inserir um array de Number

Os itens do array de data serão ligados aos itens correspondentes no array de labels, é importante que os dois arrays estejam na ordem desejada, por exemplo:

labels: [‘2000’, ‘2001’, ‘2002’, ‘2003’, ‘2004’, ‘2005’]
data: [173448346, 175885229, 178276128, 180619108, 182911487, 185150806]

Nesse caso o primeiro ponto será colocado no ano 2000 (eixo X) e no número 173.448.346 (eixo Y), e assim sucessivamente


Continue lendo “Iniciando com Chart.js”