Jump to content
Rengavitp

Problema com chartjs - grafico se sobrepondo

Recommended Posts

Bom dia Pessoal,

Será que alguém pode me ajudar? Estou com problema com o chartjs. estou gerando grafico ok, porem quando eu preciso gerar o mesmo pela segunda vez passando outros parametros ao invés de substituir ele sobrepõe sobre o antigo, e quando eu passo o mouse sobre o grafico ele fica intercalando entre o antigo e o novo, como faço para limpar o grafico antes de criar o novo? tentei diretamente no canvas mas qualquer metodo de limpeza faz com que pare de funcionar. abaixo meu código.

 

<script>
            function montaGraficoProducao() {
                var ctx;
                var myChart;
                var dt1 = document.getElementById("data_pd1").value;
                var dt2 = document.getElementById("data_pd2").value;
                $.ajax({
                    type: "POST",
                    url: "processa/processa_grafico_producao.jsp",
                    data: {
                        data1: dt1,
                        data2: dt2
                    }
                }).done(function (msg) {

                    if (msg.replace(/\s/g, '') !== "erro") {
                        var info = msg.trim().split("*");
                        var l = info[0];
                        var l1 = l.split(",");
                        var s = info[1];
                        var s1 = s.split(",");
                        var labels = [];
                        var series = [];
                        l1.forEach(function (mes) {
                            labels.push(mes);
                        });
                        s1.forEach(function (vl) {
                            series.push(vl);
                        });
                            ctx = document.getElementById('prodChart').getContext('2d');
                            myChart = new Chart(ctx, {
                            type: $("#c_tipo_graf").val(),
                            responsive: true,
                            hoverMode: 'index',
                            stacked: true,
                            data: {
                                labels: labels,
                                datasets: [{
                                        label: 'Ton/Mês',
                                        fill: false,
                                        backgroundColor: "rgba(1, 150, 249, 1)",
                                        borderColor: "rgba(1, 150, 249, 1)",
                                        data: series
                                    }]
                            }
                        });
                    } else {
                        alert("erro");
                    }
                });
            }
        </script>

 

Share this post


Link to post
Share on other sites

Acredito que o problema seja pq sempre cria uma nova instancia e nunca destroy a instancia anterior.

 

JS

// declara variavel fora para armazenar instancia
var myChart;

function montaGraficoProducao(option) {
  var ctx = document.getElementById('prodChart').getContext('2d');
  var graphType = document.getElementById('graph-type').value;
  var data = getData(option)
  var labels = data.labels;
  var series = data.series;
  
  // checa a existencia de uma instancia e destroy
  if(myChart) {
    myChart.destroy();
  }
  
  myChart = new Chart(ctx, {
    type: graphType,
    responsive: true,
    hoverMode: 'index',
    stacked: true,
    data: {
      labels: labels,
      datasets: [{
        label: 'Ton/Mês',
        fill: false,
        backgroundColor: "rgba(1, 150, 249, 1)",
        borderColor: "rgba(1, 150, 249, 1)",
        data: series
      }]
    }
  });
  
  
}

function getData(option) {
  const obj = {
    '1': {
      'labels': ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      'series': [0, 10, 5, 2, 20, 30, 45]
    },
    '2': {
      'labels': ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      'series': [0, 3, 1, 10, 13, 22, 17]
    }
  };
  
  return obj[option];
}

