CODEWITHSUNDEEP
google-visualization
VJS
VJS

Reputation: 1151

Display google column chart vAxis interval as whole number and intervals like 0,50,100,200,300

Wan to display the google column chart vAxis as whole number..

it is automatically displays 0.0,0.5,1.0... like this. I don't the max number of vAxis.

I have used the below code for whole number. need the solution like 0,1,2,3,4....

chart.draw(data, {
               width: 800,
               height: 480,
               orientation: 'horizontal',
               vAxis: {format: '0'}
              }
       );

give me some idea for solve this.. thanks in advance..

Upvotes: 1

Views: 1138

Answers (1)

Vadim Gremyachev
Vadim Gremyachev

Reputation: 59338

You could specify it via hAxis.ticks property:

Replaces the automatically generated X-axis ticks with the specified array. Each element of the array should be either a valid tick value (such as a number, date, datetime, or timeofday), or an object. If it's an object, it should have a v property for the tick value, and an optional f property containing the literal string to be displayed as the label.

Examples:

hAxis: { ticks: [5,10,15,20] }
hAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
hAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
hAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }

This option is only supported for a continuous axis.

Type: Array of elements Default: auto

Example

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

function drawBasic() {

      var data = new google.visualization.DataTable();
      data.addColumn('timeofday', 'Time of Day');
      data.addColumn('number', 'Motivation Level');

      data.addRows([
        [{v: [8, 0, 0], f: '8 am'}, 0.1],
        [{v: [9, 0, 0], f: '9 am'}, 0.5],
        [{v: [10, 0, 0], f:'10 am'}, 1.3],
        [{v: [11, 0, 0], f: '11 am'}, 8.4],
        [{v: [12, 0, 0], f: '12 pm'}, 6.5],
        [{v: [13, 0, 0], f: '1 pm'}, 0.6],
        [{v: [14, 0, 0], f: '2 pm'}, 2.7],
        [{v: [15, 0, 0], f: '3 pm'}, 1.2],
        [{v: [16, 0, 0], f: '4 pm'}, 2.9],
        [{v: [17, 0, 0], f: '5 pm'}, 1.0],
      ]);

      var options = {
        title: 'Motivation Level Throughout the Day',
        hAxis: {
          title: 'Time of Day',
          format: 'h:mm a',
        },
        vAxis: {
          title: 'Rating (scale of 0-10)',
          minValue: 0,
          ticks: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
        },
        orientation: 'horizontal'
      };

      var chart = new google.visualization.ColumnChart(
        document.getElementById('chart_div'));

      chart.draw(data, options);
    }
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div" style="height: 480px"></div>

Upvotes: 2

Related Questions