Chart.js – como criar gráficos com o Chart.js

Neste post vamos aprender a criar belos gráficos apenas com HTML5, CSS e JavaScript através da biblioteca Chart.JS.

Fazer gráficos para web está cada vez mais fácil com HTML5, CSS e JS. Neste post vamos analisar como criar belos gráficos em HTML5 sem a necessidade de um banco de dados com a ajuda da biblioteca JS Chart.js.


Introdução

O Chart.JS é uma biblioteca em JavaScript que auxilia na criação de gráficos utilizando apenas HTML, CSS e JS para renderizar os gráficos (renderizado na maquina do usuário, utiliza o elemento canvas do HTML5 para renderizar o gráfico).

O Chart.JS possui vários temas diferentes para gráficos, entre os tradicionais como barra e pizza. Na nova versão da biblioteca foi adicionado suporte responsivo, legenda para os gráficos e opções de gráficos interativos e modulares.

Chart.JS - Web Social Dev - IMG Post

Mais informações: [su_button url=”http://www.chartjs.org/” target=”blank” style=”flat” background=”#2c3e50″ size=”5″ icon=”icon: file-o”]Demo & Documentação[/su_button] [su_button url=”https://github.com/nnnick/Chart.js” target=”blank” style=”flat” background=”#2c3e50″ size=”5″ icon=”icon: github”]GitHub[/su_button]

Como utilizar

Fiz um demo com todos os gráficos, disponível aqui: [su_button url=”http://websocialdev.com/wp-content/uploads/2014/04/chart.js_websocialdev_tutorial_demo.zip” target=”blank” style=”flat” background=”#2c3e50″ size=”5″ icon=”icon: file-o”]Demo[/su_button]

Primeiro precisamos incluir o script da biblioteca na pagina HTML, e para isso você precisa baixar o pacote da biblioteca no site do Chart.JS ou no GitHub. Copie e cole o script para a pasta do seu projeto e crie uma referência como a apresentada abaixo entre a tag da sua pagina HTML.

No nosso demo, com o gráfico em linha, ficou o seguinte:

<script src="chart.min.js"></script>

Obs: estamos linkando o arquivo .min para poupar processamento do navegador, mas o arquivo padrão chart.js também pode ser linkado.

Feito isso, declaramos a tag canvas que vai renderizar o gráfico:

<div class="box-chart">
  <canvas id="GraficoLine" style="width:100%;"></canvas>
</div>

Obs: utilizamos uma propriedade CSS in-line aqui para definir que o elemento canvas vai ocupar todo o elemento DIV(box-chart) onde ele está declarado.


Agora precisamos declarar o script JavaScript que chama o gráfico. Você também pode declarar o script com jQuery, de acordo com a documentação da biblioteca.

<script type="text/javascript">
    window.onload = function(){
        var ctx = document.getElementById("GraficoLine").getContext("2d");
        var LineChart = new Chart(ctx).Line(data, options);
    }  
</script>

~

Vamos desconstruir esse script:

  1. utilizamos o método window.onload para garantir que o código vai ser executado após a página carregar por completo.
  2. declaramos uma variável chamada ctx e buscamos o elemento canvas através do ID que vai guardar as informações para renderizar o gráfico. Aqui também é utilizado o método getContext(“2d”) que informa ao elemento canvas que ali será renderizado gráficos 2d.
  3. declaramos uma variável chamada LineChart, que vai receber os valores do objeto Chart gerado com base na data e options declaradas. Aqui informamos o tipo do gráfico que será criado, neste caso, Line.

Com os scripts e a tag canvas declarados, agora podemos declarar as informações do gráfico a ser renderizado.

<script type="text/javascript">
    var options = {
        responsive:true
    };

    var data = {
        labels: ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"],
        datasets: [
            {
                label: "Dados primários",
                fillColor: "rgba(220,220,220,0.2)",
                strokeColor: "rgba(220,220,220,1)",
                pointColor: "rgba(220,220,220,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
            },
            {
                label: "Dados secundários",
                fillColor: "rgba(151,187,205,0.2)",
                strokeColor: "rgba(151,187,205,1)",
                pointColor: "rgba(151,187,205,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(151,187,205,1)",
                data: [28, 48, 40, 19, 86, 27, 90, 200, 87, 20, 50, 20]
            }
        ]
    };
</script>

Entendendo o código:

  1. declaramos a variável options para utilizar as configurações extras do gráfico, neste caso, informando que o mesmo deve ser responsivo. Existem uma porção de opções para cada tipo de gráfico, assim como também existem opções globais que interferem em todos os gráficos.
  2. declaramos a variável data que é responsável pelos valores dos itens do gráfico e pela configuração visual do gráfico.
  3. Note que declaramos a variável randomnb() na propriedade data ao invés de entrar com números fixos nos dados primários, que é responsável por gerar números aleatórios até o número 300. Caso não deseje utilizar números aleatórios, este é o local onde você pode puxar dados dinâmicos com base em um banco de dados ou declarar valores separados por vírgula.


Se todas as informações foram agregadas da maneira que apresentamos, você vai obter o resultado da imagem abaixo.

Chart.js – LineChart Demo - Web Social Dev

Como ja foi informado, a biblioteca do Chart.JS possui diversos temas para os gráficos, nesta introdução testamos o gráfico em linhas.

Abaixo vamos analisar exemplos dos demais gráficos que a biblioteca Chart.js tem a oferecer.

Gráfico Barra

Este gráfico pode ser utilizado para comparar diferentes dados em relação a um mesmo período, por exemplo, vendas de um mês relacionadas a outro mês.

Chart.js – Bar Chart Demo - Web Social Dev

Para gerar o gráfico da imagem acima utilize o seguinte código:

<canvas id="GraficoBarra" style="width:100%;"></canvas>
<script type="text/javascript">                                        

    var options = {
        responsive:true
    };

    var data = {
        labels: ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"],
        datasets: [
            {
                label: "Dados primários",
                fillColor: "rgba(220,220,220,0.5)",
                strokeColor: "rgba(220,220,220,0.8)",
                highlightFill: "rgba(220,220,220,0.75)",
                highlightStroke: "rgba(220,220,220,1)",
                data: [randomnb(), randomnb(), randomnb(), randomnb(), randomnb(), randomnb(), randomnb(), randomnb(), randomnb(), randomnb(), randomnb(), randomnb()]
            },
            {
                label: "Dados secundários",
                fillColor: "rgba(151,187,205,0.5)",
                strokeColor: "rgba(151,187,205,0.8)",
                highlightFill: "rgba(151,187,205,0.75)",
                highlightStroke: "rgba(151,187,205,1)",
                data: [28, 48, 40, 19, 86, 27, 90, randomnb(), randomnb(), randomnb(), randomnb(), randomnb()]
            }
        ]
    };                

    window.onload = function(){
        var ctx = document.getElementById("GraficoBarra").getContext("2d");
        var BarChart = new Chart(ctx).Bar(data, options);
    }          
</script>


Gráfico Radar

Este gráfico pode ser utilizado para comparar duas ou mais informações com base em vários critérios diferentes

Chart.js – Radar Chart Demo - Web Social Dev

Utilize o seguinte código para gerar o gráfico acima:

<canvas id="GraficoRadar" style="width:100%;"></canvas>
<script type="text/javascript">

    var options = {
        responsive:true
    };

    var data = {
        labels: ["Comendo", "Bebendo", "Dormindo", "Produzindo", "Estudando", "Correndo", "Malhando"],
        datasets: [
            {
                label: "Dados Primários",
                fillColor: "rgba(220,220,220,0.2)",
                strokeColor: "rgba(220,220,220,1)",
                pointColor: "rgba(220,220,220,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: [randomnb(), randomnb(), randomnb(), randomnb(), randomnb(), randomnb(), randomnb()]
            },
            {
                label: "Dados Secundários",
                fillColor: "rgba(151,187,205,0.2)",
                strokeColor: "rgba(151,187,205,1)",
                pointColor: "rgba(151,187,205,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(151,187,205,1)",
                data: [28, 48, 40, 19, 96, randomnb(), randomnb()]
            }
        ]
    };            
   
    window.onload = function(){
        var ctx = document.getElementById("GraficoRadar").getContext("2d");
        var RadarChart = new Chart(ctx).Radar(data, options);
    }  
</script>

Gráfico Pizza e Donut

Provavelmente o tipo de gráfico mais comum, excelente para comparar a proporção de diversos itens. Os dois tipos exercem a mesma função em relação a visualização das informações, a unica diferença é o estilo visual do gráfico que no formato Donut, lembra uma rosquinha (centro vago).

Chart.js – Pizza Chart Demo - Web Social Dev

Insira o seguinte código para gerar o gráfico acima:

<canvas id="GraficoPizza" style="width:100%;"></canvas>
<script type="text/javascript">

    var options = {
        responsive:true
    };

    var data = [
        {
            value: randomnb(),
            color:"#F7464A",
            highlight: "#FF5A5E",
            label: "Vermelho"
        },
        {
            value: randomnb(),
            color: "#46BFBD",
            highlight: "#5AD3D1",
            label: "Verde"
        },
        {
            value: randomnb(),
            color: "#FDB45C",
            highlight: "#FFC870",
            label: "Amarelo"
        }
    ]
   
    window.onload = function(){
        var ctx = document.getElementById("GraficoPizza").getContext("2d");
        var PizzaChart = new Chart(ctx).Pie(data, options);
    }  
</script>


Para gerar o gráfico Donut utilize o código:

Chart.js – Donut Chart Demo - Web Social Dev

<canvas id="GraficoDonut" style="width:100%;"></canvas>
<script type="text/javascript">

    var options = {
        responsive:true        
    };

    var data = [
        {
            value: randomnb(),
            color:"#F7464A",
            highlight: "#FF5A5E",
            label: "Vermelho"
        },
        {
            value: randomnb(),
            color: "#46BFBD",
            highlight: "#5AD3D1",
            label: "Azul"
        },
        {
            value: 15,
            color: "#FDB45C",
            highlight: "#FFC870",
            label: "Amarelo"
        }
    ]
   
    window.onload = function(){

        var ctx = document.getElementById("GraficoDonut").getContext("2d");
        var PizzaChart = new Chart(ctx).Doughnut(data, options);
    }  
</script>

Gráfico Polar

Este tipo de gráfico team a finalidade similar ao gráfico pizza/donut, a unica diferença é o raio de alcance de determinado item com base no seu valor, conforme a imagem abaixo.

Chart.js – Polar Chart Demo - Web Social Dev

Para gerar o gráfico acima, utilizamos o seguinte código:

<canvas id="GraficoPolar" style="width:100%;"></canvas>
<script type="text/javascript">                                        

    var options = {
        responsive:true
    };

    var data = [
        {
            value: randomScalingFactor(),
            color:"#F7464A",
            highlight: "#FF5A5E",
            label: "Vermelho"
        },
        {
            value: randomScalingFactor(),
            color: "#46BFBD",
            highlight: "#5AD3D1",
            label: "Azul"
        },
        {
            value: randomScalingFactor(),
            color: "#FDB45C",
            highlight: "#FFC870",
            label: "Amarelo"
        },
        {
            value: randomScalingFactor(),
            color: "#949FB1",
            highlight: "#A8B3C5",
            label: "Cinza"
        },
        {
            value: randomScalingFactor(),
            color: "#4D5360",
            highlight: "#616774",
            label: "Cinza escuro"
        }

    ];                

    window.onload = function(){

        var ctx = document.getElementById("GraficoPolar").getContext("2d");
        var PolarChart = new Chart(ctx).PolarArea(data, options);
    }          
</script>


Opções globais

Havia mencionado no inicio do tutorial que os gráficos se servem de algumas opções globais, opções essas disponíveis para habilitar ou desabilitar alguma função do gráfico, gostaria apenas de apresentar essas opções, que podem ser declaradas junto a variável data do script de cada gráfico

Todos os nossos exemplos estão com a variável options apenas declarando que o nosso gráfico é responsivo, para utilizar mais opções com base nas opções globais basta concatenar a mesma dentro do valor da variável options.

// Boolean - Animar exibição do gráfico
animation: true,

// Number - Duração da animação
animationSteps: 60,

// String - Animação
animationEasing: "easeOutQuart",

// Boolean - Mostrar escala
showScale: true,

// Boolean - Subscrever dados do gráfico
scaleOverride: false,

// Boolean - Mostrar legendas
scaleShowLabels: true,

// Boolean - Definir se escala deve apresentar apenas números inteiros ou não
scaleIntegersOnly: true,

// Boolean - Gráfico deve começar do 0, ou algum ponto de referência
scaleBeginAtZero: false,

// String - Fonte que será renderizada para apresentar informações no gráfico
scaleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",

// Number - Tamanho da fonte renderizada
scaleFontSize: 12,

// String - Tipo de fonte renderizada, normal, bold, thin...
scaleFontStyle: "normal",

// String - Cor da fonte
scaleFontColor: "#666",

// Boolean - Se o gráfico deve ser responsivo ou não
responsive: false,

// Boolean - Mostrar ou não balão com informações no hover do mouse
showTooltips: true,

// Array - Laço com eventos do mouse para apresentar balão de informações
tooltipEvents: ["mousemove", "touchstart", "touchmove"],

// String - Cor de fundo de balão de informações
tooltipFillColor: "rgba(0,0,0,0.8)",

// String - Fonte do balão de informações
tooltipFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",

// Number - Tamanho da fonte no balão de informações
tooltipFontSize: 14,

// String - Tipo da fonte no balão de informações, bold, normal, thin
tooltipFontStyle: "normal",

// String - Cor do texto no balão de informações
tooltipFontColor: "#fff",

// String - Tipo de fonte para a informação de escala
tooltipTitleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",

// Number - Tamanho da fonte para o balão de informações em px
tooltipTitleFontSize: 14,

// String - Tipo de fonte no balão de informações, normal, bold, thin
tooltipTitleFontStyle: "bold",

// String - Cor da fonte no balão de informações
tooltipTitleFontColor: "#fff",

// Number - Padding em px do balão de informações
tooltipYPadding: 6,

// Number - Padding em px do texto do balão de informações
tooltipXPadding: 6,

// Number - Tamanho do caret no balão de informações
tooltipCaretSize: 8,

// Number - Borda do balão de informações em px
tooltipCornerRadius: 6,


Conclusão

Para quem deseja adicionar gráficos em pequenos projetos ou em um dashboard de uma pagina de adm back end, a solução do Chart.JS é perfeita. Você também pode combinar o código da biblioteca com PHP para incluir os dados a partir de um banco de dados e automatizar a atualização dos gráficos.

Qualquer duvida, estou a disposição nos comentários.

🙂

  • Mychael Ribeiro

    Olá, gostaria de saber se o Chart.js serve para gerar gráfico a partir dum form, eu digito os dados e depois gera o gráfico…

    • ele serve sim, mas tudo isso você vai precisar fazer em partes, ele recebe o valor por variáveis, então no caso você pode criar outras funções de ação e destinar o valor as variáveis que vão gerar o gráfico. ele só não é responsivo por padrão.

  • Carlos

    Tem como exibir o valor quando se passa mouse no gráfico? Parecido com do Google?

    • por padrão não, mas da pra resolver isso de várias formas sem muito esforço!

  • Leandro Lazaro

    Escreva uma rotina para calcular o posicionamento das marcações da escala de um gráfico de modo que sempre apareçam números redondos. A rotina deve receber a faixa de valores na escala e a quantidade de pontos no gráfico, e devolver as posições das marcações e quantas casas decimais devem ser usadas para que os números fiquem “bonitos”.
    exemplo na figura em anexo

    • Não consegui entender amigo, explica melhor por favor.

      • é uma rotina que voce entra com um numero inicial e final e em quantas partes vai ser dividido, seria o eixo do y, num grafico,só que esses numeros teriam que ser multiplos, de 1,2,5, 10, 15…,
        ficou mais claro, pode ser quebrado ou melhor ter mantissa, tipo ,25, ,50, seria isto

  • Diego

    Gostaria de saber como criar no gráfico de barras, uma nova escala no eixo y a direita do gráfico, para comparar duas barras, que representam infirmações de escalas diferentes.

  • Rodrigo

    Ola, eu tenho que monitorar algums results uitlizando um comando em server AIX, é possivel eu passar isso pra esse tipo de grafico com html5? se souberem e me ajudar ficarei muito grato, obrigado!

    • Olá Rodrigo,
      temos que verificar a compatibilidade desse server com serviços web, se der para exportar ou utilizar as informações não tem problema. Não sei se é bem isso que precisa, mas hoje dando uma vasculhada por ai encontrei essa solução que parece cabível ao seu caso: http://scoutapp.github.io/scout_realtime/

  • Felipe

    olá como eu faço para que o gráfico seja apagado e reconstruído novamente depois de um evento. Estou colocando o gráfico em um carrossel e quero que a animação inicial seja feita sempre que entrar no slide do gráfico, e não que ele já esteja construído.

    • você vai precisar criar uma função em javascript pra ele executar o chart toda vez que o slide tal estiver na selecionado

  • L̶e̶a̶n̶d̶r̶o̶ M̶a̶r̶t̶i̶n̶s̶

    Muito interessante, mas um exemplo pegando do BD e deixando dinâmico seria mais interessante ainda … Parabéns

    • Obrigado Leandro, estou pra fazer um exemplo com BD faz um tempo, mas sempre aparece outra coisa pra ver no meio do caminho, to vendo se crio um painel simples pra uma solução que fiz pro trabalho, se ficar legal eu compartilho 🙂

      • Quando postar por favor avisa 🙂 Estou com essa mesma necessidade.
        Ou se puder mostrar aqui nos comentários mesmo…

        • Olá igor, posto sim, é que to atarefado com alguns projetos, assim que finalizar eu te aviso 😉

          • Jonatas Lopes

            Fala man! Tudo baum?
            Por acaso você tem alguma referência de tutorial que mostre o chart.js trabalhando com um BD? Ou por acaso você criou algum tuto por aqui e eu não achei??

            Vlw’s!

    • Jonatas Lopes

      Alguém já conseguiu um exemplo de como usar integrado com um BD?

      Vlw galera! Qualquer referência é bem vinda.

  • Kennedy Sampaio

    Pra iniciante (leigo), como deve ficar a estrutura de arquivos pra rodar esses exemplos?

    • Kennedy, bom dia.
      A estrutura de arquivos é simples, basta linkar os arquivos do chart.js. No ínicio do post tem um link pra download de um demo bem simples que fiz com todos os gráficos, da pra ter uma idéia da estrutura. 🙂

  • Guilherme Alvarenga

    Excelente trabalho, ótimo mesmo, estou finalizando meu TCC e isso me ajudará muito. Obrigado

    • Guilherme, obrigado, seu comentário me alegra muito, bom TCC! qualquer coisa estamos aí 🙂

  • Camila

    Ótimo trabalho , tem como exibir os valores em porcentagem em cada barra do gráfico em barra

    • tem sim, é só alterar o valor da data do gráfico, cuida apenas com a sintaxe ao utilizar o símbolo %

  • vilourenco

    Sensacional!

  • Yuri Cavalcante

    Amigo, eh possível deixar os tooltips fixos? Ao invés de só exibilos no Hover?

  • Cara, que tutorial incrível! Sua explicação é absurdamente simples e direta. Na medida que você explica, me surgiu dúvidas e você – como se fosse mágica – respondia logo em seguida no tutorial. Parabéns!

    • Muito obrigado Stanley, qualquer duvida estamos ai! 😀

  • Pedro Nunes

    Muito bom, exatamente o que procurava para um projeto aqui.
    Só uma duvida estetica, tem com as linhas do gráfico de linha serem retas?

  • Breno

    Nao esta funcionando aqui
    :/

  • Thiago Brito

    Muito bom. Cara, eu consigo usar cada pedaço de pizza como um link? Tentei algumas coisas aqui e não consegui, pois cada resultado ao ser clicado, iria pra uma pagina diferente.

  • Ola, como faço para colocar dois gráficos na mesma pagina? Estou aprendendo consegui colocar um gráfico copiando o exemplo mas quando coloco outro começa a dar problema.

    • Willian, é só criar cada gráfico em uma função, assim não da conflito. Desculpa a demora para responder, qualquer coisa estamos ai!

  • Larissa Masson

    Oi… eu gostaria por exemplo de, ao clicar numa barra do gráfico, chamar uma função para executar outras coisas.. será que ele permite esse tipo de interação?

    • possível é, mas você vai ter que encontrar uma brecha na lógica hahaha tenta fazer com javascript mesmo alguma coisa.

    • permite, isso é viável através do JavaScript, basta editar a função do gráfico. Deve ter exemplos na internet com essa interação, da uma olhada no CodePen. 🙂

  • Edilton

    Muito bom, mas não estou conseguindo com banco de dados carregar os valores em “data:”

    • Boa noite Edilton,
      você está tentando com valores em PHP?

  • Pedro

    cara me salve estou usando o grafico em barras bem proximo do exemplo q vc usou! uso 4 barras para 4 meses representando cada funcionario e seu resultado! so tenho um problema insiro o label da coluna mas quando passo mouse em cima dela o label nao aparece apenas valor aparece! isso é possível??!! pois até no exemplo online nao funciona rssrsrsr tem que ativar algo? ja procurei!!

  • Luiza C.

    Olá, como eu coloco dois graficos na mesma página html?

    • Nicholas Eduardo

      Cria duas tags com ids diferentes e instancia em variaveis diferentes a biblioteca.

      • isso! e cuidado no script 🙂

        • Rodrigo Neres Rodrigues

          Amigo, não entendi onde mudo as instâncias. Pode dar mais detalhes ou link. Abraços

  • Ramiro Monte

    No gráfico em pizza tem como rotacionar e inverter a animação para sentido anti-horário e que comece como ponto inicial o lado direito ao inves da parte de cima?

  • Robson

    Estou precisando de criar um grafico de linhas usando o chart.js a partir do meu mysql na minha pagina php para um trabalho 🙁 alguém pode me ajudar?

    • Robson, desculpe a demora, tem como sim. Faz um select dos valores no BD retornando os dados em JSON. daí é só utilizar os dados com uma variável no chartjs. procura no google chartjs mysql integration, tem muito exemplo simples dessa funcionalidade! 🙂

  • Victor Alves

    Muito bom, mas estou com uma dúvida. Não estou conseguindo colocar dois gráficos do mesmo tipo para funcionar na mesma página, o que poderia ser?

    • utiliza uma função para cada gráfico, além de cada um ter de estar em um elemento canvas.

  • Jorge Fenner Junior

    Cara, me da uma luz, to a dias tentando descobrir pq raios quando puxo os dados do banco de dados usando php e coloco uma variável no “value” o gráfico(de pizza) ele nao fecha a pizza? Mas no momento que troco por números aleatórios ele funciona? Segue o codigo:

    var data = [

    {

    value: checklistnao,

    color: “#0000FF”,

    highlight: “#4169E1”,

    label: “Não”

    },

    {

    value: checklistsim,

    color: “#FF0000”,

    highlight: “#FF4500”,

    label: “Sim”

    },

    ]

    • Jorge Fenner Junior

      Consegui! Quando puxo do do banco e passo a variavel do php para o js o js consideira esse numero como um string basta converter para int e ta tudo certo! Tutotial ta muito bom e simples! Parabéns ta salvando a galera!

      • Jorge muito obrigado por dar um parecer da solução! eu um tempo atrás fiz mais ou menos a mesma coisa para utilizar com dados em php, mas dessa forma ta muito mais simples, com certeza mais tarde eu vou testar ! valeu jorge, Boa sorte !

  • Jefferson Cardozo

    Gostei muito do post, muito bom mesmo.

    Mas, pra variar, estou com um probleminha que eu não sei se é possível implementar. Os gráficos de linhas mostra sempre o valor maior mais cheio e o menor mais vazio. Porém, eu tenho uma situação em que quanto menor o valor, melhor, por exemplo:

    tendo um conjunto de valor que vai de 1 a 33, o menor valor deve ir no topo da lista e assim ser mais cheio que o de valor 20.

    É possível inverter?

    • jefferson, boa noite, juro que não consegui entender. tem um exemplo mais detalhado?

      • Jefferson Cardozo

        Vou tentar explicar melhor. Por exemplo o dados seguintes:

        ano | valor
        2015 | 01
        2014 | 15
        2013 | 05
        2012 | 20
        2011 | 35

        o gráfico ficará, mais ou menos, como na imagem 1, anexa.

        Pra mim, quanto menor o valor, melhor. Então eu preciso dele invertido, igual a imagem 02.

  • glauco cruz barros

    Alguem sabe dizer como trazer do BD para que o numero fica com casa decimal, pois sempre que trago o mesmo ele fica inteiro. Agradeço

    • já tentou fazer um parse com javascript, no valor?

  • Ricardo Paladino

    Oi Thierry,no grafico pizza tem como colocar numero dentro da pizza?
    Se tiver como colocar pode mostrar como?

  • Ricardo Paladino

    Oi Thierry,no grafico pizza tem como colocar numero dentro da pizza?
    Se tiver como colocar pode mostrar como?

  • david

    Como recuperar os dados do SQL e passar no grafico?

  • Thales Ferreira

    Como faço pra pedir pro usuário digitar um valor de x e y e colocar no gráfico de linhas, por que pelo o que eu percebi o gráfico é fixo em um determinado valor e não to conseguindo colocar uma variável como parâmetro ali. Agradeço a ajuda.

  • Bruno

    Não consegui colocar mais de um gráfico do mesmo tipo na mesma página. Tem como fazer isso? Tentei mudar no id do elemento, colocando GraficoPizza1, GraficoPizza2, etc… mas só aparece o último que eu inseri.

  • Mario Toledo

    Opa, beleza? Primeiramente queria parabenizar o post. Não conhecia essa biblioteca, e achei a mesma muito boa. Porém restou uma dúvida. Atualmente estou desenvolvendo um hotsite, e preciso puxar algumas informações e inserir no gráfico, assim que essas informações forem atualizadas. Só que existe um problema. Cada usuário terá seu acesso via php, e colocará também os dados via php, alterando os valores do banco com update (padrão 0). Queria saber se consigo puxar as informações do banco de dados (via php) e inserir no lugar desses números randômicos, levando em conta que cada usuário terá acesso, nessa página, a apenas seu gráfico. Obrigado pela postagem e pela atenção!

  • Como posso adicionar uma legenda flutuando no meio do gráfico? estou usando Intervals charts.. valeu

  • Carlos Eduardo

    queria fazer o grafico editavel voce entra na administração coloca os numeros la ai voce salva e ele atualiza o grafico da outra pagina como faz isso????

  • jamilson

    Bom dia, vasculhei seu código todo e não encontrei oq queria.
    Como posso deixar as linhas totalmente retas no gráfico de linhas?

  • Vitor Moraes Ribeiro

    Amigo, fiz exatamente tudo que você postou, deu certo, porém estou precisando buscar os dados no Banco de Dados do Postgresql. Até consegui fazer gerando um PHP e depois dando “include” no lugar randomnb(). Mas foi um bela gambiarra, pois tive que criar um .php para cada informação do gráfico. Tem como fazer um exemplo ai usando o bando de dados ?

  • Marcelo Viana

    Fantástico! Obrigado e parabéns.

  • rafael carvalho

    Boa noite Thierry, tem como colocar mais de 2 valores no gráfico de linha?
    No seu exemplo tem 2 valores um sobrepondo o outro, preciso de um gráfico com no mínimo 3 valores sobrepostos. é possível?
    Obrigado!

  • Sharys Ferlin

    Oi, o meu dá um erro com esses plugins, pode me ajudar?

    index.html:311 Uncaught ReferenceError: scipt is not defined(…)onmousemove @ index.html:311

  • Bruno

    Muito bom esse tutorial, parabéns! Tenho usado muito esses gráficos.
    Mas eu tenho uma dúvida, tem como deixar os tooltips sempre visíveis? sem ter que passar o mouse sobre o ítem.
    Obrigado!

  • Renato De Oliveira Lucena

    Muito bom.

  • Thaís

    Olá, boa tarde.
    Primeiramente obrigada por esse post, me ajudou muito.
    Meu programa consiste em carregar os dados de acordo com um ID que é selecionado num combo.
    Porém estou com um problema, ao carregar mais de uma gráfico e passando o mouse sobre eles, aparecem todos os gráficos já carregados. Se eu atualizo a página e carrego apenas um gráfico, isso não acontece.
    Percebi que retirando “mousemove” isso para de acontecer, mas não é uma boa opção pois não consigo visualizar os dados da barra.
    Está acontecendo que nem neste post, porém não consegui resolver por ele:
    https://github.com/jtblin/angular-chart.js/issues/187

    Obrigada!