CODEWITHSUNDEEP
javascriptgoogle-apps-scriptgoogle-visualizationgoogle-docsgoogle-sheets-api
hero8110
hero8110

Reputation: 299

Y Axis in Google Charts increments in "General 1, General 2" etc - Java Script

I have a problem with my dashboard in Google Charts. Currently everything works except that the column chart displays a string rather than an integer on the Y axis.

I find the documentation on the Google charts pages very hard to understand, so I apologize if there are mistakes in my code, or if there's a simpler way I could have done things.

screenshot

My JS Fiddle is as shown here: https://jsfiddle.net/hm7q5peg/6/

    google.load('visualization', '1.0', {
    'packages': ['corechart','table', 'controls']
});
google.setOnLoadCallback(drawDashboard);

function drawDashboard() {
    // Using the jsapi, it's better to set the url
    // for the spreadsheet, then use setQuery() to
    // define the query that will provide your data.
    var url = '//docs.google.com/spreadsheet/ccc?key=1FOVmfesx7ATNe8qjWjkU2GbjBCBZxL0BRswJv6rcGPs&usp=drive_web&gid=1324373577';

    var query = new google.visualization.Query(url);
    query.setQuery('select B,C where B <> ""');

    // Send the query with a callback function
    query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
    // Called when the query response is returned.
    if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
    }

    var data = response.getDataTable();

    var dashboard = new google.visualization.Dashboard(
    document.getElementById('dashboard_div'));

    // Create a range slider, passing some options
    var donutRangeSlider = new google.visualization.ControlWrapper({
        'controlType': 'NumberRangeFilter',
            'containerId': 'filter_div',
            'options': {
            'filterColumnLabel': 'Number Attended'
        }
    });


    // Create a pie chart, passing some options
    var pieChart = new google.visualization.ChartWrapper({
        'chartType': 'PieChart',
            'containerId': 'chart_div',
            'options': {
            'width': 300,
                'height': 300,
                'pieSliceText': 'value',
                'legend': 'right'
        }
    });

        //define a table
    var table = new google.visualization.ChartWrapper({
        'chartType': 'Table',
        'containerId': 'table_div',
        'options': {
            'width':'300px'
        }
    });

    //define the column chart
    var columnChart = new google.visualization.ChartWrapper({
        'chartType': 'ColumnChart',
        'containerId' : 'column_div',
    });

    // Establish dependencies, declaring that 'filter' drives 'pieChart',
    // so that the pie chart will only display entries that are let through
    // given the chosen slider range.
    dashboard.bind(donutRangeSlider, [pieChart, table, columnChart]);

    // Draw the dashboard.
    dashboard.draw(data);
}

Upvotes: 3

Views: 1198

Answers (1)

Mogsdad
Mogsdad

Reputation: 45740

If you haven't done so already, have a look at the ColumnChart Configuration Options to see what you have to play with. By specifying a numeric format for the vertical axis, you will get numbers. Unfortunately, without a bunch of additional code, gViz will decide that you must want to see fractions, even though your data is all integers.

screenshot

Updated jsFiddle.

//define the column chart
var columnChart = new google.visualization.ChartWrapper({
    'chartType': 'ColumnChart',
    'options' : {
        'hAxis' : { 'title' : 'Student Name' },
        'legend' : {position: 'none' },
        'vAxis' : {format: 'short',
                   title: 'Number Attended'}
     },
    'containerId' : 'column_div',
});

Upvotes: 2

Related Questions