CODEWITHSUNDEEP
javascriptgoogle-visualization
David Hawkins
David Hawkins

Reputation: 1067

Google Visualisation - column chart interval issue (duplicate intervals)

enter image description here

I'm using the following code to generate the above google chart:

var data = google.visualization.arrayToDataTable([
['Date', 'Tickets'],
['11/05/15',1],
['10/05/15',0],
['09/05/15',0],
['08/05/15',0],
['07/05/15',0],
['06/05/15',0],
['05/05/15',0],
['04/05/15',0],
]);

var columnChartOptions = {
title: "",
legend: { position: 'none' },
width: '100%',
height: '100%',
colors: ["#27ae60", "#2980b9", "#e67e22", "#e74c3c", "#e74c3c"],
chartArea: { left: '8%', top: '8%', width: "85%", height: "70%" },

vAxis: {
minValue: 1,
format:'#'
},

new google.visualization.ColumnChart(document.getElementById('ticket-history-graph')).
draw(data,columnChartOptions);

However it produces the following wrong interval counts:

What changes do I need to make to the vAxis definition to correct this? I've tried varying min and max values to no avail. I must also add that when higher numbers are used this is not a problem, it's only with lower counts.

Upvotes: 1

Views: 186

Answers (1)

Henrik Aronsson
Henrik Aronsson

Reputation: 1413

Your problem is the format:'#', which is the reason why you get two zeros and three ones (as you round to zero decimals, and the graph tries to present the values [0, 0.25, 0.5, 0.75, 1] which are rounded to [0, 0, 1, 1, 1], therefore duplicates them).

My suggestion is that you check out the property vAxis.gridlines.count documentation.

I made a fiddle, where I check if the maxValue in the graph is 1 or 2, if so I specify the gridlines to either the count of 2 or 3, and if it's neither 1 or 2, it uses googles own automatic generation. Check and see if you follow how I've done: jsfiddle
Remember to try and change some values to higher/lower to see how it works.

//Get all distinct ticketsales, sorted ascending by default, so you have to get the last value to get the highest one.
    var maxValue = data.getDistinctValues(1)[data.getDistinctValues(1).length - 1]

    // Specify gridCount to null, so if it doesn't enter any of the if's below, it will still be null
    var gridCount = null

    //check if the highest value is 1 or 2 else leave gridCount to null
    if (maxValue == 1) {
        gridCount = 2
    }
    if (maxValue == 2) {
        gridCount = 3
    }

Aswell as the addition to the columnChartOptions:

 vAxis: {
            gridlines: {
                //specify the amount of gridlines to var gridCount, if it's still specified as null, it will use googles automatic generation.
                count: gridCount
            },

Upvotes: 2

Related Questions