I use a CSV file to populate a bar chart. The file has a header row and about 80 rows of data - far too many for the bar chart to display nicely at once. So I added pagination from this jsFiddle <http://jsfiddle.net/6FQSJ/1/>- and it works great!
However, I also need to use a string filter ControlWrapper in order to find data quickly. Incidentally, the 80-row CSV will likely increase to about 750, so both pagination and filtering are necessary. The filter and chart have a bind between them and both are linked via a dashboard object. My problem is, that when the string filter is used, it causes errors with pagination and the chart fails to redraw. I assume that the DataTable object is decreasing in size during the filter process, but the pagination function doesn't get "refreshed" until I physically click the NEXT button then the PREV button on the page, nor does the chart show the appropriate data until pagination is clicked again and again. Here's my code thus far (sample data attached): <html> <head> <title>Embedded Charts - Ex5 (CSV array, Dashboard and String Filter)</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <!-- Required: Load jQuery library --> <script src="http://code.jquery.com/jquery-1.10.1.min.js";></script> <!-- Required: Google Visualization library --> <script type="text/javascript" src="js/gviz-api.js"></script> <!-- Optional: Google Geochart and Map Chart libraries --> <script type="text/javascript" src="https://www.google.com/jsapi";></script> <!-- Load the AJAX API--> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js";></script> <!-- Load CSV parser --> <script type="text/javascript" src="js/jquery.csv.js"></script> <script type="text/javascript"> // Load the Visualization API and the controls package. google.charts.load('44', {'packages':['corechart','controls']}); // Set a callback to run when the Google Visualization API is loaded. google.charts.setOnLoadCallback(drawChart); // Callback that creates and populates a data table, // instantiates a dashboard, a range slider and a pie chart, // passes in the data and draws it. function drawChart() { // grab the CSV $.get("http://localhost/dev/data/sample-data-csv.csv";, function(csvString){ // transform the csv into a 2-dimmensional arrayToDataTable var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar}); // Built a new DataTable from the object arrayData var data = new google.visualization.DataTable(); data.addColumn('string','Alias'); data.addColumn('number','Amount'); for (var i = 1; i < arrayData.length; i++) { var v1 = arrayData[i][0]; var v2 = arrayData[i][2]; data.addRow([v1,v2]); } // Dashboard objects test var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div')); var rangeFilter = new google.visualization.ControlWrapper({ 'controlType':'StringFilter', 'containerId':'control_div', // set control options 'options':{ 'filterColumnLabel':'Alias', 'matchType':'prefix', 'caseSensitive':false, 'useFormattedValue':false, 'ui':{ label:'Filter by Alias', labelSeparator:':', cssClass:'gviz-ui', labelStacking:'horizontal' }, } }); var barChart = new google.visualization.ChartWrapper({ 'chartType':'BarChart', 'containerId':'chart_div', 'dataTable':data, // set chart options 'options':{ // pagination - does not work(?) showRowNumber:true, page:'enable', pageSize:20, pagingSymbols:{prev:'Prev', next:'Next'}, //pagingButtonsConfiguration:'auto', // chart options width:640, height:640, legend:'none', //view:{'columns':[0,2]}, hAxis: { title:data.getColumnLabel(1), minValue:data.getColumnRange(1).min, maxValue:data.getColumnRange(1).max }, vAxis: { title:data.getColumnLabel(0), minValue:data.getColumnRange(0).min, maxValue:data.getColumnRange(0).max }, colors:['333333'], title:'Amount by Alias', titleTestStyle:{color:'#ddd', bold:true, fontSize:18}, }, }); // Pagination function binding - src: http://jsfiddle.net/6FQSJ/1/ EnablePagination(barChart, 10, document.getElementById('prevButton'), document.getElementById('nextButton')); // Bind wrappers and draw chart dashboard.bind(rangeFilter, barChart); dashboard.draw(data); }); } function EnablePagination(chart, ps, prevButton, nextButton) { var currentPage = -1; var pageSize = ps; // pad the datatable to have an exact number of pages, otherwise the bars' size in the // last page will be artificially increased var dt = chart.getDataTable(); if (dt.getNumberOfRows() % pageSize != 0) { for (var i = pageSize - (dt.getNumberOfRows() % pageSize); i > 0; i--) { dt.addRow(['', 0]); } } var paginate = function(dir) { var numRows = chart.getDataTable().getNumberOfRows(); currentPage += dir; var rows = []; for (var i = pageSize*currentPage; i < pageSize*(currentPage+1) && i < numRows; i++) { rows.push(i); } chart.setView({rows: rows}); chart.draw(); currentPage == 0 ? prevButton.setAttribute('disabled', 'disabled') : prevButton.removeAttribute('disabled'); currentPage == numRows/pageSize-1 ? nextButton.setAttribute('disabled', 'disabled') : nextButton.removeAttribute('disabled'); } prevButton.onclick = function() { paginate(-1) }; nextButton.onclick = function() { paginate(1) }; paginate(1); } </script> <style> .gviz-ui {font-size:10pt; vertical-align:middle;} .gviz-ui .goog-inline-block input[id*="input"] {text-transform:uppercase !important;} </style> </head> <body> <div id="dashboard_div"> <div id="control_div"></div> <div id="chart_div"></div> <button id="prevButton">Prev</button> <button id="nextButton">Next</button> </div> </body> <script> /*$(document).ready(function() {*/ // Set input max length jQuery('#7-input').attr('maxLength', 4).keypress(drawChart); // Add function call on input keypress /*$('#7-input').keypress(function(){ drawChart(); });*/ /*}); */ </script> </html> This screen cap is the error i see using Chrome: <https://lh3.googleusercontent.com/-P_RzivMfpdQ/V73OGIEHpiI/AAAAAAAARhk/nGrvpw6Jm0QXQsaqyNGl49JS1BzXZnfiwCLcB/s1600/chart-filter-error.PNG> The chart should automatically redraw and show 3 valid rows, but doesn't until I click (unseen) "Next" button, then the "Prev" button and the chart looks right. <https://lh3.googleusercontent.com/-S1ypaSZq3DI/V73OsJRB1kI/AAAAAAAARho/Iyuqa_JaefQZKdUmSmip2v1zIOAf2MAtACLcB/s1600/chart-filter-error2.PNG> What am I missing? I don't thin I can BIND the StringFilter control to the pagination function. I though about having a "keypress" event call the drawChart() function but it doesn't respond to my jQuery calls. Thanks for any help you can provide. -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at https://groups.google.com/group/google-visualization-api. To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/3330276b-d7ee-4a57-8cd9-a565115fe48a%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
Alias,Company,Amount AALI,3,8141 AARB,3,7629 AARN,3,14688 ABER,3,12055 ABHA,3,11745 ACAR,3,10408 ADAH,3,14105 AFEL,3,5799 AGOM,3,10992 AHAH,3,14121 AJOH,3,13710 ALAM,3,8482 ALAN,3,7728 AMAR,3,919 AMOC,3,2574 ANDX,3,4451 ANGO,3,6685 APOM,3,5288 ARAL,3,11486 ARIA,3,2001 ARSC,3,11995 AYRS,3,10593 BASH,3,2491 BCOL,3,7510 BCOM,3,5045 BEEC,3,4639 BGRO,3,7610 BHAM,3,7945 BIEG,3,12293 BIRC,3,5044 BIZZ,3,680 BKIN,3,6030 BKOT,3,11002 BMCC,3,7941 BMOO,3,4263 BODK,3,4934 BOSW,3,9561 BOUM,3,14523 BOZE,3,8743 BRAE,3,9738 BREW,3,7811 BSEW,3,4276 BWAL,3,14339 BWIL,3,12776 CARJ,3,7843 CASE,3,7873 CAVA,3,5646 CBLA,3,335 CBRI,3,11534 CCOX,3,12162 CEDE,3,7175 CESO,3,3888 CHEA,3,10374 CHEB,3,11387 CHRH,3,12573 CHRJ,3,11871 CHRL,3,550 CHRM,3,14369 CHSA,3,2332 CHWO,3,495 CJON,3,12028 CLAW,3,8367 CLBA,3,10308 CLIA,3,5792 CMAL,3,14378 CONV,3,14992 CORR,3,11358 COTT,3,1869 CROS,3,1558 CSIN,3,9301 CWIL,3,1192 CWIN,3,9677 DADA,3,9553 DAKE,3,6279 DAMA,3,4076
