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
Post a Comment