All geek questions in one place

The object does not have a getColumnType method

In my playback application, I send some JSON output to my view to show the Google pie chart. Things go wrong when it displays js

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

This post is all I get from trying to draw a pie chart using the Google Chart API. What does that even mean? "no method" getColumnType "

Any insight would be greatly appreciated. my code is:

 <!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>
+2
source share
2 answers

You can also specify a function parameter

 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)

+2
source

You are trying to use the string "googleData" built from the results of an ajax call before this call ends.

You will need to fine-tune something that awaits the completion of loading the Google library, as well as your ajax call. It might look something like this:

  var loads = 0; google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(function() { ++loads; if (loads == 2) drawVisualization(); }); // then in your "ready" handler: success: function(data, textStatus, jqXHR){ process_items(data); ++loads: if (loads == 2) drawVisualization(); },

This (inelegant) setting increments the counter at the end of the ajax call and at the end of work with Google. Both handlers check to see if they completed last, and call the draw function if that is the case.

+1
source

Source: https://habr.com/ru/post/1446386/

More articles:


All Articles