CODEWITHSUNDEEP
google-visualization
jriff
jriff

Reputation: 1977

Google visualization and y-axis values

This might be very simple but I have been unable to find any answer.

I have this visualization:

<script type="text/javascript"> 
      google.load('visualization', '1', {'packages':['corechart']});
      google.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Week');
        data.addColumn('number', 'Sales');

        data.addRows([["1", 2], ["2", 1], ["3", 5], ["4", 2], ["5", 1], ["6", 0], ["7", 0], ["8", 2], ["9", 1], ["10", 0], ["11", 1], ["12", 0], ["13", 1], ["14", 0], ["15", 1], ["16", 0], ["17", 0], ["18", 3], ["19", 0], ["20", 0], ["21", 0], ["22", 0], ["23", 0], ["24", 0], ["25", 0], ["26", 0], ["27", 0], ["28", 0], ["29", 0], ["30", 0], ["31", 0], ["32", 0], ["33", 0], ["34", 0], ["35", 0], ["36", 0], ["37", 0], ["38", 0], ["39", 0], ["40", 0], ["41", 0], ["42", 0], ["43", 0], ["44", 0], ["45", 0], ["46", 0], ["47", 0], ["48", 0], ["49", 0], ["50", 0], ["51", 0], ["52", 1], ["53", 0], ["54", 0]]);

        var chart = new google.visualization.ColumnChart(document.getElementById('shops_sales_pr_week'));
        chart.draw(data, {width: 850, height: 300, chartArea: {left:20}, vAxis: {}, hAxis: {showTextEvery:2}});
      }
    </script>

For some reason the API chooses to make the Y-axis as 1.5, 3.0, 4.5, etc. Why, oh why? 1, 2, 3, 4 would be nice. I can format it using 

vAxis: {format: '##'}

but that just rounds the labels - they still represent their original number.

Can someone help?

Upvotes: 1

Views: 4772

Answers (3)

kstevens
kstevens

Reputation: 1

Try format: '#' instead of format: '##'

Upvotes: 0

Smit
Smit

Reputation: 1569

Replace your packages with:

'linechart'

will work.

Upvotes: 1

ryanmurakami
ryanmurakami

Reputation: 1

It's not exact, but you can specify a maxValue for the vAxis, which will change the intervals. So, try it like this:

chart.draw(data, {vAxis: {maxValue: 8}});

You might need to mess around with the maxValue number to make it show correctly. Good luck!

Upvotes: 0

Related Questions