<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>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.