OPTIONS http://www.google.com/jsapi 405 (Method Not Allowed) error

1,113 views
Skip to first unread message

sam

unread,
Nov 12, 2012, 5:22:37 PM11/12/12
to google-visua...@googlegroups.com
Hi,
     I am using mysql/php to create json data, in addition have test.html that read json and draws annotated timeline,

   keep getting  "OPTIONS http://www.google.com/jsapi 405 (Method Not Allowed)"  error

  "XMLHttpRequest cannot load http://www.google.com/jsapi. Origin http://nova.it.rit.edu is not allowed by Access-Control-Allow-Origin."

need urgent help, I am using xampp

thanks

asgallant

unread,
Nov 12, 2012, 5:50:49 PM11/12/12
to google-visua...@googlegroups.com
Can you post your source code?

Since you're using xampp, I assume you're accessing the HTML file through the webserver rather than locally, but if you're not, then this could be a Flash security issue (see the Notes section in the ATL documentation for details).
Message has been deleted

sam

unread,
Nov 12, 2012, 6:01:37 PM11/12/12
to google-visua...@googlegroups.com
thanks for reply asgallant, I built everything by reading all your previous comments history,  I was testing everything locally on my laptop using xampp got the 405 error, moved everything to my school provided space on .edu, same error.
all your previous comments on other threads are really helpful.

my .php  file output sample, it's really big file, just showed a few lines,  from  echo json_encode($output); 
[["Date(2012,04,12,12,50,02)","15662","5589","7999","2074","1488","425"],["Date(2012,04,12,1,00,03)","15662","5589","7999","2074","1488","425"],["Date(2012,04,12,1,10,02)","15242","5555","7603","2084","1430","413"]]

.html file :

<html>
  <head>
    <script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type="text/javascript" src="jquery.min.js"></script>
    <script type='text/javascript'>
      google.load('visualization', '1', {'packages':['annotatedtimeline']});
      google.setOnLoadCallback(drawChart);
     
 function drawChart() {
        var data = new google.visualization.DataTable();
       data.addColumn('datetime', 'Date');
data.addColumn('number', 'n1');
data.addColumn('number', 'n2');
data.addColumn('number', 'n3');
data.addColumn('number', 'n4');
data.addColumn('number', 'n5');
data.addColumn('number', 'n6');
var now = new Date(); 
 
        var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
function updateData () {
$.ajax({
dataType: 'json',
type: 'POST',
crossDomain: true,
success: function (json) {
data.removeRows(0, data.getNumberOfRows());
data.addRows(json);
chart.draw(data,{width: 400, height: 240});
// refresh data in 1 minute
setTimeout(function () {
updateData();
}, 60000);
}
 });
         }
}
      
    </script>
   </head>
  <body> 
    <div id='chart_div' ></div>
  </body>
</html>

asgallant

unread,
Nov 12, 2012, 6:46:31 PM11/12/12
to google-visua...@googlegroups.com
Hmmm...I don't see anything wrong with the code, can you post a link to the live version on your school's server?

Incidentally, the data in the JSON won't work.  Your numbers have to be unquoted, and the dates won't work as is.  That date format is correct if you are using the JSON implementation of a DataTable, but not for using the addRows method.  Given how you are fetching the data, you'll either have to process it in javascript before passing it to addRows, or change the data structure to use the full DataTable JSON structure.

sam

unread,
Nov 12, 2012, 7:12:36 PM11/12/12
to google-visua...@googlegroups.com
I was suspicious about double quotes around numbers but not date in my json, thats how my json_encode spits out array. what is JSON implementation of DataTable?


even if I send you the link it wont work outside school network due to security reasons, I am vpning in to school myself.

sam

unread,
Nov 12, 2012, 7:32:06 PM11/12/12
to google-visua...@googlegroups.com
are you talking about sampleData.json format?



On Monday, November 12, 2012 6:46:31 PM UTC-5, asgallant wrote:

asgallant

unread,
Nov 12, 2012, 7:41:01 PM11/12/12
to google-visua...@googlegroups.com
Yes, that's the format you need.  Here's a basic bit of PHP code that shows how to build it: https://groups.google.com/d/msg/google-visualization-api/GK0zwNbIwUo/i9DhpOUSKMEJ

sam

unread,
Nov 12, 2012, 8:22:17 PM11/12/12
to google-visua...@googlegroups.com
in this  particular cod snippet, where did $i come from?

