Change String Axis Y Google Chart

Question

Utilise Google Chart to generate charts. I have a array with values from 1 to 4. These values are of the type int. I need to change the description of the Y-axis. To:

1 = Great 2 = Good 3 = regular, 4 = Bad.

I’d like to keep it that way:

google.charts.load('current', {'packages': ['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Pergunta', 'Valor 1', 'Valor 2'],
        ['Pergunta 1', 2, 3],
        ['Pergunta 2', 4, 1],
        ['Pergunta 3', 1, 1]
    ]);

    var options = {
        height: 600           

    };

    var chart = new google.visualization.LineChart(document.getElementById('grafico'));

    chart.draw(data, options);
}

Answer 1

See if it works that way. For better understanding you can also use Jsfiddle to simulate what happens so we can help you better. In my head it came to me for now...

var options = {
   height: 600,
   vAxis: {title: "Status", ticks: [{v:1, f:"Ótimo"}, {v:2, f:"Bom"}, {v:3, f:"Regular"}, {v:4, f:"Ruim"}]},
};

Answer 2

What you seek is customization of the Axes.

In your case specifically, it is vAxis.

To suit your example, folder change chart options for this:

 var options = {
        height: 600,
        vAxis: {
          title: 'Rating (scale of 1-10)',
          ticks: [{v:0, f:"Ótimo 1"},{v:2.5, f:"Bom 2"},{v:5.0, f:"Regular 3"},{v:7.5, f:"Ruim 4"}]
        }        
    };

Just change the v: for the value contained in the graph and the f: by the text you want to display.

See the example below:

google.charts.load('current', {
  'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Pergunta', 'Valor 1', 'Valor 2'],
    ['Pergunta 1', 2, 3],
    ['Pergunta 2', 4, 1],
    ['Pergunta 3', 1, 1]
  ]);

  var options = {
    height: 600,
    vAxis: {
      title: 'Rating (scale of 1-10)',
      ticks: [{
        v: 1,
        f: "Ótimo 1"
      }, {
        v: 2,
        f: "Bom 2"
      }, {
        v: 3,
        f: "Regular 3"
      }, {
        v: 4,
        f: "Ruim 4"
      }]
    }
  };

  var chart = new google.visualization.LineChart(document.getElementById('grafico'));

  chart.draw(data, options);
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="grafico"></div>

See a functional example in Jsfiddle.

Answer 3

Just add this section inside the options:

vAxis: {
        ticks: [{v:1, f:"Ótimo 1"},
        {v:2, f:"Bom 2"},
        {v:3, f:"Regular 3"},
        {v:4, f:"Ruim 4"}]
       } 

It’ll stay that way:

google.charts.load('current', {'packages': ['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Pergunta', 'Valor 1', 'Valor 2'],
        ['Pergunta 1', 2, 3],
        ['Pergunta 2', 4, 1],
        ['Pergunta 3', 1, 1]
    ]);

    var options = {
        height: 600,
        vAxis: {
          ticks: [{v:1, f:"Ótimo 1"},
          {v:2, f:"Bom 2"},
          {v:3, f:"Regular 3"},
          {v:4, f:"Ruim 4"}]
        }        
    };

    var chart = new google.visualization.LineChart(document.getElementById('grafico'));

    chart.draw(data, options);
}

See working on Jsfiddle.