Charter troubleshooting

Any of the following issues can cause your charts to not display

Cross Origin Restrictions

If you are using a 'warehoused' csv file (i.e.one on your server that you are linking to) then this will likely be blocked in Preview. You will see error messages relating to 'cross origin' in the console (when using the browser inspector tools). This is due to Cross Origin Restrictions which prevents files from a server being shown in your local server. To get around this you can (in Safari) select the Develop menu and 'Disable Cross Origin Restrictions' and then refresh the page. You can also add an htaccess file to the folder where the csv file is with code that allows cross origin sharing of the file(s) - there are various guides online about how to do this.

NB: This issue only affects Preview and your published page will display the charts fine.

Google sheet integration

In June 2020 Google changed something with how they handle CORS and this resulted in links to Google Sheets being blocked by browsers (as of November 2020 they now seem to also be preventing the use of a proxy to bypass the CORS issue).

As such, if you have your data on Google then I recommend exporting these files into CSV format and adding them to a folder on your server (or RW Resources). Then add the links to these files to your Charter stacks. This will immediately restore your charts to working order. 

Tip: There are various solutions to even editing these CSV files remotely. I use Forklift as my ftp app. I can connect to my server using this and open the csv file in an editing app (i use one called 'Easy CSV editor'). Any edits that are made are immediately saved to the remote file.

Note: Charter v2 is currently in development and I will try to enable using Google Sheets again in this version (using a different approach).

Missing double quotes

If you are adding your data via the stack (as opposed to linking to a csv file) then it is vital that you have added double quotes around all of your labels and separated each label with a comma. If you have not done this, or have missed out a double quote somewhere (very easy to do!) then your chart will not display (and in fact no charts on your page will display).

Tip: Linking to csv files is the recommended approach for providing your data. This method does not require you to add double quotes (and is also much easier to maintain and update going forward).

CSV file extension case

Your csv files should have a lowercase file type (.csv). There have been reports of uppercase file extensions causing issues.