Position labels and values on chart

Question

Position labels and values on chart

Navigation

#1 by (0 votes)

0

The code for the graphic is in HTML.

In the code below, there are these labels:

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

According to date values:

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

I was able to do an array for:

data: {labels:[MatrizSArea],

And another for:

data: [MatrizSPontos],

But I can not mount the chart, the variables are loaded but it does not appear correctly in the chart

Follow 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
                }
            }]
        }
    }
});

}

javascript chartjs chart

asked by anonymous 21.03.2018 / 17:57

1 answer

NodeJS, PassportJS, or JWT Authentication in Google Cloud Functions I can not clone a project through Git and Visual Studio 2017

score 0 · Accepted Answer

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

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

Here is an example where I change the value of the data attribute of the dataset to another array and update the chart:

PS: Note that you do not have to simply change the date. you can swap the entire object for dataset without problems.

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><canvasid="myChart" width="10px"></canvas>