Dynamic pie chart in Google Chart is not working

Question

I am new to Google Chart and I am trying create a dynamic pie chart in the dynamic webproject(Java EE). I have read the tutorial ( https://developers.google.com/chart/interactive/docs/queries ) and copy the pie chart code in the google code play ground.

function initialize() 
{
    // Replace the data source URL on next line with your data source URL.
    // Specify that we want to use the XmlHttpRequest object to make the query.
    var opts = {sendMethod: 'xhr'};
    var query = new google.visualization.Query('https://docs.google.com/spreadsheet/tq?range=A%3AB&key=0Aq4N8GK8re42dHlGMG0wM00tdE5PVjJZellXTEhFNEE&gid=0&headers=-1', opts);

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

function handleQueryResponse(response)
{
    if (response.isError()) 
    {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
    }

    var data = response.getDataTable();
    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, {width: 400, height: 240, is3D: true});
}

google.setOnLoadCallback(drawVisualization);

But it is not working and there is no piechart. Could please tell me where is the problem. My spreadsheet is https://docs.google.com/spreadsheet/ccc?key=0Aq4N8GK8re42dHlGMG0wM00tdE5PVjJZellXTEhFNEE Thank you.

Answer 1

For some reason it sends the OPTION request instead of the correct GET. It is because you use the opts parameter, remove it and everything will work fine.

Also you can find a note about this parameter here: https://developers.google.com/chart/interactive/docs/reference#Query

opt_options [Optional, Object] A map of options for the request. Note: If you are accessing a restricted data source, you should not use this parameter.

Here is the full code:

<html>
    <head>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript">
            google.load('visualization', '1.0', {'packages':['corechart']});
            google.setOnLoadCallback(initialize);

            function initialize() {
                // removed the `var opts...` line
                var query = new google.visualization.Query('https://docs.google.com/spreadsheet/tq?range=A%3AB&key=0Aq4N8GK8re42dHlGMG0wM00tdE5PVjJZellXTEhFNEE&gid=0&headers=-1');

                query.send(handleQueryResponse);
            }

            function handleQueryResponse(response) {
                if (response.isError()) {
                    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
                    return;
                }

                var data = response.getDataTable();
                var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
                chart.draw(data, {width: 400, height: 240, is3D: true});
            }
        </script>
    </head>
    <body>
        <div id="chart_div"></div>
    </body>
</html>

Dynamic pie chart in Google Chart is not working

Question

1 answers

solution1
0 ACCPTED 2012-12-26 20:25:37

Dynamic pie chart in Google Chart is not working

Question

1 answers

solution1 0 ACCPTED 2012-12-26 20:25:37

solution1
0 ACCPTED 2012-12-26 20:25:37