Hi Ken,
We actually have undocumented dataTableFromCsv support, which is built into
our Query object. Namely, we expose two new options: 'csvColumns' (which
should be an array of column types), and 'csvHasHeader' (which determines
whether the first row of the CSV should be interpreted as a header row).
The file will be interpreted as CSV if you specify the csvColumns option,
so it should be fairly straightforward. One thing to keep in mind is that
you can only load CSV files that are on the same domain as your chart.
So, if you have a URL to your CSV file stored in a variable, call it
csvUrl. That means that we would do something like the following:
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.
}
On Sat Nov 29 2014 at 7:07:50 PM Ken Burkhalter <[email protected]>
wrote:
> I seldom get stumped, but sure am now.
>
> Been trying for two days to figure out how to read a CVS Table that
> contains Time increments in Col-1 (x-axis) and multiple Temperature
> Columns-2 to 6 (y-axis) and make it ready to display as a Line Chart in
> Google Charts.
>
> Any sample code to read a local (CSV) data file and make it ready to Chart
> (I think I have all the rest would be GREATLY appreciated.
>
> This doesn't seem to work, although I thought it should (my data file is
> tempData.csv in the same directory folder as the page HTML code). All I
> get is a blank page displayed ....
>
>
> <html>
> <head>
> <script src="https://www.google.com/jsapi";> </script>
> <script src="http://code.jquery.com/jquery-1.10.1.min.js";> </script>
> <script src="jquery.csv-0.71.js"> </script>
>
> google.load("visualization", "1", {packages:["corechart"]});
> google.setOnLoadCallback(drawChart);
>
>
> function drawChart() {
> // Fetch the CSV
> $.get("tempData.csv", function(csvString) {
> // transform the CSV string into a 2-dimensional array
> var arrayData = $.csv.toArrays(csvString, {onParseValue:
> $.csv.hooks.castToScalar});
> // this new DataTable object holds all the data
> var data = new google.visualization.arrayToDataTable(arrayData);
> // For simplicity let's only look at one data column
> var view = new google.visualization.DataView(data);
> view.setColumns([0,1]);
> // set chart options
> var options = {
> title: "Daily Temps"
> hAxis: {title: data.getColumnLabel(0), minValue:
> data.getColumnRange(0).min, maxValue: data.getColumnRange(0).max},
> vAxis: {title: data.getColumnLabel(1), minValue:
> data.getColumnRange(1).min, maxValue: data.getColumnRange(1).max},
> legend: 'none'
> };
> // create the chart object and draw it
> var chart = new
> google.visualization.LineChart(document.getElementById('chart_div'));
> chart.draw(data, options);
> }
> </script>
> </head>
> <body>
> <div id="chart_div" style="width: 900px; height: 500px;"></div>
> </body>
> </html>
>
> Thanks for any help anyone can offer.
>
> --
> 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.
>
--
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.
