== Code ==
Alles anzeigen
== Demo ==
demo.easy-coding.de/google-vis…-ajax-visualizations.html
easy-coding.de/Attachment/565/…cc28993276ceb8f17ddc8d99e
Quellcode
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
- <title>
- Paging using AJAX with refresh of Chart (Google Visualization API)
- </title>
- <script type="text/javascript" src="http://www.google.com/jsapi"></script>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
- <script type="text/javascript">
- google.load('visualization', '1', {packages: ['table','barchart']});
- </script>
- <script type="text/javascript">
- /**
- * draw partly
- *
- * @param visualisation ob can be type of google.visualization.BarChart
- * @param DataTable data the original full data
- * @param DataTable datacopy a reference with existing columns and a fixed row length
- * @param integer offset data offset
- * @param integer limit data limit
- */
- function drawPartly(ob, data, datacopy, offset, limit) {
- var columns = data.getNumberOfColumns();
- // reset the datacopy (important, if switching from empty to full page)
- datacopy.removeRows(0,datacopy.getNumberOfRows());
- for(var i=offset; i<offset+limit && i<data.getNumberOfRows(); i++) {
- // insert new row
- var k = datacopy.addRow();
- // fill columns
- for(var j=0; j<columns; j++) {
- datacopy.setCell(k, j, data.getValue(i,j));
- }
- }
- ob.draw(datacopy);
- }
- /**
- * draws the visualization, called via google.setOnLoadCallback
- */
- function drawVisualization() {
- // how many items should be visible per page
- var limit = 4;
- // preload one more page
- var firstload_entries = (limit*2);
- // set the first two pages as preloaded (index is important)
- var cachedpages = [1,1];
- // Create and populate the data table.
- var data = new google.visualization.DataTable();
- data.addColumn('string', 'Item');
- data.addColumn('number', 'Rating');
- data.addColumn('boolean', 'Check');
- // construct the (global) data copy
- var datacopy = data.clone();
- // the copy will never hold more entries than one page can display
- datacopy.insertRows(0, limit);
- // fill the first entries with sample data
- data.addRows(firstload_entries);
- for(var i=0; i<firstload_entries; i++) {
- data.setCell(i, 0, 'Item '+i);
- data.setCell(i, 1, i*i);
- data.setCell(i, 2, true);
- }
- // Create and draw the visualization.
- var visualization = new google.visualization.Table(document.getElementById('table'));
- google.visualization.events.addListener(visualization, 'page', function(e) {
- var next = e['page']+1;
- // update the chart
- drawPartly(chart, data, datacopy, e['page']*limit, limit);
- // preload next page if now existing yet
- if(typeof(cachedpages[next]) != 'undefined') return;
- // load data via json
- $.getJSON("status.php", {page:next, limit:limit}, function(jsondata){
- // specify the index where rows should be inserted
- data.insertRows(next*limit, limit);
- // insert data
- $.each(jsondata, function(i,item) {
- for(var j=0; j<item.length; j++) {
- data.setCell(parseInt(i), j, item[j]);
- }
- });
- // redraw the current page (activates the next button)
- visualization.draw(data, {page:'enable', pageSize: limit, startPage: e['page']});
- // save as cached
- cachedpages.push(1);
- });
- });
- // Crate the visualization bar.
- var chart = new google.visualization.BarChart(document.getElementById('chart'));
- drawPartly(chart, data, datacopy, 0, limit);
- visualization.draw(data, {page:'enable', pageSize: limit});
- }
- google.setOnLoadCallback(drawVisualization);
- </script>
- </head>
- <body style="font-family: Arial;border: 0 none;">
- <h1>Paging using AJAX with reloading of Chart</h1>
- <h2>Google Visualization API</h2>
- <p>Reloads additional data and appends it to the table</p>
- <p>Updates two visualizations when using pagination.</p>
- <a href="http://www.easy-coding.de">http://www.easy-coding.de</a>
- <div id="table"></div>
- <div id="chart" style="width:400px;height:200px"></div>
- </body>
- </html>
== Demo ==
demo.easy-coding.de/google-vis…-ajax-visualizations.html
easy-coding.de/Attachment/565/…cc28993276ceb8f17ddc8d99e
8.613 mal gelesen