javascript - Can I Create a Single HighCharts Graph from Multiple Data Sources (Multiple GoogleSheets in this case) -

i’m trying use data multiple googlesheets produce single highchart graph. i’d without moving data 1 area of single spreadsheet, particularly want use drilldown option make difficult collect data together. thought pass columns array , reference array in data property of chart, i’m struggling 1 column 1 sheet.

i have searched answers online, have not found relating highcharts getting data multiple sources. previous research: using googlesheets data array before creating chart: (removed link) - problem use 1 googlesheets reference here chart object sits inside data object.

api documentation - (removed link) – tells me can access columns that’s not part i’m having problems with

querying chart: (removed link) - have considered making hidden charts, interrogating data , making new charts those, seems long way round , i’m still not sure grab data need.

using 2 googlesheets separate charts on same page: (removed link) have done this.

please me understand how can access properties , methods of object outside of object itself?

thank you.

my code:

        //function produce data array ***not working - cannot extract array object method***     function getdata(){      highcharts.data({         googlespreadsheetkey: '12x66_qektkg_uzvpheygdtmfnu7oh81psqyn78hxt80',         googlespreadsheetworksheet: 4,         startcolumn: 16,         endcolumn: 22,         startrow: 63,         endrow: 76,          parsed: function (columns) {             var datatest2 = [];             var columnlength = columns[1].length;             (i = 0; < columnlength; = + 1) {                  datatest2.push(columns[1][i]);              }              alert(datatest2); //this works here, not if move outside of method, if return it.             var testreturn = this.googlespreadsheetkey; //trying return property using "this" - i've tried this.googlespreadsheetkey.value still undefined             return testreturn; //returns "undefined"          }      });       } 

you use google sheets webquery. basically, method export spreadsheet's data given format such csv, json, etc. in case, link should this:

• https://docs.google.com/spreadsheet/tq?key=12x66_qektkg_uzvpheygdtmfnu7oh81psqyn78hxt80&gid=4&tq=select%20a,%20b&tqx=reqid:1;out:csv;%20responsehandler:webquery

please note here "tg?key" key of google sheet, , "&gid=" not 4, tells highcharts selected sheet 4, google sheets @ source link , copy numbers go after "&gid=". furthermore, "&tq=" used select columns of google sheet, in link above selects "column a" , "column b". find out more on how select columns , query output refer to:

• https://developers.google.com/chart/interactive/docs/querylanguage?csw=1#setting_the_query_in_the_data_source_url

lastly, "&tqx=" used output data in format want. above link uses "out:csv" output data comma-separated values. json if like. have @ documentation:

• https://developers.google.com/chart/interactive/docs/dev/implementing_data_source#requestformat

in order implement output javascript code use built chart, use external javascript libraries handle these outputs. if output data csv, can use "papaparse.js" parse csv json can read highcharts , allows built chart. refer documentation:

• http://papaparse.com/docs#remote-files

an alternative be, output google sheets directly json, use jquery make ajax call , load json-encoded data javascript code. precisely, perhaps use jquery.getjson() data. @ link more details on how json:

• http://api.jquery.com/jquery.getjson/

finally, on format choose output data, prefer using json saves step of having convert csv json. whatever suits best , easier understand.

once have data, may have parse json objects json.parse(), , organize data array .push(). @jlbriggs stated, organize data first before built chart. afterwards, can make two, 3 or more ajax calls import data different sources. not use many impact in loading , slow down data transfer.

nb: important format data accordingly highcharts recognize data, use parsefloat() convert strings numbers, date.utc() convert strings date, etc.

hope helps you.