How to properly integrate google spreadsheets with highcharts?

Question

I am having zero luck creating a data viz with highcharts using google spreadsheets. I've spent most of the day goggling for help and reading through google API / highcharts documentation / stack overflow / etc, and I'm still at the same spot I started this morning.

It seems to be an issue relating to new vs. old google spreadsheets. For example, I found this example to work, but as you'll see, the google spreadsheet has the older URL construction that includes "key=". When I update with a key from a new spreadsheet (one that does not have the URL construction with "key="), the chart isn't created.

Any ideas? My sheets are all public and published to the web, so I know that's not it.

Here's the spreadsheet I've been testing with: https://docs.google.com/spreadsheets/d/18jFq7JiZI4wfj0SOMZh3fii1lquGF7NWJnmoFsXNJbM/edit?usp=sharing, using the key 18jFq7JiZI4wfj0SOMZh3fii1lquGF7NWJnmoFsXNJbM

Any ideas much appreciated.

Answer 1

If you point Highcharts at your key, you get an error 14. Looking at your sheet, it chokes on the second row "Total" since those numbers are formatted as strings. Fixing that in the sheet, and tweaking some of the parameters you can pass to Highcharts and your chart will start to take shape:

data: {
    googleSpreadsheetKey: '18jFq7JiZI4wfj0SOMZh3fii1lquGF7NWJnmoFsXNJbM',
    startColumn: 0,
    endColumn: 5,
    startRow: 0
},

Hopefully, that'll get you going, your chart still needs a bit more work (too many xAxis labels, the total column overwhelms the rest of the data, etc...)