debugging - Google Charts-Code for Category Filter -


was trying out google chart function codes. i'm trying create line chart category filter. here's code:

function drawvisualization() { // prepare data. var data = google.visualization.arraytodatatable([ ['x', 'cats', 'blanket 1', 'blanket 2'], ['a',   1,       1,           0.5], ['b',   2,       0.5,         1], ['c',   4,       1,           0.5], ['d',   8,       0.5,         1], ['e',   7,       1,           0.5], ['f',   7,       0.5,         1], ['g',   8,       1,           0.5], ['h',   4,       0.5,         1], ['i',   2,       1,           0.5], ['j',   3.5,     0.5,         1], ['k',   3,       1,           0.5], ['l',   3.5,     0.5,         1], ['m',   1,       1,           0.5], ['n',   1,       0.5,         1] ]);  // define category picker 'category' column. var categorypicker = new google.visualization.controlwrapper({ 'controltype': 'categoryfilter', 'containerid': 'control1', 'options': {   'filtercolumnlabel': 'item',   'ui': {     'allowtyping': false,     'allowmultiple': true,     'selectedvalueslayout': 'belowstacked'   } }, // define initial state, i.e. set of metrics selected. 'state': {'selectedvalues': ['cats', 'blanket 1', 'blanket 2']} });  // define line chart. var linechart = new google.visualization.chartwrapper({ 'charttype': "line", 'containerid': 'chart1', 'options': {   'width': 500,   'height': 400,   'vaxis': {maxvalue: 10} } });  // create dashboard. var dashboard = new           google.visualization.dashboard(document.getelementbyid('dashboard')). // configure category picker affect line chart bind(categorypicker, linechart). // draw dashboard draw(data); } 

can tell me why graph not displaying inside google playground. know must simple mistake, i'm drawing blank.

thanks help! ​

the categoryfilter filters values in datatable column, , looks in example want filter column name (indicated values entered state.selectedvalues property). in order make categoryfilter behave column selector, need give list of columns work on, can create automatically this:

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)]);     initstate.selectedvalues.push(data.getcolumnlabel(i)); } 

you pass datatable , state categoryfilter constructor:

var columnfilter = new google.visualization.controlwrapper({     controltype: 'categoryfilter',     containerid: 'colfilter_div',     datatable: columnstable,     options: {         filtercolumnlabel: 'collabel',         ui: {             label: 'columns',             allowtyping: false,             allowmultiple: true,             selectedvalueslayout: 'belowstacked'         }     },     state: initstate }); 

you need register "statechange" event handler filter list of selected columns , use build list of column indices chart's view.columns parameter:

google.visualization.events.addlistener(columnfilter, 'statechange', function () {     var state = columnfilter.getstate();     var row;     var columnindices = [0];     (var = 0; < state.selectedvalues.length; i++) {         row = columnstable.getfilteredrows([{column: 1, value: state.selectedvalues[i]}])[0];         columnindices.push(columnstable.getvalue(row, 0));     }     // sort indices original order     columnindices.sort(function (a, b) {         return (a - b);     });     chart.setview({columns: columnindices});     chart.draw(); }); 

see whole thing working here: http://jsfiddle.net/asgallant/wauu2/.


Comments

Popular posts from this blog

basic authentication with http post params android -

vb.net - Virtual Keyboard commands -

c++ - End of file on pipe magic during open -