Google Charts: Uncaught ReferenceError: data is not defined and mixed Content -
i trying draw chart array of data , failed. tried everything. please advice. there code. got 2 message error: uncaught referenceerror: data not defined , mixed content: page @ 'https://n-ynglt762zsbkrcsxo6kvcrifknrgdiycdteawcy-script.googleusercontent.com/usercodeapppanel' loaded on https, requested insecure script 'http://www.google.com/jsapi'. request has been blocked; content must served on https.
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title> google visualization api sample </title> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load('visualization', '1.1', {packages: ['corechart', 'controls']}); </script> <script type="text/javascript"> google.load("visualization", "1", {packages:["controls"]}); google.setonloadcallback(drawvisualization); function drawvisualization() { var dashboard = new google.visualization.dashboard(document.getelementbyid('dashboard')); var control = new google.visualization.controlwrapper({ 'controltype': 'chartrangefilter', 'containerid': 'control', 'options': { // filter date axis. 'filtercolumnindex': 0, 'ui': { 'charttype': 'linechart', 'chartoptions': { 'chartarea': {'width': '90%'}, 'haxis': {'baselinecolor': 'none'} }, 'chartview': { 'columns': [0, 1, 2] }, 'minrangesize': 1 } }, // initial range: 1 4. 'state': {'range': {'start': 1, 'end': 4}}, view: { columns: [{ type: 'number', calc: function (dt, row) { return {v: row, f: dt.getformattedvalue(row, 0)}; } }, 1, 2] } }); //then reverse process in chartwrapper's view.columns: var chart = new google.visualization.chartwrapper({ 'charttype': 'areachart', 'containerid': 'chart', 'options': { // use same chart area width control axis alignment. 'chartarea': {'height': '80%', 'width': '90%'}, 'haxis': {'slantedtext': false}, 'vaxis': {'viewwindow': {'min': 0, 'max': 20}}, 'legend': {'position': 'none'} }, view: { columns: [{ type: 'string', label: data.getcolumnlabel(0), calc: function (dt, row) { return dt.getformattedvalue(row, 0); } }, 1, 2] } }); var datatable = new google.visualization.datatable(); var query = new google.visualization.query('https://docs.google.com/spreadsheets/d/1sphk7dqcok03tegaxl-so7jkovxoyoo3rdbtkgejjeu/edit#gid=0'); var nowone = getnowdate(); query.setquery("select a,b,c >= datetime '"+nowone+"' "); query.send(handlequeryresponse); dashboard.bind(control, chart); dashboard.draw(data); function getnowdate(){ var d=new date(); d.setdate(d.getdate() - 1); var year = d.getfullyear(); var month = d.getmonth() + 1; var day = d.getdate(); var hour = d.gethours(); var minute = d.getminutes(); var second = d.getseconds(); var microsecond = d.getdate(); if (month.tostring().length == 1) { month = '0' + month; } if (day.tostring().length == 1) { day = '0' + day; } if (hour.tostring().length == 1) { hour = '0' + hour; } if (minute.tostring().length == 1) { minute = '0' + minute; } if (second.tostring().length == 1) { second = '0' + second; } //while(microsecond.tostring().length < 3) { // microsecond = '0' + microsecond; //} var datestring = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second; return datestring; } function handlequeryresponse(response) { if (response.iserror()) { alert('error in query: ' + response.getmessage() + ' ' + response.getdetailedmessage()); return; } var data = response.getdatatable(); } } </script> </head> <body style="font-family: arial;border: 0 none;"> <div id="dashboard" style="width:1300px;overflow:scroll;"> <div id="chart" style="position: relative; width: 1300px; height: 300px;"></div> <div id="control"></div> </div> <div id="junk_div" style="display: none;"></div> </body> </html> i appreciate attention question. still don't 'data' defined within drawvisualization. . have 2 similar code working share...
here go, full working solution you:
<!doctype html> <html xmlns="https://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title> google visualization api sample </title> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load('visualization', '1.1', {packages: ['corechart', 'controls']}); </script> </head> <body style="font-family: arial;border: 0 none;"> <div id="dashboard" style="width:1300px;overflow:scroll;"> <div id="chart" style="position: relative; width: 1300px; height: 300px;"></div> <div id="control"></div> </div> <div id="junk_div" style="display: none;"></div> <script type="text/javascript"> var data; var datatable; var dashboard; google.load("visualization", "1", {packages:["controls"]}); google.setonloadcallback(drawvisualization); function setupdata(){ var control = new google.visualization.controlwrapper({ 'controltype': 'chartrangefilter', 'containerid': 'control', 'options': { // filter date axis. 'filtercolumnindex': 0, 'ui': { 'charttype': 'linechart', 'chartoptions': { 'chartarea': {'width': '90%'}, 'haxis': {'baselinecolor': 'none'} }, 'chartview': { 'columns': [0, 1, 2] }, 'minrangesize': 1 } }, // initial range: 1 4. 'state': {'range': {'start': 1, 'end': 4}}, view: { columns: [{ type: 'number', calc: function (dt, row) { return {v: row, f: dt.getformattedvalue(row, 0)}; } }, 1, 2] } }); //then reverse process in chartwrapper's view.columns: var chart = new google.visualization.chartwrapper({ 'charttype': 'areachart', 'containerid': 'chart', 'options': { // use same chart area width control axis alignment. 'chartarea': {'height': '80%', 'width': '90%'}, 'haxis': {'slantedtext': false}, 'vaxis': {'viewwindow': {'min': 0, 'max': 20}}, 'legend': {'position': 'none'} }, view: { columns: [{ type: 'string', label: data.getcolumnlabel(0), calc: function (dt, row) { return dt.getformattedvalue(row, 0); } }, 1, 2] } }); console.log('label: ' + data.getcolumnlabel(0)); dashboard.bind(control, chart); dashboard.draw(data); } function drawvisualization() { datatable = new google.visualization.datatable(); dashboard = new google.visualization.dashboard(document.getelementbyid('dashboard')); var query = new google.visualization.query('https://docs.google.com/spreadsheets/d/1sphk7dqcok03tegaxl-so7jkovxoyoo3rdbtkgejjeu/edit#gid=0'); var nowone = getnowdate(); query.setquery("select a,b,c >= datetime '"+nowone+"' "); query.send(handlequeryresponse); } function getnowdate(){ var d = new date(); d.setdate(d.getdate() - 1); var year = d.getfullyear(); var month = d.getmonth() + 1; var day = d.getdate(); var hour = d.gethours(); var minute = d.getminutes(); var second = d.getseconds(); var microsecond = d.getdate(); if (month.tostring().length == 1) { month = '0' + month; } if (day.tostring().length == 1) { day = '0' + day; } if (hour.tostring().length == 1) { hour = '0' + hour; } if (minute.tostring().length == 1) { minute = '0' + minute; } if (second.tostring().length == 1) { second = '0' + second; } //while(microsecond.tostring().length < 3) { // microsecond = '0' + microsecond; //} var datestring = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second; return datestring; } function handlequeryresponse(response) { if (response.iserror()) { alert('error in query: ' + response.getmessage() + ' ' + response.getdetailedmessage()); return; } data = response.getdatatable(); setupdata(); } </script> </body> </html> 
Comments
Post a Comment