Charter troubleshooting

Avatar

By Stuart Marshall

updated 4 months ago

Chart not showing

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

To connect with Google Sheets you need to publish your sheet to the web in csv format (details are in the example project file). In June 2020 Google changed something with how they handle CORS and this resulted in links to Google Sheets being blocked by browsers. To get round this you can use the following approach which proxies your request:

  • Prepend your Google Sheet link in Charter with https://cors-anywhere.herokuapp.com/ (so your link will look something like: https://cors-anywhere.herokuapp.com/https://docs.google.com/spreadsheets/d/e/2PACX-1vS4JsraNXzr_hI8fffmrUdFjQbb4zqiGHOlFqIcyniNoZ2zwBG48RN3DpQdLH-f3Cr-k6fnn5LXP77o/pub?gid=0&single=true&output=csv)

It is worth considering if you need your data on Google Sheets or whether hosting a csv on your own server might be a better approach. If you need to collaborate on data updates then Google is the obvious solution but in other cases I would recommend hosting your own. If you have the right set up it is very quick and easy to update / maintain CSV files directly on the server.


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.

If you have any issues that are not resolved using the advice here please contact support.

Did this answer your question?