Home/ Questions/Q 8591785
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T23:36:07+00:00

In my play application I send some JSON output to my view in order

  • 0

In my play application I send some JSON output to my view in order to show a google pie chart. Things go wrong when it renders the js

Object {cols: [{id: 'title', label: 'Title' , type: 'string'},{id: 'unitPrice', label: 'Unit Price', type: 'int'}],rows: [ has no method 'getColumnType'×

This message is all I get from trying and draw a pie chart using the Google Chart API.
What does this even mean? “no method ‘getColumnType'”

Any insight would be greatly appriciated. my code, so far:

<!DOCTYPE html>

<html>
<head>
<title>PayView</title>
   <head>    
        <script type="text/javascript">var pieChartData;</script>
        <script type="text/javascript">var loads = 0;</script>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>  
        <script src="@routes.Assets.at("javascripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript">
            google.load("visualization", "1", {packages:["corechart"]});      
            google.setOnLoadCallback(function() {
                ++loads;
                if (loads == 2)
                drawVisualization();
            });

            function drawVisualization() {
                $('.log').html('pieChartData: ' + pieChartData);
                new google.visualization.PieChart(document.getElementById('visualization')).
                draw(pieChartData, {title:"Purchases"});
            }               

            $(document).ready(function() {
                $(function() {
                    pieChartData = new google.visualization.DataTable();
                    pieChartData.addColumn('string', 'Title');
                    pieChartData.addColumn('number', 'Unit Price');

                    var getJSon2 = $.ajax({
                        url: '@routes.Application.getJson()',
                        processData:false,
                        type: 'GET',
                        beforeSend:function(jqXHR, settings){                   
                            jqXHR.setRequestHeader("Content-Type", "application/json");
                        },
                        success: function(data, textStatus, jqXHR){                         
                            ++loads;
                            if (loads == 2)
                                drawVisualization();
                            process_items(data);   
                        },
                        error: function(jqXHR, textStatus, errorThrown){
                        },
                        complete: function(jqXHR,textStatus){                   
                        }   
                    );

                    var process_items = function(data){                     
                        pieChartData.addRows(data.length);
                        $.each(data, function(index, item) {
                            $("#purchases").append("<li>" + item.name + "</li>");
                            pieChartData.setCell(index, 0, item.title);
                            pieChartData.setCell(index, 1, item.unitPrice); 
                        });
                    });
                });         
            };  
        });     
        </script>       
    </head>
    <body>
        <div class="log"></div>
        <div id="purchases"></div>
        <div id="visualization" style="width: 500px; height: 300px;"></div>
    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can also give a parameter to the function

    function drawChart(draw)
{
    if(draw > 0)
    {
      var data=....;
      var options = ....;
      var chart = ....;
      chart.draw(data,options)
    }
}

    And you call this function in your ajax giving a value like drawChart(1)

    • 0