Accepted answer

you could use google sheets webquery. basically, this is a method to export the spreadsheet's data into a given format such as csv, json, etc. in your case, the link should look like this:

please note that here "tg?key" is the key of your google sheet, and "&gid=" is not 4, this only tells highcharts to selected sheet 4, but for google sheets look at the source link and copy the numbers which go after "&gid=". furthermore, "&tq=" is used to select the columns of the google sheet, which in the link above selects "column a" and "column b". to find out more on how to select columns and query the output refer to:

lastly, "&tqx=" is used to output your data in the format you want. the above link uses "out:csv" which will output the data as comma-separated values. this could as well be json if you like. have a look at this documentation:

in order to implement this output into your javascript code which you would then use to built your chart, you could use external javascript libraries to handle these outputs. if you output your data as csv, you can use "papaparse.js" to parse the csv into json which you can be then read by highcharts and allows you to built the chart. refer to this documentation:

an alternative to this would be, to output your google sheets directly as json, then use jquery to make an ajax call and load the json-encoded data into your javascript code. precisely, you could perhaps use jquery.getjson() to get the data. look at this link for more details on how to get json:

finally, it is up to you on which format you choose to output the data, i prefer using json as it saves you the extra step of having to convert the csv into json. whatever suits you best and is easier for you to understand.

once you have your data, you may have to parse your json objects with json.parse(), and then organize your data into an array with .push(). as @jlbriggs stated, organize your data first before you built the chart. afterwards, you can make two, three or more ajax calls to import data from different sources. i would not use many as this will impact in your loading and slow down data transfer.

nb: it is important to format the data accordingly for highcharts to recognize the data, so use parsefloat() to convert strings into numbers, date.utc() to convert strings into date, etc.

hope this helps you.

Related Query

More Query from same tag