CODEWITHSUNDEEP
google-visualization
E T
E T

Reputation: 381

Duplicated Numbers on Google Charts Vertical Axis

I was working on a bugfix with Google visualizations for a combo (column/line) chart when one of the axes went strange and started repeating numbers ( ie: 1, 1, 2, 2 instead of 1, 2, 3, 4). Please see the image below

duplicate axes
(source: rackcdn.com)

Here are the chart option settings:

// Instantiate and draw our chart, passing in some options. 
var frequency_by_day_options = {
    vAxes: [
        {format:'#,###', title:"Call Volume"}, 
        {format: '#%', title:'Missed Call Rate',
          viewWindow:{
            max:1,
          }}
        ],      
    legend: {position: 'none'},
    chartArea: { height:'60%', width:'60%'},
    width: 800,
    height: 350,
    backgroundColor: 'transparent',
    bar: { groupWidth: '90%'},
    isStacked: true,
    seriesType: 'bars',
    series: {0: {type:'bar', targetAxisIndex:0}, 1: {type:'line', targetAxisIndex:1},},
    colors: ['blue', 'green'],
    animation:{
        duration: 1000,
        easing: 'out',},
    };

I have no idea what's going on here. Even when I comment out all of the vAxis options I still observe this behavior. Any ideas on what i'm doing wrong? This is driving me nuts :)

Upvotes: 3

Views: 3840

Answers (2)

Minal
Minal

Reputation: 81

I was facing same issue when we have less number of boxes (let say 1 or 2). I resolved it with maxValue option. Just add maxValue = 4 option in your vaxis. It will add 5 (0 to 4) gridlines at all times. If your maxValue is more that 4, it will adjust automatically. Mine is working fine with options (title : 'No of boxes', format : '#', minValue:0, maxValue :4). minValue = 0 will not allow negatives as its no of boxes.

Upvotes: 8

jmac
jmac

Reputation: 7128

I am going to guess that the left-side vAxis is not 4, but actually 2. The 5 labels are 0, 0.5, 1, 1.5, 2.

Since you have format set as "#,###" it will not show decimals. If you change it to "#,###.#" then it will show 0, 0.5, 1, 1.5, 2.

There are a dozen ways to solve it, but the easiest may be to make sure that your axis values are only whole number values with a javascript function like this:

// Take the Max/Min of all data values in all graphs
var totalMax = 3;
var totalMin = -1;

// Figure out the largest number (positive or negative)
var biggestNumber = Math.max(Math.abs(totalMax),Math.abs(totalMin));

// Round to an exponent of 10 appropriate for the biggest number
var roundingExp = Math.floor(Math.log(biggestNumber) / Math.LN10);
var roundingDec = Math.pow(10,roundingExp);

// Round your max and min to the nearest exponent of 10
var newMax = Math.ceil(totalMax/roundingDec)*roundingDec;
var newMin = Math.floor(totalMin/roundingDec)*roundingDec;

// Determine the range of your values
var range = newMax - newMin;

// Calculate the best factor for number of gridlines (2-5 gridlines)
// If the range of numbers divided by 2 or 5 is a whole number, use it
for (var i = 2; i <= 5; ++i) {
    if ( Math.round(range/i) = range/i) {
        var gridlines = i
    }
}

Upvotes: 3

Related Questions