API tools faq
paste
Sherbrow

Google API, Table Visualization, No styles

Sherbrow
Jan 14th, 2013
820
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 2.97 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  Google API, Table Visualization, No styles
  3.  
  4.  1. Go to https://code.google.com/apis/ajax/playground/?type=visualization
  5.  2. Click on "Edit HTML" in the top right corner of the "Edit Code" box
  6.  3. Paste this
  7.  4. Run Code via the button on the top right corner of the "Output" box (bottom box)
  8.  
  9. You are free to copy and use this sample in accordance with the terms of the
  10. Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
  11. -->
  12.  
  13. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  14. <html xmlns="http://www.w3.org/1999/xhtml">
  15.   <head>
  16.     <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  17.     <title>
  18.       Google Visualization API Sample
  19.     </title>
  20.     <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  21.     <script charset="utf-8" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  22.     <script type="text/javascript">
  23.       google.load('visualization', '1', {packages: ['table']});
  24.     </script>
  25.     <script type="text/javascript">
  26.       function tableClassHack() {
  27.          var className = 'google-visualization-table-table';
  28.          $('.'+className).removeClass(className);
  29.       }
  30.     function drawVisualization() {
  31.       // Create and populate the data table.
  32.       var data = google.visualization.arrayToDataTable([
  33.         ['Name', 'Height', 'Smokes'],
  34.         ['Tong Ning mu', 174, true],
  35.         ['Huang Ang fa', 523, false],
  36.         ['Teng nu', 86, true],
  37.         ['Tong Ning mu', 174, true],
  38.         ['Huang Ang fa', 523, false],
  39.         ['Teng nu', 86, true],
  40.         ['Tong Ning mu', 174, true],
  41.         ['Huang Ang fa', 523, false],
  42.         ['Teng nu', 86, true]
  43.       ]);
  44.    
  45.    
  46.       // Create and draw the visualization.
  47.       visualization = new google.visualization.Table(document.getElementById('table'));
  48.       visualization.draw(data, {
  49.         page: 'enable',
  50.         pageSize: 2
  51.       });
  52.    
  53.       // Create and draw the visualization.
  54.       visualization = new google.visualization.Table(document.getElementById('tablenostyle'));
  55.       visualization.draw(data, {
  56.         page: 'enable',
  57.         pageSize: 2,
  58.         cssClassNames: {
  59.           headerRow: 'someclass',
  60.           tableRow: 'someclass',
  61.           oddTableRow: 'someclass',
  62.           selectedTableRow: 'someclass',
  63.           hoverTableRow: 'someclass',
  64.           headerCell: 'someclass',
  65.           tableCell: 'someclass',
  66.           rowNumberCell: 'someclass'
  67.         }
  68.       });
  69.    
  70.       google.visualization.events.addListener(visualization , 'page',
  71.        function(event) {
  72.          tableClassHack();
  73.        });
  74.      
  75.          tableClassHack();
  76.     }
  77.  
  78.     google.setOnLoadCallback(drawVisualization);
  79.     </script>
  80.   </head>
  81.   <body style="font-family: Arial;border: 0 none;">
  82.     <div id="table"></div>
  83.     <hr style="margin: 2em 0;"/>
  84.     <div id="tablenostyle"></div>
  85.   </body>
  86. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!