Change String Y-axis and Google Chart

4

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

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

Iwouldlikeittolooklikethis:

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);
}
    
asked by anonymous 07.11.2016 / 19:34

3 answers

3

What you are looking for is the Axes customization .

In your case specifically, it is vAxis.

To suit your example, change the chart options folder to 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 v: to the value in the chart and f: for 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><divid="grafico"></div>

See a working example in JsFiddle.

    
07.11.2016 / 20:00
3

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 came this 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"}]},
};
    
07.11.2016 / 19:59
2

Only add this snippet within options :

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

It will look like this:

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 .

    
07.11.2016 / 20:05