javascript - drill down in google chart using java script(dashboard) -
i have code drill downwards functionality chart.em unable set same in google dashboard have category filter can help me code em newbie.
here code google chart need dashboard.
<html> <head> <!--load ajax api--> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> // load visualization api , piechart package. google.load('visualization', '1.0', {'packages':['corechart']}); // set callback run when google visualization api loaded. google.setonloadcallback(drawchart); // callback creates , populates info table, // instantiates pie chart, passes in info , // draws it. function drawchart () { var info = google.visualization.arraytodatatable([ ['category', 'name', 'value'], ['foo', 'fiz', 5], ['foo', 'buz', 2], ['bar', 'qud', 7], ['bar', 'piz', 4], ['cad', 'baz', 6], ['cad', 'nar', 8] ]); var aggregatedata = google.visualization.data.group(data, [0], [{ type: 'number', label: 'value', column: 2, aggregation: google.visualization.data.sum }]); var toplevel = true; var chart = new google.visualization.columnchart(document.queryselector('#chart')); var options = { height: 400, width: 600 }; function draw (category) { if (toplevel) { // rename title options.title = 'top level data'; // draw chart using aggregate info chart.draw(aggregatedata, options); } else { var view = new google.visualization.dataview(data); // utilize columns "name" , "value" view.setcolumns([1, 2]); // filter info based on category view.setrows(data.getfilteredrows([{column: 0, value: category}])); // rename title options.title = 'category: ' + category; // draw chart using view chart.draw(view, options); } } google.visualization.events.addlistener(chart, 'select', function () { if (toplevel) { var selection = chart.getselection(); // drill downwards if selection isn't empty if (selection.length) { var category = aggregatedata.getvalue(selection[0].row, 0); toplevel = false; draw(category); } } else { // go top toplevel = true; draw(); } }); draw(); } //google.load('visualization', '1', {packages: ['corechart'], callback: drawchart}); //google.load('visualization', '1', {packages: ['corechart'], callback: drawchart}); </script> </head> <body> <!--div hold pie chart--> <div id="chart"></div> </body> dashboard code
<html> <head> <!--load ajax api--> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> // load visualization api , piechart package. // google.load('visualization', '1.0', {'packages':['corechart']}); google.load('visualization', '1.0', {'packages':['controls']}); // set callback run when google visualization api loaded. google.setonloadcallback(drawchart); // callback creates , populates info table, // instantiates pie chart, passes in info , // draws it. function drawchart () { var info = google.visualization.arraytodatatable([ ['category', 'name', 'value'], ['foo', 'fiz', 5], ['foo', 'buz', 2], ['bar', 'qud', 7], ['bar', 'piz', 4], ['cad', 'baz', 6], ['cad', 'nar', 8] ]); var aggregatedata = google.visualization.data.group(data, [0], [{ type: 'number', label: 'value', column: 2, aggregation: google.visualization.data.sum }]); var category_picker1 = new google.visualization.controlwrapper({ 'controltype': 'categoryfilter', 'containerid': 'category_picker_div1', 'options': { 'filtercolumnlabel': 'category', 'ui': { 'labelstacking': 'vertical', 'allowtyping': false, 'allowmultiple': true } } }); var toplevel = true; // create column chart, passing options var chart = new google.visualization.chartwrapper({ 'charttype': 'columnchart', 'containerid': 'columnchart_div', 'options': { 'height': 400, 'width': 600 } }); function draw (category) { if (toplevel) { // rename title options.title = 'top level data'; // draw chart using aggregate info chart.draw(aggregatedata); } else { var view = new google.visualization.dataview(data); // utilize columns "name" , "value" view.setcolumns([1, 2]); // filter info based on category view.setrows(data.getfilteredrows([{column: 0, value: category}])); // rename title options.title = 'category: ' + category; // draw chart using view chart.draw(view); } } google.visualization.events.addlistener(chart, 'select', function () { if (toplevel) { var selection = chart.getselection(); // drill downwards if selection isn't empty if (selection.length) { var category = aggregatedata.getvalue(selection[0].row, 0); toplevel = false; draw(category); } } else { // go top toplevel = true; draw(); } }); // create dashboard new google.visualization.dashboard(document.getelementbyid('dashboard')). bind([category_picker1],[chart]). // draw entire dashboard. draw(data); } /* function _log(data) { console.log(data); } */ </script> </head> <body> <div id="dashboard"/> <!--divs hold each command , chart--> <div id="category_picker_div1"></div> <div id="columnchart_div"></div> <!--div hold pie chart--> </div> </body> </html> please kindly suggest.
regards, prajna
javascript google-visualization google-chartwrapper
No comments:
Post a Comment