javascript - Multiple string and number range filters - google visualization -
i wish include multiple string , number range filters in database. letting put 1 of each @ moment though , can't figure out why.
below current code using.
html:
<div id="dashboard"> <div id="string_filter_div"></div> <div id="position"></div> <div id="numnber_range_filter_div"></div> <div id="height"></div> <div id="table_div"></div> </div> javascript:
function drawtable() { var data = new google.visualization.datatable(); data.addcolumn('string', 'name'); data.addcolumn('string', 'team'); data.addcolumn('string', 'nationality'); data.addcolumn('number', 'height'); data.addcolumn('number', 'weight'); data.addcolumn('number', 'age'); data.addcolumn('string', 'foot'); data.addcolumn('string', 'position'); data.addcolumn('number', 'overall rating'); data.addcolumn('number', 'attack'); data.addcolumn('number', 'defense'); data.addcolumn('number', 'header accuracy'); data.addcolumn('number', 'dribble accuracy'); data.addcolumn('number', 'short pass accuracy'); data.addcolumn('number', 'short pass speed'); data.addcolumn('number', 'long pass accuracy'); data.addcolumn('number', 'long pass speed'); data.addcolumn('number', 'shot accuracy'); data.addcolumn('number', 'place kicking'); data.addcolumn('number', 'swerve'); data.addcolumn('number', 'ball control'); data.addcolumn('number', 'weak foot accuracy'); data.addcolumn('number', 'weak foot usage'); data.addcolumn('number', 'goal keeping'); data.addcolumn('number', 'responsiveness'); data.addcolumn('number', 'explosive power'); data.addcolumn('number', 'dribble speed'); data.addcolumn('number', 'top speed'); data.addcolumn('number', 'body balance'); data.addcolumn('number', 'stamina'); data.addcolumn('number', 'kicking power'); data.addcolumn('number', 'jump'); data.addcolumn('number', 'injury'); data.addcolumn('number', 'attack 2'); data.addcolumn('number', 'defence 2'); data.addcolumn('number', 'form'); data.addcolumn('number', 'tenacity'); data.addcolumn('number', 'teamwork'); data.addcolumn('number', 'owners'); data.addcolumn('number', 'price'); data.addrows([ ['messi','fc barcelona','argentina',169,67,25,'left foot','ss',98,99,38,74,98,84,82,81,81,99,85,85,93,6,4,50,84,97,98,82,83,76,80,74,2,3,2,6,76,83,904,55704866], ['iniesta','fc barcelona','spain',170,65,28,'right foot','cmf',97,90,62,64,97,94,91,86,74,83,72,82,98,8,6,50,78,87,87,78,75,88,77,63,2,3,2,6,77,96,751,49828981], ['xavi','fc barcelona','spain',170,68,32,'right foot','cmf',97,86,68,70,90,98,95,90,84,73,79,82,95,5,4,50,78,83,76,74,74,90,78,73,3,3,3,8,80,98,458,42893249], ['ronaldo','real madrid','portugal',187,80,27,'right foot','ss',97,99,30,95,97,83,83,87,92,92,93,85,90,7,5,50,85,87,97,87,90,78,96,89,2,3,1,5,74,72,2122,60822237], ['thiago silva','paris saint-germain','brazil',183,79,28,'right foot','cb',96,62,95,81,77,81,81,83,84,65,75,66,78,5,5,50,93,77,79,86,87,83,84,92,3,2,3,7,83,78,1203,52174484], ['al habsi','lancashire athletic','oman',194,79,30,'right foot','gk',84,30,83,55,54,54,56,58,66,45,45,45,53,4,3,82,95,70,55,67,84,63,79,87,3,2,2,6,79,68,71,9326020] ]); var dashboard = new google.visualization.dashboard(document.queryselector('#dashboard')); var stringfilter = new google.visualization.controlwrapper({ controltype: 'stringfilter', containerid: 'string_filter_div', options: { filtercolumnindex: 0 } }); var stringfilter = new google.visualization.controlwrapper({ controltype: 'stringfilter', containerid: 'position', options: { filtercolumnindex: 7 } }); var numberrangefilter = new google.visualization.controlwrapper({ controltype: 'numberrangefilter', containerid: 'numnber_range_filter_div', options: { filtercolumnindex: 5, minvalue: 0, maxvalue: 100, ui: { label: 'overall rating' } } }); var numberrangefilter = new google.visualization.controlwrapper({ controltype: 'numberrangefilter', containerid: 'height', options: { filtercolumnindex: 3, minvalue: 160, maxvalue: 210, ui: { label: 'height' } } }); var table = new google.visualization.chartwrapper({ charttype: 'table', containerid: 'table_div', options: { showrownumber: true } }); dashboard.bind([stringfilter, numberrangefilter], [table]); dashboard.draw(data); } google.load('visualization', '1', {packages:['controls'], callback: drawtable}); can see wrong code or know why? cheers.
you have given controls of same type same variable name, earlier controls getting overwritten later ones. use different variable names controls fix this:
function drawtable() { var data = new google.visualization.datatable(); data.addcolumn('string', 'name'); data.addcolumn('string', 'team'); data.addcolumn('string', 'nationality'); data.addcolumn('number', 'height'); data.addcolumn('number', 'weight'); data.addcolumn('number', 'age'); data.addcolumn('string', 'foot'); data.addcolumn('string', 'position'); data.addcolumn('number', 'overall rating'); data.addcolumn('number', 'attack'); data.addcolumn('number', 'defense'); data.addcolumn('number', 'header accuracy'); data.addcolumn('number', 'dribble accuracy'); data.addcolumn('number', 'short pass accuracy'); data.addcolumn('number', 'short pass speed'); data.addcolumn('number', 'long pass accuracy'); data.addcolumn('number', 'long pass speed'); data.addcolumn('number', 'shot accuracy'); data.addcolumn('number', 'place kicking'); data.addcolumn('number', 'swerve'); data.addcolumn('number', 'ball control'); data.addcolumn('number', 'weak foot accuracy'); data.addcolumn('number', 'weak foot usage'); data.addcolumn('number', 'goal keeping'); data.addcolumn('number', 'responsiveness'); data.addcolumn('number', 'explosive power'); data.addcolumn('number', 'dribble speed'); data.addcolumn('number', 'top speed'); data.addcolumn('number', 'body balance'); data.addcolumn('number', 'stamina'); data.addcolumn('number', 'kicking power'); data.addcolumn('number', 'jump'); data.addcolumn('number', 'injury'); data.addcolumn('number', 'attack 2'); data.addcolumn('number', 'defence 2'); data.addcolumn('number', 'form'); data.addcolumn('number', 'tenacity'); data.addcolumn('number', 'teamwork'); data.addcolumn('number', 'owners'); data.addcolumn('number', 'price'); data.addrows([ ['messi','fc barcelona','argentina',169,67,25,'left foot','ss',98,99,38,74,98,84,82,81,81,99,85,85,93,6,4,50,84,97,98,82,83,76,80,74,2,3,2,6,76,83,904,55704866], ['iniesta','fc barcelona','spain',170,65,28,'right foot','cmf',97,90,62,64,97,94,91,86,74,83,72,82,98,8,6,50,78,87,87,78,75,88,77,63,2,3,2,6,77,96,751,49828981], ['xavi','fc barcelona','spain',170,68,32,'right foot','cmf',97,86,68,70,90,98,95,90,84,73,79,82,95,5,4,50,78,83,76,74,74,90,78,73,3,3,3,8,80,98,458,42893249], ['ronaldo','real madrid','portugal',187,80,27,'right foot','ss',97,99,30,95,97,83,83,87,92,92,93,85,90,7,5,50,85,87,97,87,90,78,96,89,2,3,1,5,74,72,2122,60822237], ['thiago silva','paris saint-germain','brazil',183,79,28,'right foot','cb',96,62,95,81,77,81,81,83,84,65,75,66,78,5,5,50,93,77,79,86,87,83,84,92,3,2,3,7,83,78,1203,52174484], ['al habsi','lancashire athletic','oman',194,79,30,'right foot','gk',84,30,83,55,54,54,56,58,66,45,45,45,53,4,3,82,95,70,55,67,84,63,79,87,3,2,2,6,79,68,71,9326020] ]); var dashboard = new google.visualization.dashboard(document.queryselector('#dashboard')); var stringfilter1 = new google.visualization.controlwrapper({ controltype: 'stringfilter', containerid: 'string_filter_div', options: { filtercolumnindex: 0 } }); var stringfilter2 = new google.visualization.controlwrapper({ controltype: 'stringfilter', containerid: 'position', options: { filtercolumnindex: 7 } }); var numberrangefilter1 = new google.visualization.controlwrapper({ controltype: 'numberrangefilter', containerid: 'numnber_range_filter_div', options: { filtercolumnindex: 5, minvalue: 0, maxvalue: 100, ui: { label: 'overall rating' } } }); var numberrangefilter2 = new google.visualization.controlwrapper({ controltype: 'numberrangefilter', containerid: 'height', options: { filtercolumnindex: 3, minvalue: 160, maxvalue: 210, ui: { label: 'height' } } }); var table = new google.visualization.chartwrapper({ charttype: 'table', containerid: 'table_div', options: { showrownumber: true } }); dashboard.bind([stringfilter1, stringfilter2, numberrangefilter1, numberrangefilter2], [table]); dashboard.draw(data); } google.load('visualization', '1', {packages:['controls'], callback: drawtable});
Comments
Post a Comment