Sergey-
Thank you very much for you reply. I truly appreciate it.
If you could go another step further it would be a GREAT help.
I am just starting to learn JavaScript, so run into brick walls
sometimes that are probably "no brainers" to experienced folks. :-)
My big challenge right now is related to your "/...if //you have a URL
to your CSV file stored in a variable, call it csvUrl../." comment. I
have not been able to figure out how to access a .cvs data file stored
in the same folder as the page HTML file. I've tried to access it as
"file:///C:\Users\keb\Desktop\Charting\GoogleCharts/tempData.csv" but
that doesn't produce any results. I've also tried lots of variants of
that without success, so I don't know if the file reference method is
bad or the follow-on code is the problem.
If you could fill in or correct my "// Fetch the CSV" code segment (see
below in my original message) to show how to get the file and use it
with your suggested code (included in your reply), that would be a
powerful help to get me started.
If I can just get to the point where I can start to display a chart I
feel confident I can rapidly move to the final result I seek.
Thanks again for your assistance.
-ken b [:-)}
On 12/1/2014 11:48 AM, 'Sergey Grabkovsky' via Google Visualization API
wrote:
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] <mailto:[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]
<mailto:[email protected]>.
To post to this group, send email to
[email protected]
<mailto:[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 a topic in the
Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit
https://groups.google.com/d/topic/google-visualization-api/cnXYDr411tQ/unsubscribe.
To unsubscribe from this group and all its topics, send an email to
[email protected]
<mailto:[email protected]>.
To post to this group, send email to
[email protected]
<mailto:[email protected]>.
Visit this group at
http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.
--
-ken burkhalter
--
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.