Jsbin: https://jsbin.com/payepiyuga/edit?html,js,output

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By ernestovm
      Bom dia.
      Descobri, depois de muito trabalho, um problema esquisito. Tenho duas imagens que chamam funções JavaScript determinadas. Uma funciona e a outra não. Isso no Firefox. No Chrome as duas funcionam perfeitamente. Alguém conhece alguma gambiarra para fazer o Firefox funcionar? Segue os códigos:
      HTML:
      <img src="images/ic_abrir.png" width="70" height="70" onClick="abre_notificacao(<? echo "'".$us_codigo."','".$item."'"; ?>);" style="cursor:pointer" id="p_imagem-<? echo $item; ?>" name="p_imagem-<? echo $item; ?>">
       <img src="images/ic_excluir.png" width="70" height="70" onClick="excluir_notificacao(<? echo "'".$us_codigo."'"; ?>);" style="cursor:pointer">
      JAVASCRIPT:
      <script type="text/javascript">
          function abre_notificacao(codigo,indice) {
              $("#p_imagem-"+indice).attr("src","images/ic_abrir_ok.png");
              $("#ver-"+indice).css("display", "block");
          }
          function excluir_notificacao(codigo) {
              $.post("excluir_notificacao.php", {codigo: codigo}, function(resposta) {
                  confirm(resposta+" ("+codigo+")");
              });
              location.reload();
          }

      </script>
      A Função abre_notificacao(codigo,indice)  funciona perfeitamente nos dois browsers.
      A Função excluir_notificacao(codigo) só funciona no Chrome.
      Obrigado pela luz
    • By _marlon307
      Boa noite. Bom Dia.
      Estou com um problema com meu menu hover em React. quando eu passo o mouse em cima do elemnto para abrir o menu le renderiza todas as abas e quando passo o mouse sobre o menu ele fica bugado.
       
      import React, { useState } from 'react'; import { Link } from 'react-router-dom'; //import DropModMn from '../../Helper/DropModMn'; import { ReactComponent as Respponse } from '../../icons/respponse.svg'; import styles from '../css/search.module.css'; import SubMenuCtg from './SubMneu/SubMenuCtg';   const Search = () => {       const menu = [         {             nctg: 'Masculino',             ctg: ['Categoria', 'Categoria', 'Categoria 3', 'Categoria 4', 'Categoria 5'],         },         {             nctg: 'Femenino',             ctg: ['Categoria 3', 'Categoria 4', 'Categoria 5', 'Categoria 6', 'Categoria 7'],         },         {             nctg: 'Criança',             ctg: ['Categoria 8', 'Categoria 9', 'Categoria 10', 'Categoria 11', 'Categoria 12'],         },         {             nctg: 'Acessórios',             ctg: ['Categoria 13', 'Categoria 14', 'Categoria 15', 'Categoria 16', 'Categoria 17'],         },         {             nctg: 'Promoção',             ctg: ['Categoria 18', 'Categoria 19', 'Categoria 20', 'Categoria 21', 'Categoria 22', 'Categoria 22', 'Categoria 22', 'Categoria 22', 'Categoria 22', 'Categoria 22', 'Categoria 22'],         }       ];      const [expand, setExpand] = useState(false);       function MouseOver(event){         event.preventDefault();                  console.log(event);           if(expand) setExpand(!expand);         else setExpand(!expand);     }       return (           <nav className={styles.search}>               <div className={styles.ct}>                 <Link to="/" className={styles.index}>                     <Respponse aria-label="Respponse"/>                 </Link>               </div>               <div className={styles.ct}>                   <ul className={styles.ldep}>                       {menu.map((m) =>                                                  <li className={styles.ictg} key={m.nctg} onMouseOver={MouseOver} onMouseLeave={MouseOver}>                               <Link className={`${styles.lctg} imh`} to={m.nctg}>{m.nctg}</Link>                                                          <SubMenuCtg gl={m.ctg} exp={expand} />                                                    </li>                     )}                                      </ul>             </div>         </nav>     ) }   export default Search
    • By Fluk
      Bom dia Galera, 
      Sou novo por aqui, estou estudando um pouco sobre o Google Script e Java Script. 

      Estou tentando criar um programinha que lê e exibe em tela os dados que estão armazenados em minha Base (FibreBase). 
      Mas quando tento puxar através da API Google google.script.run.minhaFunção() e salvar em uma variável o JavaScript passa direto não aguardando o fim da leitura de arquivo. 
      Dei uma lida sobre ser assíncrona a requisição que estou fazendo, mazers tentei de varias forma fa aguardar mas não consegui. 

       
      document.getElementById('ConsultarClientes').addEventListener( 'click',   function (){     // Buscar dados  FireBase Lista de Clientes     const clientes = getFireBase('Clientes/Arquivos');     clientes.then(retorno => console.log(retorno));   } ,false);   async function getFireBase(chave){   return google.script.run.withSuccessHandler().getFireBase(chave); };   Console log retorno
       
    • By SingleSistemas
      Olá, estou escrevendo um código aonde preciso colocar o JSON dentro de uma array, porém, o JSON foi parciado utilizando o JSON.parse, para atribuir o conteudo do document.todosOsFretes, segue o exemplo:  
      Queria saber qual alternativa que pode ser feita para mim poder colocar o document.todosOsFretes dentro de uma array e pesquisar nele, algum campo...
      Desde já agradeço.
       
       
       
       

    • By marceloDiegues
      Olá, amigos.
      Por favor,  me ajude com a seguintes perguntas.
       
      Qual a complexidade de um projeto desse?
      Qual o preçp de um projeto desse tipo?
       
      Quero contratar algum profissional para criar um site que tenha as seguintes funcionabilidades:
       
      1- Cadastro de usuário;
      2- Login e senha;
      3- O site seria muito parecido com o www.qconcursos.com, o usuário resolveria questões online.
      Contudo, haveria a possibilidade de criar salas tipo aqueles bate-papo da &nbsp;UOL.
      Então, o usuário criaria salas de estudos, em que , resolveria questões e conseguiria se comunicar por chat com usuários que estejam na mesma sala.
       
      Exemplo em anexo:
       
       
       
       

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.