Unable to load CSV file

Ashok Kumar

unread,

Jan 24, 2014, 8:31:22 AM1/24/14

to google-visua...@googlegroups.com

Hi,

I am using CSV file as an external data source and would need to generate charts using the google chart api. However i am getting an error that "Error in Query[404 not found]". I have both my csv file and the actual Javascript in my local host (IIS) folder.

<!DOCTYPE html>

<html>

<head>

<title>Google Chart Example</title>

google.load("visualization", "1", {packages:["corechart"]});

</script>

function drawChart()

{

//$.get("http://localhost/output.csv",function(csvString)

//{

var query = new google.visualization.Query('csv?url=http://localhost/temperatures.csv');

//var query = new google.visualization.Query('http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&range=B1:D11&pub=1');

//var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});

query.setQuery('select Time,Min,Max');

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.ColumnChart(document.getElementById('chart'));

chart.draw(data, {width: 400, height: 240, is3D: true});

}

/*var data = new google.visualization.arrayToDataTable(arrayData);

console.log (arrayData);

var view = new google.visualization.DataView(data);

view.setColumns([0,1,2]);

var options =

{

title: "KwaZulu-Natal Household Survey (1993)",

vAxis: {title: "Year"},

hAxis: {title: "Cups"},

legend: 'none'

}

var chart = new google.visualization.ColumnChart(document.getElementById('chart'));

chart.draw(view, options); */

//});

}

google.setOnLoadCallback(drawChart);

</script>

</head>

<body>

</div>

</body>

</html>

Please help me with this.

Regards,

Ashok

Sergey Grabkovsky

unread,

Jan 24, 2014, 9:39:03 AM1/24/14

to google-visua...@googlegroups.com

Hi, that's not the correct way to load CSV files with Query. There is currently no documentation for it, but we're working on it. For now, you can use this thread as a reference. Here is the snippet I posted in that thread as an example:



var queryOptions = {

  csvColumns: ['number', 'number' /* Or whatever the columns in the CSV file are */],



  csvHasHeader: true /* This should be false if your CSV file doesn't have a header */



}




var query = new google.visualization.Query(csvUrl, queryOptions);






query.send(handleQueryResponse);

function handleQueryResponse(response) {




  if (response.isError()) {

    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());

    return;

  }




  var data = response.getDataTable();

  // Draw your chart with the data table here.

}

- Sergey

--
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 google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.

Ashok Kumar

unread,

Jan 24, 2014, 10:15:11 AM1/24/14

to google-visua...@googlegroups.com

Thanks Sergey for the help however now i am getting a different error Uncaught ReferenceError: High is not defined. Find below my revised code.

<!DOCTYPE html>

<html>

<head>

<title>Google Chart Example</title>

google.load("visualization", "1", {packages:["corechart"]});

</script>

function drawChart()

{

//$.get("http://localhost/output.csv",function(csvString)

//{

var queryOptions =

{

csvColumns: ['High','Low'],

csvHasHeader: false

}

csvUrl= 'http://localhost/temperatures.csv';

var query = new google.visualization.Query(csvUrl,queryOptions);

//var query = new google.visualization.Query('http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&range=B1:D11&pub=1');

//var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});

query.setQuery('select A,B');

Sergey Grabkovsky

unread,

Jan 24, 2014, 11:13:58 AM1/24/14

to google-visua...@googlegroups.com

In csvColumns, you need to specify the type of the column, not its title. You can specify its title in the actual CSV, if you set csvHasHeader to true and make the first row be titles.

- Sergey

--

Ashok Kumar

unread,

Jan 27, 2014, 3:48:15 AM1/27/14

to google-visua...@googlegroups.com

Hey Sergey thanks very much i got my code working.

- Sergey

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.

Reply all

Reply to author

Forward