$sth = mysql_query("SELECT * FROM testpower WHERE datetime > 0");
$rows = array();
$flag = true;

$table = array();
$table['cols'] = array(
    array('label' => 'date', 'type' => 'datetime'),
    array('label' => 'power', 'type' => 'number')
);
$rows = array();
while($r = mysql_fetch_assoc($sth)) {
    $temp = array();
$temp[] = array('v' => $i['datetime']); // you will probably need to transform this into the Date object format
$temp[] = array('v' => (float) $i['power']); // typecast to int, float, whatever - if you don't, it will be interpreted as a string
    $rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
$jsonTable = json_encode($table);

asgallant

unread,
Nov 12, 2012, 8:34:35 PM11/12/12
to google-visua...@googlegroups.com
Sorry, that's a typo, should have been $r.

sam

unread,
Nov 12, 2012, 10:16:20 PM11/12/12
to google-visua...@googlegroups.com
I did update my .php file according to code you provided, and get jason in proper format,

commented out addColumn in .html   still no luck

asgallant

unread,
Nov 13, 2012, 4:06:53 AM11/13/12
to google-visua...@googlegroups.com
To debug the json, add colsole.log(json); in the AJAX query, and then check the developer's console in Chrome/Firefox to see what comes out.  Make sure that you are using the json to create a new DataTable and not with the addRows method; it should be var data = new google.visualization.DataTable(json); in the success callback.

sam

unread,
Nov 14, 2012, 4:22:15 AM11/14/12
to google-visua...@googlegroups.com
attached json output I get,  can you check it?  I am pretty sure it's correct though.
thanks
jsonOutput.txt

asgallant

unread,
Nov 14, 2012, 9:56:46 AM11/14/12
to google-visua...@googlegroups.com
You changed your date format, what you had before was correct for using the JSON data table representation.  Other than that, your data seems to be in the correct format (see example with a truncated set of your data and fixed dates here: http://jsfiddle.net/asgallant/2nFWK/).  Fix the dates and test again.  If it still doesn't work, then post your js code and I'll take a look at that.

sam

unread,
Nov 14, 2012, 9:05:24 PM11/14/12
to google-visua...@googlegroups.com
my bad, completely missed date format, fixed it, still no luck, please see my js attached,

thanks again
parsetest.html

asgallant

unread,
Nov 14, 2012, 11:09:57 PM11/14/12
to google-visua...@googlegroups.com
Off the top, I see your chart div's style isn't formatted correctly:

<div id="chart_div" style="width: 800; height: 600"></div>

should be:

<div id="chart_div" style="width: 800px; height: 600px"></div>

Setting height and width in the ATL chart's options doesn't do anything.

sam

unread,
Nov 15, 2012, 7:50:37 PM11/15/12
to google-visua...@googlegroups.com
that doesn't really fix the issue

asgallant

unread,
Nov 15, 2012, 10:31:16 PM11/15/12
to google-visua...@googlegroups.com
Open the page in Chrome, and look at the developer's console (hit ctrl+shift+j to open) - what error message(s) is it throwing?

asgallant

unread,
Nov 15, 2012, 10:34:20 PM11/15/12
to google-visua...@googlegroups.com
Also, why do you have "crossdomain: true" in the AJAX?  Isn't the HTML page being served from the same server as your data?

sam

unread,
Nov 16, 2012, 12:03:37 AM11/16/12
to google-visua...@googlegroups.com
I made it work, now  chart flickers every time it updates

asgallant

unread,
Nov 16, 2012, 1:20:50 AM11/16/12
to google-visua...@googlegroups.com
There is an option that helps with the flickering, but you can't always use it.  See "allowRedraw" in the ATL options.  Note this only applies to ATL charts, if you use the regular charts, there is no flickering.  If this presents a problem, there is an alternative to ATL charts which involves using LineCharts with "annotation" and "annotationText" column roles in combination with a ChartRangeFilter.  This combo provides 95% of the functionality with all the other goodies that the regular charts provide and without the problems of Flash.

sam

unread,
Nov 16, 2012, 1:33:50 AM11/16/12
to google-visua...@googlegroups.com
thanks again for your help man, will try to fix it now.

asgallant

unread,
Nov 16, 2012, 2:40:09 AM11/16/12
to google-visua...@googlegroups.com
You're welcome.
Reply all
Reply to author
Forward
0 new messages