javascript - Google Charts API - Dashboard: Hide rows in table -
i trying create dashboard google charts api.
the dashboard includes controlwrapper type chartrangefilter , 2 chartwrapper (linechart , table). setup working fine, want add 1 addition.
the linechart shall show whole dataset, table part of it. example have 10 rows , in table first 8 should shown.
this current controlwrapper:
control = new google.visualization.controlwrapper({ 'controltype': 'chartrangefilter', 'containerid': 'control', 'options': { 'filtercolumnindex': 0, 'ui': { 'charttype': 'linechart', 'chartoptions': { 'chartarea': {'width': '95%'}, 'haxis': {'baselinecolor': 'none'} }, 'chartview': { 'columns': [0,1] }, 'minrangesize': 86400000 } } }); and table:
chart = new google.visualization.chartwrapper({ 'charttype': 'table', 'containerid': 'table', 'options': { width: 470, height: 340, sortcolumn: 0, sortascending: false }, 'view': { 'columns': [0, 1] //,'rows': [0,1,2,3,4,5,6] } }); when uncomment row "//,'rows': [0,1,2,3,4,5,6]" in table definition error when move slider of controlwrapper:
invalid row index 6. should in range [0-5] is there way working?
the reason (in example) in last 2 rows data in column 3 shown in linechart not in table.
thanks in advance!
//edit:
here example page: http://circlecount.com/test.chart.range.php
here code:
<!doctype html public "-//w3c//dtd xhtml+rdfa 1.1//en" "http://www.w3.org/markup/dtd/xhtml-rdfa-2.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" version="xhtml+rdfa 1.1" xmlns:xsi="http://www.w3.org/2001/xmlschema-instance" xsi:schemalocation="http://www.w3.org/1999/xhtml http://www.w3.org/markup/schema/xhtml-rdfa-2.xsd" lang="de" xml:lang="de" dir="ltr" xmlns:og="http://ogp.me/ns#" > <head> <script src="http://www.google.com/jsapi?key=" type="text/javascript"></script> <script type="text/javascript">google.load("jquery", "1.7.1");</script> </head> <body> <script type="text/javascript"> // load visualization api , piechart package. google.load('visualization', '1.0', {'packages':['corechart', 'table', 'controls']}); // set callback run when google visualization api loaded. google.setonloadcallback(fctdrawchart); var control, chart; function fctdrawchart() { //follower var data = new google.visualization.datatable(); var mytempdate = new date(); data.addcolumn('date', 'day'); data.addcolumn('number', 'followers'); data.addrows(10); data.setcell(0, 0, new date('11/07/2011')); data.setcell(0, 1, 11); data.setcell(1, 0, new date('11/08/2011')); data.setcell(1, 1, 222); data.setcell(2, 0, new date('11/09/2011')); data.setcell(2, 1, 1242); data.setcell(3, 0, new date('11/10/2011')); data.setcell(3, 1, 1420); data.setcell(4, 0, new date('11/11/2011')); data.setcell(4, 1, 1609); data.setcell(5, 0, new date('11/12/2011')); data.setcell(5, 1, 1676); data.setcell(6, 0, new date('11/13/2011')); data.setcell(6, 1, 1734); data.setcell(7, 0, new date('11/14/2011')); data.setcell(7, 1, 1773); data.setcell(8, 0, new date('11/15/2011')); data.setcell(8, 1, 1857); data.setcell(9, 0, new date('11/16/2011')); data.setcell(9, 1, 1874); var dataview = new google.visualization.dataview(data); dataview.setcolumns([0, 1]); var dashboard = new google.visualization.dashboard(document.getelementbyid('dashboard')); control = new google.visualization.controlwrapper({ 'controltype': 'chartrangefilter', 'containerid': 'control', 'options': { 'filtercolumnindex': 0, 'ui': { 'charttype': 'linechart', 'chartoptions': { 'chartarea': {'width': '95%'}, 'haxis': {'baselinecolor': 'none'} }, 'chartview': { 'columns': [0,1] }, 'minrangesize': 86400000 } } }); google.visualization.events.addlistener(control, 'statechange', function() { $("#periodselector").val("custom"); }); chart = new google.visualization.chartwrapper({ 'charttype': 'table', 'containerid': 'table', 'options': { width: 470, height: 340, sortcolumn: 0, sortascending: false }, 'view': { 'columns': [0, 1] ,'rows': [0,1,2,3,4,5,6] } }); chart2 = new google.visualization.chartwrapper({ 'charttype': 'linechart', 'containerid': 'chart', 'options': { width: 470, height: 340, sortcolumn: 0, sortascending: false }, 'view': { 'columns': [0, 1] } }); dashboard.bind(control, chart); dashboard.bind(control, chart2); dashboard.draw(data); } </script> <div id='dashboard' > <div id='table' style='width:240px;height:400px;'></div> <div id='chart' style='width:240px;height:400px;'></div> <div id='control' style='width:840px;height:40px;'></div> </div> </div> </body> </html> what want get: - chart on complete period (10 days) - table on first 7 days - controlwrapper on complete period (10 days), controlling chart , table
i hope makes issue more clear. if not, please give me note.
thanks in advance!
update: ideas of jmac got working following function:
google.visualization.events.addlistener(control, 'statechange', function(event) { if (control.getstate()["range"]["end"] > mylastrealdate) { var myrowsarr = new array(); var mytempdate = control.getstate()["range"]["start"]; (var i=0;i<mylastrealrow-(mydatearr[(mytempdate.getmonth()+1)+"/"+mytempdate.getdate()+"/"+mytempdate.getfullyear()]);i++) { myrowsarr.push(i); } chart.setview({'rows': myrowsarr}); } else { chart.setview({'rows': null}); } }); you can find working example here: http://circlecount.com/test.chart.range.php
the problem can solved following function:
google.visualization.events.addlistener(control, 'statechange', function(event) { if (control.getstate()["range"]["end"] > mylastrealdate) { var myrowsarr = new array(); var mytempdate = control.getstate()["range"]["start"]; (var i=0;i<mylastrealrow-(mydatearr[(mytempdate.getmonth()+1)+"/"+mytempdate.getdate()+"/"+mytempdate.getfullyear()]);i++) { myrowsarr.push(i); } chart.setview({'rows': myrowsarr}); } else { chart.setview({'rows': null}); } } ); the number of row has saved in array per date, example:
mydatearr['11/7/2011'] = 0; the row , date of "break" has saved in variables:
mylastrealdate = new date('11/14/2011'); mylastrealrow = 7; here working example: http://circlecount.com/test.chart.range.php
Comments
Post a Comment