1
votes

Line chart where units don't match points

I have a Google chart api Line chart where the horizontal axis units don't match the corresponding points on the chart. See the image.

I have used those options that makes sure that the h axis don't use decimal numbers:

hAxis: { title: 'some title', format: '#' }

I have used no other relevant options, and haven't found any options in the documentation that seems to could solve the issue..

Update: Code to generate the chart:

var options = { title: '<%# Strings.GameStatisticsView_GameProgressChart %>', hAxis: { title: '<%# Strings.ScoreBoard_RoundNr %>', format: '#' }, vAxis: { title: '<%# Strings.Common_Points %>' }, backgroundColor: { fill: 'transparent' }, elementId: 'GameProgressChart', column1: 'Round Nr' };
drawLineChart(response.d.Data, options);

...

drawLineChart: function (data, options) {
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn('number', options.column1);
    for (var j = 0; j < data.key.length; j++) {
        dataTable.addColumn('number', data.key[j]);
    }
    dataTable.addRows(data.value.length);
    for (var i = 0; i < data.value.length; i++) {
        dataTable.setValue(i, 0, data.value[i].key);
        for (var k = 0; k < data.key.length; k++) {
            dataTable.setValue(i, k+1, data.value[i].value[k]);
        }
    }

    var chart = new google.visualization.LineChart(document.getElementById(options.elementId));        
    chart.draw(dataTable, options);   
},

Solution from comments: The steps in your x axis can't be hardcoded but you can hardcode how many gridlines to have, see link.

1
Is there really not any one that knows anything about this? - Morten Holmgaard

1 Answers

1
votes

I doubt you are still in need of an answer for this, but should anyone be in the same situation..

format: '#' forces the value format to 1 digit, so your 3 in the example is most likely around 3.3 but you only see the integer part because of the formatting applied.