Figured it out:
<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 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/piechart_world_region.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 chart = new
google.visualization.PieChart(document.getElementById('piechart_3d'));
var drawOptions = { title: 'World Impact by Region', is3D: true };
chart.draw(data, drawOptions);
}
</script>
</head>
<body>
<div id="piechart_3d" style="width: 430px; height: 240px;"></div>
</body>
</html>
__________________________________________
On Sunday, March 2, 2014 9:55:45 AM UTC-5, Charlie Caldwell wrote:
>
> 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.
