Updating data in chart.js

Question

I just met chart.js and I'm trying to handle it but it's getting hard for me.

My intention is to initially have some data, var data = [2478,5267,734,784,433]; but if a button is clicked, these are modified and the table is updated, var data = [2,5,7,7,4];

With the code I show below I can do it, but I am really creating a new one and therefore the two overlap me.

function pieChart(datos){
    var ctx = document.getElementById("pie-chart").getContext("2d");

    var tipo = 'pie';
    var etiquetas = ["Africa", "Asia", "Europe", "Latin America", "North America"];
    //var datos = [2478,5267,734,784,433];
    var colores = ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"];
    var titulo = 'Predicted world population (millions) in 2050';

    var myPieChart = new Chart(ctx, {
        type: tipo,
        data: {
            labels: etiquetas,
            datasets: [{
              backgroundColor: colores,
              borderWidth: 1,
              borderColor: '#FFF',
              data: datos
            }]
          },
          options: {
            title: {
              display: true,
              text: titulo
            }
          }
    });
}

// MAIN
$(document).ready(function(){

    var datos = [2478,5267,734,784,433];
    pieChart(datos);

    // Botón pulsado
    $('.btn_graf').click(function(){
        var id_btn = $(this).attr("id");

        if (id_btn == 'bat_graf_btn'){
            alert('pulsado');
            var datos = [2,5,7,7,4];
            pieChart(datos);
        }
    });
});

Reading the documentation I see that it can be done by calling a function and adding values ​​to the array and I suppose that the old ones have been previously removed. But I don't know how to do it because I probably have something wrongly done / understood.

function pieChart(datos){
    var ctx = document.getElementById("pie-chart").getContext("2d");

    var tipo = 'pie';
    var etiquetas = ["Africa", "Asia", "Europe", "Latin America", "North America"];
    //var datos = [2478,5267,734,784,433];
    var colores = ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"];
    var titulo = 'Predicted world population (millions) in 2050';

    var myPieChart = new Chart(ctx, {
        type: tipo,
        data: {
            labels: etiquetas,
            datasets: [{
              label: "Population (millions)",
              backgroundColor: colores,
              borderWidth: 1,
              borderColor: '#FFF',
              data: datos,
            }]
          },
          options: {
            title: {
              display: true,
              text: titulo
            }
          }
    });
}
function addData(chart, label, data) {
    chart.data.labels.push(label);
    chart.data.datasets.forEach((dataset) => {
        dataset.data.push(data);
    });
    chart.update();
}
function removeData(chart) {
    chart.data.labels.pop();
    chart.data.datasets.forEach((dataset) => {
        dataset.data.pop();
    });
    chart.update();
}

// MAIN
$(document).ready(function(){

    var datos = [2478,5267,734,784,433];
    pieChart(datos);

    // Botón pulsado
    $('.btn_graf').click(function(){
        var id_btn = $(this).attr("id");

        if (id_btn == 'bat_graf_btn'){
            alert('pulsado');
            var datos = [2,5,7,7,4];
            removeData(myPieChart);
            addData(myPieChart, "Population (millions)", datos);
        }
    });
});

If someone can guide me it would be great. I think it is a very useful tool when it comes to graphing information and I would like to learn how to handle it.

Thank you very much.

Answer 1

If you need to access the chart variable, make the scope more accessible.

Initialize it as null at the top and assign it in the function. You can then access it later.

const colores = ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850"];
const etiquetas = ["Africa", "Asia", "Europe", "Latin America", "North America"];

var myPieChart = null; // "global" access...

function pieChart(datos) {
  let ctx = document.getElementById("pie-chart").getContext("2d");
  let tipo = 'pie';
  let titulo = 'Predicted world population (millions) in 2050';

  myPieChart = new Chart(ctx, {
    type: tipo,
    data: {
      labels: etiquetas,
      datasets: [{
        label: "Population (millions)",
        backgroundColor: colores,
        borderWidth: 1,
        borderColor: '#FFF',
        data: datos,
      }]
    },
    options: {
      title: {
        display: true,
        text: titulo
      }
    }
  });
}

function addData(chart, title, data) {
  chart.options.title.text = title;
  chart.data.datasets.forEach((dataset, i) => {
    dataset.data = data;
  });
  chart.update();
}

function removeData(chart) {
  chart.data.datasets.forEach((dataset) => {
    dataset.data.pop();
  });
  chart.update();
}

// MAIN
$(document).ready(function() {
  pieChart([2478, 5267, 734, 784, 433]);

  // Botón pulsado
  $('.btn_graf').click(function() {
    let id_btn = $(this).attr("id");

    if (id_btn == 'bat_graf_btn') {
      removeData(myPieChart);
      addData(myPieChart, "Population (millions)", [2, 5, 7, 7, 4]);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.css" rel="stylesheet" />
<canvas id="pie-chart"></canvas>
<button class="btn_graf" id="bat_graf_btn">Change Data</button>