How to change the Y axis format?

59 views
Skip to first unread message

DomingoSL

unread,
Nov 16, 2011, 2:58:25 AM11/16/11
to Google Visualization API
Hello guys, i will like not to have decimals on my Yaxis because im
ploting daily visits to a site using a columm chart. The problem is
that when i have 0 visits or 1 visit the chart display like this:
http://imgur.com/5yQ1J,Tc40n#0 . As you can see this is not acceptable
to a daily visits chart, when i have more than one visit it became
like i want: http://imgur.com/5yQ1J,Tc40n#1

So, How to control this? i always want integers. Thanks for any help!

asgallant

unread,
Nov 16, 2011, 11:45:16 AM11/16/11
to google-visua...@googlegroups.com
The axis always has 5 tick marks, which are chosen based on the min and max values of your chart data unless you override them using the h/vAxis minValue and maxValue options.  If you know the general range of your data, you can set static values for the options (set them such that (maxValue - minValue)/4 is an integer value).  You could also use this function that I wrote: https://groups.google.com/d/msg/google-visualization-api/exndQy2JzvM/3FJ31dMaIkcJ

DomingoSL

unread,
Nov 17, 2011, 2:47:49 AM11/17/11
to google-visua...@googlegroups.com
Ok lets say that i know the range of data, min and max, in this particular case, my problem is when the visits are equal to 1. In this case i want the max to be 2 the min to be 0 and the tick mark equal to 2, that means that the y axis will show 0 -1 - 2. I unsderstand well the math part of your answer but i have no idea of how to implement this in my render, i will add you my code so you can show me how to insert your suggestions, thanks!

<script type="text/javascript">
      google.load('visualization', '1.0', {'packages':['corechart']});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Number');
      data.addColumn('number', 'Visits');
<?php
$salida = "";
$fgmembersite->DBLogin();
$result=mysql_query("SELECT country, COUNT(1) as numVisits FROM ".table_stats." WHERE type='profile_visit' AND user_url = '".$_GET['ref']."' AND id_user='".$_SESSION['user_code']."' GROUP BY country");
echo "data.addRows([";
while($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
$salida = $salida . "['".$row['country']."', ".$row['numVisits']."],";
}
$salida = rtrim($salida, ",");
echo $salida . "]);";
?>
      var options = {'width':300, 'height':300, 'backgroundColor': { fill: 'none' }, 'legend': 'bottom'};
      var chart = new google.visualization.PieChart(document.getElementById('chart_div_country'));
      chart.draw(data, options);
    }
    </script> 

asgallant

unread,
Nov 17, 2011, 9:07:07 AM11/17/11
to google-visua...@googlegroups.com
There is no way to have just 0, 1, 2 for the axis values - there are always 5 values, no matter what you do.  The code you pasted draws a Pie Chart, which doesn't have this problem, so I suspect you meant to post some other code.  When you post it, please post the javascript generated by your PHP (not the raw PHP) so we can test it.

DomingoSL

unread,
Nov 17, 2011, 9:21:16 AM11/17/11
to google-visua...@googlegroups.com
ok, here is the raw script so you can test, as you will see the Y-Axis has 0 0.25 0.50 0.75 and 1 values, as i said, i dont want decimals because is a daily visits chart:

<script type="text/javascript">
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
var raw_data = [['Visits',1],['Prints/Saves',0]];var years = ['2011-11-16'];
data.addColumn('string', 'Date');
for (var i = 0; i < raw_data.length; ++i) {
data.addColumn('number', raw_data[i][0]);
}
data.addRows(years.length);
for (var j = 0; j < years.length; ++j) {
data.setValue(j, 0, years[j].toString());
}
for (var i = 0; i < raw_data.length; ++i) {
for (var j = 1; j < raw_data[i].length; ++j) {
data.setValue(j-1, i+1, raw_data[i][j]);
}
}
var options = {'width':660, 'height':300, 'backgroundColor': { fill: 'none' }, 'legend': 'right'};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div_general'));
chart.draw(data, options);
}
</script>


asgallant

unread,
Nov 17, 2011, 10:18:16 AM11/17/11
to google-visua...@googlegroups.com
Ok, here is how you would put it to use: http://jsfiddle.net/Dxayk/

DomingoSL

unread,
Nov 17, 2011, 10:46:57 AM11/17/11
to google-visua...@googlegroups.com
Thanks!!!
Reply all
Reply to author
Forward
0 new messages