CODEWITHSUNDEEP
javascriptgoogle-visualization
mapmath
mapmath

Reputation: 1532

Google Charts - Scale in Y-Axis

I use Material column charts in my Web App.

and I have following out

enter image description here

and codes are below,

google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
   var data = google.visualization.arrayToDataTable([
              ['Structure', 'Estimated', 'Actual'],
              ['hours', 6, 8],
              ['hours2', 20, 18],                              
            ]);

            var options = {
              chart: {
                title: 'Structures by Hours',
                subtitle: 'Estimated vs Actual',
              }
            };

            var chart = new google.charts.Bar(document.getElementById('columnchart_hours'));

            chart.draw(data, options);

What I want to do two things / need your hand, (on red circled area the image.)

  1. to name the Y-Axis as Hours
  2. and make the same axis scale 2 hours by 2 hours so that the Y-Axis / Hours Axis become 2, 4, 6, 8, 10 so on.

Thanks in advance,

Upvotes: 1

Views: 7502

Answers (1)

WhiteHat
WhiteHat

Reputation: 61275

Need to set configuration options for the vAxis. 

    vAxis: {
        title: 'Hours',
        ticks: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20]
    }
  1. Use title for the axis label.
  2. Supply an array to ticks for the axis tick marks.

However, it doesn't appear ticks works for Material charts.
Note the options have to be converted as well...
google.charts.Bar.convertOptions

This example shows both a Core chart and a Material chart... 

google.load('visualization', '1', {
  packages: ['corechart', 'bar'],
  callback: drawBarChart
});

function drawBarChart() {
    var data = google.visualization.arrayToDataTable([
        ['Structure', 'Estimated', 'Actual'],
        ['hours', 6, 8],
        ['hours2', 20, 18],
    ]);

    var options = {
        chart: {
            title: 'Structures by Hours',
            subtitle: 'Estimated vs Actual',
        },
        vAxis: {
            title: 'Hours',
            ticks: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20]
        }
    };

    var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_hours'));
    chart.draw(data, options);

    var chart2 = new google.charts.Bar(document.getElementById('columnchart_hours2'));
    chart2.draw(data, google.charts.Bar.convertOptions(options));
}
<script src="https://www.google.com/jsapi"></script>
<div id="columnchart_hours"></div>
<div id="columnchart_hours2"></div>

Upvotes: 2

Related Questions