Problema com chartjs - grafico se sobrepondo

[Rengavitp 0]

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>

 

[wanderval 19]

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