Position plots and values

Question

The code for the chart is in HTML.

In the code below, there are these Abels:

["Área 2","Área 3","Área 7","Área 5","Área 10","Área 8","Área 11","Área 9","Área 1","Área 14"]

According to the date values:

 [145,110,100,75,70,70,60,45,40,20],

I managed to make a matrix for:

data: {labels:[MatrizSArea],

And another to:

data: [MatrizSPontos],

But I can’t assemble the chart, the variaces are even loaded but it doesn’t appear correctly on the chart

Follows the code:

function Mychart(){


var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {labels:[MatrizSArea],
        datasets: [{label: 'SITUAÇÃO CRÍTICA',
            data: [MatrizSPontos],

            backgroundColor: [

                'rgb(255, 0, 0)',
                'rgb(255, 0, 0)',
                'rgb(255, 0, 0)',
                'rgb(191, 143, 0)',
                'rgb(191, 143, 0)',
                'rgb(255, 255, 0)',
                'rgb(255, 255, 0)',
                'rgb(0, 176, 80)',
                'rgb(0, 176, 80)',
                'rgb(0, 176, 80)'

            ],
        }]
    },
    options: {
        title: {
                    display: true,
                    text: 'DEPARTAMENTO DE ESTAMPARIA'
                },

        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});

}

Answer 1

Are you using the Chart js. right? So. You can use the function update() in the Chart to update.

All you need to do is change the value of the dataset (or add a new value..) and call the method update().

Here’s an example where I change the value of the attribute data dataset by another array and update Chart:

PS: Note that you do not need to simply change the date. you can change the entire object relating to dataset hassle-free.

var ctx = document.getElementById("myChart").getContext('2d');

// Pode ser um array de objetos no mesmo formato
// do dataset do Chart, que pode ser alterado por completo
// caso necessário.. 


var chartData = [{
    labels: ["Área 2", "Área 3", "Área 7", "Área 5", "Área 10", "Área 8", "Área 11", "Área 9", "Área 1", "Área 14"],
    datasets: [{
      label: 'SITUAÇÃO CRÍTICA',
      data: [145, 110, 100, 75, 70, 70, 60, 45, 40, 20],
      backgroundColor: [
        'rgb(255, 0, 0)',
        'rgb(255, 0, 0)',
        'rgb(255, 0, 0)',
        'rgb(191, 143, 0)',
        'rgb(191, 143, 0)',
        'rgb(255, 255, 0)',
        'rgb(255, 255, 0)',
        'rgb(0, 176, 80)',
        'rgb(0, 176, 80)',
        'rgb(0, 176, 80)'
      ],
    }]
  },
  {
    labels: ["Área 1", "Área 4", "Área 6", "Área 15", "Área 20", "Área 18", "Área 21", "Área 19", "Área 13", "Área 24"],
    datasets: [{
      label: 'SITUAÇÃO NORMAL',
      data: [110, 210, 150, 25, 130, 90, 10, 115, 230, 25],
      backgroundColor: [
        'rgb(255, 100, 0)',
        'rgb(255, 0, 100)',
        'rgb(255, 50, 50)',
        'rgb(191, 143, 40)',
        'rgb(191, 143, 40)',
        'rgb(255, 100, 120)',
        'rgb(255, 100, 120)',
        'rgb(50, 176, 80)',
        'rgb(50, 176, 80)',
        'rgb(60, 176, 80)'
      ],
    }]
  }
];

// aguarda uns segundos...
setTimeout(function() {
  // Substitui os dados do primeiro dataset
  myChart.data = chartData[1];

  // Atualiza o chart...
  myChart.update();
}, 5000);

var myChart = new Chart(ctx, {
  type: 'bar',
  data: chartData[0],
  options: {
    title: {
      display: true,
      text: 'DEPARTAMENTO DE ESTAMPARIA'
    },

    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="myChart" width="10px"></canvas>