Sheets not connecting.

[Myke500]

Looks good, Followed the instruction.
Tried it first on my server using the demo material and code.
Works great. :)

Changed the key, and column settings to match my sheet and I get 'nothing' where the data should be.

What am I doing wrong or missing?

GSheet:

Site URL:

===Snip from graphic.js file:===

var key = "1y4WU_hNpSeYDVuWaHve7TVRhDePvKl39Ue21z9GskeA"; //My Key

//"data" refers to the column name with no spaces and no capitals //punctuation or numbers in your column name //"title" is the column name you want to appear in the published table var columns = [ { "data": "acountry", "title": "Country","defaultContent": ""}, { "data": "drug", "title": "Drug Name","defaultContent": ""}, { "data": "active", "title": "Active Ingredient","defaultContent": ""}, { "data": "company", "title": "Company" }, { "data": "violations", "title": "Claims" }, { "data": "total-award", "title": "Total Awarded" }];

I left the columns in from the demo sheet just to test . By replacing my key with the demo key I was able to figure our that the issue does not seem to be with column data, added the default content to dismiss the error for null content. But something with the key is possibly in error? I did share to all the world to view with the link.

Any help would be great.

[Myke500]

Does my server need an https connection? Could that be the issue?

[scottpham]

I will give this a closer a look this weekend, but my first thought is: did you set your google sheet to "publish to the web" in addition to sharing it with the public?

[Myke500]

Ah... No. Missed that part of it. Sorry. One step closer.

All looks to be working. This was the error I was getting when it was not published properly.

Sorry for being on the low end of the learning curve. :)

I love how simple this is. Next step is to learn how to format it and pull data from different tabs.

[aachokey]

I know it says to not capitalize the column names after "data":, but try capitalizing them.

[Biftu]

I have a similar problem except I believe that I published my spread sheet properly.

Spreadsheet

URL

var key = "1mdsk4xb22VAJGnhXque9NGqgD_ZSrCG460j6Whsiv50"; var columns = [ { "data": "policedepartment", "title": "Police Department" }, { "data": "ftper1000", "title": "Full Time Officers Per 1,000" }, { "data": "population", "title": "Population" }];

I really can't figure out why it wont work.

[scottpham]

Hi Biftu, this part of the code looks fine. What kinds of errors are you seeing in your console? And can you link to the rest of your code or paste it in a comment so I can look at it?

[Biftu]

The error I am getting is that the table portion of the page doesn't show up when I click on index.html . I didn't really change anything in the code too much other than columns. Is my spreadsheet ok? Here is the rest of the code: ` tabletop-to-datatables-master.zip

`

[scottpham]

Hi Biftu,

I've found the problem. The TL;DR is that the column names in the "data" parameter must exactly match the column names as they appear in the spreadsheet. So your columns code should read like this:

var columns = [{
  "data": "Police Department",
  "title": "Police Department"
}, {
  "data": "FTPer1000",
  "title": "Full Time Officers Per 1,000"
}, {
  "data": "population",
  "title": "Population"
}];

In the readme.md I write that TableTop will strip out spaces and capitals, requiring you to write "Police Department" as "policedepartment". I am not sure why it isn't working that way now, but this seems to fix the issue.

I'm going to close this for now but will change the readme if it continues to happen.

As an FYI, I received this error when I loaded your project:

This error means tabletop is having trouble matching up your column names with the google spreadsheet. Sometimes the error is in your graphic.js and sometimes it's in the spreadsheet itself, but definitely check those column names if you see that.

[Biftu]

Did making those changes work for you because I still have the same error. No chart popping up. I even tried to simplify the column names to one word lower case and got the same result. tabletop-to-datatables-master.zip

[scottpham]

Hi Biftu,

In this project zip it looks like you moved your index inside of the JS folder. If you look in the dev console when this happens you'll see that the browser is having trouble locating graphic.js, the file which does the actual rendering of the chart.

To fix this, move index.html into the folder above the js folder. Look in the repo to see how that is structured.

Also be sure you are running a development server--if you never saw the error I posted above, it's possible you are running from your local filesystem (i.e., you double clicked index.html to open the file).

To run a dev server, type this terminal command from the directory which contains index.html.

python -m SimpleHTTPServer