javascript - Promisify google.charts.setOnLoadCallback -

i've been using google's charts api , have reached dead end. use api query spreadsheet , return data. visualizations i'm using razorflow - js dashboard framework - not google charts. getting data pretty straight forward using code (this code should work - spreadsheet public):

function initialize() { // url of spreadsheet source data from. var mykey = "12e2fe8gwupvxjoirzgczucfhrklw69ujam7fch71jha" var query = new google.visualization.query("https://docs.google.com/spreadsheets/d/" + mykey + "/gviz/tq?sheet=sheet1"); query.setquery("select a,b,c a>=1 limit 1"); query.send(function processresponse(response) {      var kpidata = response.getdatatable();     var kpiname = [];     mynumberofdatacolumns = kpidata.getnumberofcolumns(0) - 1;                  (var h = 0; h <= mynumberofdatacolumns ; h++) {         kpiname[h] = kpidata.getcolumnlabel(h);     };   }); };      google.charts.setonloadcallback(initialize); 

the above create array holding column labels column a,b , c.

once data fetched want use data charts. problem is, need have data ready before create charts. 1 way have done this, creating chart before calling google.charts.setonloadcallback(initialize) , populate charts data inside callback. this:

//create dashboard standalonedashboard(function (db) { //create chart - or in case kpi var firstkpi = new kpicomponent(); //add empty component db.addcomponent(firstkpi); //lock component , wait data firstkpi.lock();   function initializeandpopulatechart() { // url of spreadsheet source data from. var mykey = "12e2fe8gwupvxjoirzgczucfhrklw69ujam7fch71jha" var query = new google.visualization.query("https://docs.google.com/spreadsheets/d/" + mykey + "/gviz/tq?sheet=sheet1"); query.setquery("select a,b,c a>=1 limit 1"); query.send(function processresponse(response) {      var kpidata = response.getdatatable();     var kpiname = [];     mynumberofdatacolumns = kpidata.getnumberofcolumns(0) - 1;                  (var h = 0; h <= mynumberofdatacolumns ; h++) {         kpiname[h] = kpidata.getcolumnlabel(h);     };     //use label column header     firstkpi.setcaption(kpiname[0]);     //set value - query     firstkpi.setvalue(12);     //unlock chart     firstkpi.unlock();   }); };      google.charts.setonloadcallback(initializeandpopulatechart); }); 

it works but, separate chart functions data loading. guess best solution create promise. way this:

//create dashboard standalonedashboard(function (db) {  function loaddata() { return new promise (function (resolve,reject){     //get data, eg. google.charts.setonloadcallback(initialize); }) }  loaddata().then(function () {     var firstkpi = new kpicomponent();     firstkpi.setcaption(kpiname[0]);     firstkpi.setvalue(12);     db.addcomponent(firstkpi);      }) }); 

as should quite obvious, not understand how use promises. above not work but. have tried lots of different ways but, not seem closer solution. on right track in using promises? if so, how should go this?

inside promise need call resolve or reject function when async job done.

function loaddata() {   return new promise (function (resolve,reject){     query.send(function() {       //...       err ? reject(err) : resolve(somedata);     });   }) } 

and can do

loaddata().then(function (somedata) {     //here can async data   }).catch(function(err){     //here can error   }); });