Elaborating on what Sergey said, another alternative -- and probably what you want to do if your CSV data is unchanging -- is to convert the CSV data "by hand" into a data table, so that everything is inside your JavaScript program.
For instance, as a first step cut and paste your data like so: var data = google.visualization.arrayToDataTable([ * ...cut and paste your CSV here...* ]); That won't work as is, but by looking at other sample charts you can identify what tweaks you need to make (e.g., enclosing each line of your CSV file in square brackets). I would start by cutting and pasting one line from your CSV file and going from there. That will enable you to iterate quickly, confirming what changes you need to make before you deal with the entire file. Jon On Mon, Dec 1, 2014 at 4:18 PM, 'Sergey Grabkovsky' via Google Visualization API <google-visualization-api@googlegroups.com> wrote: > Hi Ken, you might be running into an issue with the same-origin policy > <http://en.wikipedia.org/wiki/Same-origin_policy> of your browser. If I > remember correctly, you're not allowed to load files over the file:// > protocol. So you will need to start up a light webserver (I'm partial to > the python one, which you can just start with "python -m SimpleHTTPServer") > and host both your page and CSV file over that. Unfortunately, I'm not sure > I can explain detailed instructions for that over email, so if you don't > know about how servers and clients work, you may want to read up on that. > > > On Mon Dec 01 2014 at 4:14:12 PM Ken Burkhalter <kenburkhal...@gmail.com> > wrote: > >> 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 <kenburkhal...@gmail.com> >> 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 google-visualization-api+unsubscr...@googlegroups.com. >>> To post to this group, send email to >>> google-visualization-api@googlegroups.com. >>> 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 >> google-visualization-api+unsubscr...@googlegroups.com. >> >> >> To post to this group, send email to >> google-visualization-api@googlegroups.com. >> 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 google-visualization-api+unsubscr...@googlegroups.com. >> To post to this group, send email to >> google-visualization-api@googlegroups.com. >> 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 google-visualization-api+unsubscr...@googlegroups.com. > To post to this group, send email to > google-visualization-api@googlegroups.com. > 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 google-visualization-api+unsubscr...@googlegroups.com. To post to this group, send email to google-visualization-api@googlegroups.com. Visit this group at http://groups.google.com/group/google-visualization-api. For more options, visit https://groups.google.com/d/optout.
