javascript - Google Visualization: Chart Editor Error -
i try chart google visualization chart when click on ok nothing happens , console displays error:
typeerror: not function
the code using below:
<script type="text/javascript"> google.load('visualization', '1', { packages: ['corechart', 'controls', 'charteditor'] }); google.setonloadcallback(drawchart); window.addeventlistener('resize', redrawchart, false); var chart; function drawchart() { var data = new google.visualization.datatable(getdata()); var columnstable = new google.visualization.datatable(); columnstable.addcolumn('number', 'colindex'); columnstable.addcolumn('string', 'collabel'); var initstate = { selectedvalues: [] }; // put columns data table (skip column 0) (var = 1; < data.getnumberofcolumns(); i++) { columnstable.addrow([i, data.getcolumnlabel(i)]); // can comment out next line if want have default selection other whole list initstate.selectedvalues.push(data.getcolumnlabel(i)); } // can set individual columns default columns (instead of populating via loop above) this: // initstate.selectedvalues.push(data.getcolumnlabel(4)); chart = new google.visualization.chartwrapper({ charttype: 'linechart', containerid: 'chart_div', datatable: data, options: { title: 'number in treatment' } }); var charteditor = new google.visualization.charteditor(); google.visualization.events.addlistener(charteditor, 'ok', data); charteditor.opendialog(chart, {}); chart = charteditor.getchartwrapper(); redrawchart(); var columnfilter = new google.visualization.controlwrapper({ controltype: 'categoryfilter', containerid: 'filter_div', datatable: columnstable, options: { filtercolumnlabel: 'collabel', ui: { label: 'columns', allowtyping: false, allowmultiple: true, allownone: false, selectedvalueslayout: 'belowstacked' } }, state: initstate }); var width = math.min(document.documentelement.clientwidth, window.innerwidth || 0) + 'px'; chart.setoption('height', '200px'); chart.setoption('width', width); setchartview(); function setchartview() { var state = columnfilter.getstate(); var row; var view = { columns: [0] }; (var = 0; < state.selectedvalues.length; i++) { row = columnstable.getfilteredrows([{ column: 1, value: state.selectedvalues[i] }])[0]; view.columns.push(columnstable.getvalue(row, 0)); } // sort indices original order view.columns.sort(function (a, b) { return (a - b); }); chart.setview(view); chart.draw(); } google.visualization.events.addlistener(columnfilter, 'statechange', setchartview); setchartview(); columnfilter.draw(); } function redrawchart() { var width = math.min(document.documentelement.clientwidth, window.innerwidth || 0) + 'px'; chart.setoption('height', '200px'); chart.setoption('width', width); chart.draw(); } how chart redrawn once ok button has been clicked?
the last argument 'ok' event, should reference callback function -- not data
see following snippet, getwrapper passed callback
when fires, use getchartwrapper
var charteditor = new google.visualization.charteditor(); google.visualization.events.addlistener(charteditor, 'ok', getwrapper); charteditor.opendialog(chart, {}); function getwrapper() { chart = charteditor.getchartwrapper(); redrawchart(); } see following working snippet...
google.charts.load('current', { callback: drawchart, packages: ['corechart', 'controls', 'charteditor'] }); var chart; function drawchart() { var jsondata = "{\"cols\":[{\"id\":\"\",\"label\":\"datetime\",\"type\":\"datetime\"},{\"id\":\"\",\"label\":\"rpi1\",\"type\":\"number\"},{\"id\":\"\",\"label\":\"rpi2\",\"type\":\"number\"}],\"rows\":[{\"c\":[{\"v\":\"date(2017, 0, 3, 15, 40, 41)\"},{\"v\":\"22\"},{\"v\":null}]},{\"c\":[{\"v\":\"date(2017, 0, 3, 15, 40, 52)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"date(2017, 0, 3, 15, 41, 2)\"},{\"v\":\"22\"},{\"v\":null}]},{\"c\":[{\"v\":\"date(2017, 0, 3, 15, 41, 12)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"date(2017, 0, 3, 15, 41, 22)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"date(2017, 0, 3, 15, 41, 32)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"date(2017, 0, 3, 15, 41, 43)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"date(2017, 0, 3, 15, 41, 53)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"date(2017, 0, 3, 15, 42, 3)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"date(2017, 0, 3, 15, 42, 13)\"},{\"v\":\"22\"},{\"v\":null}]},{\"c\":[{\"v\":\"date(2017, 0, 3, 15, 42, 23)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"date(2017, 0, 3, 15, 42, 34)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"date(2017, 0, 3, 15, 42, 44)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"date(2017, 0, 3, 15, 42, 54)\"},{\"v\":\"19\"},{\"v\":null}]},{\"c\":[{\"v\":\"date(2017, 0, 3, 15, 43, 4)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"date(2017, 0, 3, 15, 43, 15)\"},{\"v\":\"22\"},{\"v\":null}]},{\"c\":[{\"v\":\"date(2017, 0, 3, 15, 43, 25)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"date(2017, 0, 3, 15, 43, 35)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"date(2017, 0, 3, 15, 43, 45)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"date(2017, 0, 3, 15, 43, 55)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"date(2017, 0, 3, 15, 44, 6)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"date(2017, 0, 3, 15, 44, 16)\"},{\"v\":\"19\"},{\"v\":null}]},{\"c\":[{\"v\":\"date(2017, 0, 3, 15, 44, 26)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"date(2017, 0, 3, 15, 44, 36)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"date(2017, 0, 3, 15, 44, 47)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"date(2017, 0, 3, 15, 44, 57)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"date(2017, 0, 3, 15, 45, 7)\"},{\"v\":\"19\"},{\"v\":null}]},{\"c\":[{\"v\":\"date(2017, 0, 3, 15, 45, 17)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"date(2017, 0, 3, 15, 45, 27)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"date(2017, 0, 3, 15, 45, 38)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"date(2017, 0, 3, 15, 45, 48)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"date(2017, 0, 3, 15, 45, 58)\"},{\"v\":\"23\"},{\"v\":null}]},{\"c\":[{\"v\":\"date(2017, 0, 3, 15, 46, 8)\"},{\"v\":\"23\"},{\"v\":null}]},{\"c\":[{\"v\":\"date(2017, 0, 3, 15, 46, 18)\"},{\"v\":null},{\"v\":\"24\"}]},{\"c\":[{\"v\":\"date(2017, 0, 3, 15, 46, 29)\"},{\"v\":null},{\"v\":\"22\"}]},{\"c\":[{\"v\":\"date(2017, 0, 3, 15, 46, 39)\"},{\"v\":null},{\"v\":\"22\"}]},{\"c\":[{\"v\":\"date(2017, 0, 3, 15, 46, 49)\"},{\"v\":null},{\"v\":\"21\"}]},{\"c\":[{\"v\":\"date(2017, 0, 3, 15, 46, 59)\"},{\"v\":null},{\"v\":\"21\"}]},{\"c\":[{\"v\":\"date(2017, 0, 3, 15, 47, 10)\"},{\"v\":null},{\"v\":\"22\"}]},{\"c\":[{\"v\":\"date(2017, 0, 3, 15, 47, 20)\"},{\"v\":null},{\"v\":\"21\"}]},{\"c\":[{\"v\":\"date(2017, 0, 3, 15, 47, 30)\"},{\"v\":null},{\"v\":\"21\"}]},{\"c\":[{\"v\":\"date(2017, 0, 3, 15, 47, 40)\"},{\"v\":null},{\"v\":\"22\"}]}]}" var data = new google.visualization.datatable(jsondata); var columnstable = new google.visualization.datatable(); columnstable.addcolumn('number', 'colindex'); columnstable.addcolumn('string', 'collabel'); var initstate = { selectedvalues: [] }; // put columns data table (skip column 0) (var = 1; < data.getnumberofcolumns(); i++) { columnstable.addrow([i, data.getcolumnlabel(i)]); // can comment out next line if want have default selection other whole list initstate.selectedvalues.push(data.getcolumnlabel(i)); } // can set individual columns default columns (instead of populating via loop above) this: // initstate.selectedvalues.push(data.getcolumnlabel(4)); chart = new google.visualization.chartwrapper({ charttype: 'linechart', containerid: 'chart_div', datatable: data, options: { title: 'number in treatment' } }); var charteditor = new google.visualization.charteditor(); google.visualization.events.addlistener(charteditor, 'ok', getwrapper); charteditor.opendialog(chart, {}); function getwrapper() { chart = charteditor.getchartwrapper(); redrawchart(); } var columnfilter = new google.visualization.controlwrapper({ controltype: 'categoryfilter', containerid: 'filter_div', datatable: columnstable, options: { filtercolumnlabel: 'collabel', ui: { label: 'columns', allowtyping: false, allowmultiple: true, allownone: false, selectedvalueslayout: 'belowstacked' } }, state: initstate }); var width = math.min(document.documentelement.clientwidth, window.innerwidth || 0) + 'px'; chart.setoption('height', '200px'); chart.setoption('width', width); setchartview(); function setchartview() { var state = columnfilter.getstate(); var row; var view = { columns: [0] }; (var = 0; < state.selectedvalues.length; i++) { row = columnstable.getfilteredrows([{ column: 1, value: state.selectedvalues[i] }])[0]; view.columns.push(columnstable.getvalue(row, 0)); } // sort indices original order view.columns.sort(function (a, b) { return (a - b); }); chart.setview(view); chart.draw(); } google.visualization.events.addlistener(columnfilter, 'statechange', setchartview); setchartview(); columnfilter.draw(); } function redrawchart() { var width = math.min(document.documentelement.clientwidth, window.innerwidth || 0) + 'px'; chart.setoption('height', '200px'); chart.setoption('width', width); chart.draw(); }<script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div> <div id="filter_div"></div>note: recommend using https://www.gstatic.com/charts/loader.js load libraries, not jsapi
according release notes...
the version of google charts remains available via jsapi loader no longer being updated consistently. please use new gstatic loader on.
this change load statement, see above snippet...
Comments
Post a Comment