I'm new to the Group - Google Charts are awesome! But having a few problems:
I need to render charts from CSV files stored in a charts folder on website. The example code below is based on using a CSV file as my datasource: pie_csv.2.25.14.csv - contents of CSV is: Region,Ratio North America,0.31101 Europe,0.3587 Pacific Rim,0.20747 South America,0.03442 Middle East & Africa,0.03173 Rest of World,0.05666 This is the source code placed in an html on one of my Joomla websites: <html> <head> <script type="text/javascript" src="https://www.google.com/jsapi";></script> <script src="http://code.jquery.com/jquery-1.10.1.min.js";></script> <script src="http://agilityinstitute.com/charts/jquery.csv-0.71.js";></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); function drawChart() { var queryOptions = { csvColumns: ['string', 'number'], csvHasHeader: true } var query = new google.visualization.Query('http://agilityinstitute.com/charts/pie_csv.2.25.14.csv', queryOptions); query.send(handleQueryResponse); function handleQueryResponse (response) { if (response.isError()) { alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); return; } var data = response.getDataTable(); } var options = { title: 'World Impact by Region', is3D: true, }; var chart = new google.visualization.PieChart(document.getElementById('piechart_3d')); chart.draw(data, options); } </script> </head> <body> <div id="piechart_3d" style="width: 430px; height: 240px;"></div> </body> </html> The code seems to be linking properly to the CSV file. I found was in a thread related to "Support for dataTableFromCsv". Currently, I'm getting the following error: "Uncaught ReferenceError: data is not defined". I assume that this has to do with placing the CSV data in the DataTable. I tried adding: data.addColumn('string','Region'); data.addColumn('number', 'Ratio'); data.addRows(5); under "var data= response.getDataTable();" but, solve problem. So, the issue must in chart.draw(data, options): var chart = new google.visualization.PieChart(document.getElementById('piechart_3d')); chart.draw(data, options); Obviously, to draw the chart with the data table, the data needs to be placed in the DataTable correctly. Based on the examples I've seen, most relate to working with source data in Google Spreadsheet. Would really appreciate some help! Anybody have any ideas? I do have a few more questions about the code above, but getting the code to work correctly is most important. I'm not sure if (see below) is necessary: <script src="http://code.jquery.com/jquery-1.10.1.min.js";></script> <script src="http://agilityinstitute.com/charts/jquery.csv-0.71.js";></script> Due to recent development of the Query object, I don't think "jquery.csv-0.71.js" is needed. Based on what I've found, "var query = new google.visualization.Query();" includes "dataTableFromCsv". Currently, documentation on the Query object is limited. Therefore, the current dilemma . . . Charlie -- 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/groups/opt_out.
