1. Thank you - here is what I get: 2. 3. OPTIONS file:///Users/justinnmccarty/Desktop/getData.php 0 () jquery.js:8706<https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js>
1. XMLHttpRequest cannot load file:///Users/justinnmccarty/Desktop/getData.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. jquery.js:8706<https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js> undefined On Friday, March 28, 2014 1:12:57 PM UTC-7, asgallant wrote: > > Add this line to the javascript, after the var jsonData = ... line: > > console.log(jsonData); > > then open the page in Chrome and view the developer's console (use > Chrome's menu or hit ctri+shift+j to open it). There should be a string of > data that looks like the sampleData.json file. If there is not, copy the > contents of the log and post them here. > > On Friday, March 28, 2014 3:49:56 PM UTC-4, Justin McCarty wrote: >> >> I have been looking at Google Charts and have attempted to replicate the >> sample on "Populating Data Using Server-Side Code" but get the error "Table >> has no columns." >> >> My code is below: >> >> *For the project.html:* >> <html> >> <head> >> <!--Load the AJAX API--> >> <script type="text/javascript" src="https://www.google.com/jsapi >> "></script> >> <script type="text/javascript" src=" >> https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js >> "></script> >> <script type="text/javascript"> >> >> // Load the Visualization API and the piechart package. >> google.load('visualization', '1', {'packages':['corechart']}); >> >> // Set a callback to run when the Google Visualization API is loaded. >> google.setOnLoadCallback(drawChart); >> >> function drawChart() { >> var jsonData = $.ajax({ >> url: "getData.php", >> dataType:"json", >> async: false >> }).responseText; >> >> // Create our data table out of JSON data loaded from server. >> var data = new google.visualization.DataTable(jsonData); >> >> // Instantiate and draw our chart, passing in some options. >> var chart = new >> google.visualization.PieChart(document.getElementById('chart_div')); >> chart.draw(data, {width: 400, height: 240}); >> } >> >> </script> >> </head> >> >> <body> >> <!--Div that will hold the pie chart--> >> <div id="chart_div"></div> >> </body> >> </html> >> >> *For the getData.php:* >> <?php >> >> // This is just an example of reading server side data and sending it to >> the client. >> // It reads a json formatted text file and outputs it. >> >> $string = file_get_contents("sampleData.json"); >> echo $string; >> >> // Instead you can query your database and parse into JSON etc etc >> >> ?> >> >> and finally, the *sampleData.json:* >> { >> "cols": [ >> {"id":"","label":"Topping","pattern":"","type":"string"}, >> {"id":"","label":"Slices","pattern":"","type":"number"} >> ], >> "rows": [ >> {"c":[{"v":"Mushrooms","f":null},{"v":3,"f":null}]}, >> {"c":[{"v":"Onions","f":null},{"v":1,"f":null}]}, >> {"c":[{"v":"Olives","f":null},{"v":1,"f":null}]}, >> {"c":[{"v":"Zucchini","f":null},{"v":1,"f":null}]}, >> {"c":[{"v":"Pepperoni","f":null},{"v":2,"f":null}]} >> ] >> } >> >> I have seen this come up a few times but am still not able to get it to >> work. Thanks! >> > -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/google-visualization-api. For more options, visit https://groups.google.com/d/optout.
