Google Charts - number/string issue on hAxis (Jquery ajax JSON data)

Question

What I want to do

I am trying to show data from a MySQL database in a "ComboChart" using Google Charts. In order to do that I followed this tutorial, made some alterations and came up with the code as shown on the very bottom of this post.

Actual behavior

The data displays correctly. I do have to tell Google Charts however that the "year" is a number what throws it into continuous "mode". That leads to the year on the hAxis displaying with decimal places, in particular if I don't have data for all consecutive years. (i.e. 2,010.5)

Desired behavior

I want Google Charts to display the year as if it was a string and operate in discrete "mode".

What I think the problem is

I think the problem, I am encountering is mostly due to the fact that the year (to be shown on the hAxis) is a int(11) in the database and that the json that is provided by a controller also has the year as a number. To clarify below an example of what the json could look like:

[
    {
        "year_data": 2010,
        "data_1": 125895,
        "data_2": 25158.5
    }
]

As I use the controller for a bunch of other stuff, I would preferably not make any alterations to it.

What I tried to fix it

• I tried the bold move of just changing data.addColumn('number', 'year_data'); to data.addColumn('string', 'year_data');. It didn't work and I got a "type mismatch".
• I tried to come up with a workaround mostly involving hAxis.showTextEvery: and some sort of row count. It didn't work but that might very well be due to my lack of experience/knowledge.

The question in one sentence

How can I turn the year data into a string in JavaScript or having Google Charts behave as if it was a string?

Code

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<script src="/googlecharts/ajaxGetPost.js" type="text/javascript"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<script>
function charts(data, ChartType) {
    var jsonData = data;
    google.load("visualization", "1", {
        packages: ["corechart"],
        callback: drawVisualization
    });

    function drawVisualization() {
        var data = new google.visualization.DataTable();
        data.addColumn('number', 'year_data');
        data.addColumn('number', 'Data 1');
        data.addColumn('number', 'Data 2');
        $.each(jsonData, function(i, jsonData) {
            var year = jsonData.year_data;
            var data1 = jsonData.data_1;
            var data2 = jsonData.data_2;
            data.addRows([
                [year, data1, data2]
            ]);
        });

        var options = {
            colorAxis: {
                colors: ['#54C492', '#cc0000']
            },
            datalessRegionColor: '#dedede',
            defaultColor: '#dedede',
            legend: {
                position: 'bottom',
                alignment: 'start'
            },
            seriesType: 'bars',
            series: {
                1: {
                    type: 'line'
                }
            }
        };

        var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    }
}

$(document).ready(function() {
    url = '/data/get';
    ajax_data('GET', url, function(data) {
        charts(data)
    });
});
</script>

Answer 1

toString should work just fine, see following snippet...

var data = new google.visualization.DataTable();
data.addColumn('string', 'year_data');
data.addColumn('number', 'Data 1');
data.addColumn('number', 'Data 2');
$.each(jsonData, function(i, jsonData) {
    var year = jsonData.year_data.toString();
    var data1 = jsonData.data_1;
    var data2 = jsonData.data_2;
    data.addRows([
        [year, data1, data2]
    ]);
});