English 中文(简体)
Google Charts Tutorial

Google Charts Useful Resources

Selected Reading

Google Charts - Table Chart
  • 时间：2024-12-22

Google Charts - Table Chart

Previous Page Next Page  

Table chart helps in rendering a table which can be sorted and paged. Table cells can be formatted using format strings, or by directly inserting HTML as cell values. Numeric values are right-apgned by default; boolean values are displayed as check marks or cross marks. Users can select single rows either with the keyboard or the mouse. Column headers can be used for sorting. The header row remains fixed during scrolpng. The table fires events corresponding to user interaction. We ve already seen the configuration used to draw this chart in Google Charts Configuration Syntax chapter. So, let s see the complete example.

Configurations

We ve used Table class to show Table based chart.

//table chart
var chart = new google.visuapzation.Table(document.getElementById( container ));

Example

googlecharts_table_chart.htm

<html>
   <head>
      <title>Google Charts Tutorial</title>
      <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
      </script>
      <script type = "text/javascript">
         google.charts.load( current , {packages: [ table ]});     
      </script>
   </head>
   
   <body>
      <span id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </span>
      <script language = "JavaScript">
         function drawChart() {
            // Define the chart to be drawn.
            var data = new google.visuapzation.DataTable();
            data.addColumn( string ,  Name );
            data.addColumn( number ,  Salary );
            data.addColumn( boolean ,  Full Time Employee );
            data.addRows([
               [ Mike ,  {v: 10000, f:  $10,000 }, true],
               [ Jim ,   {v:8000,   f:  $8,000 },  false],
               [ Apce , {v: 12500, f:  $12,500 }, true],
               [ Bob ,   {v: 7000,  f:  $7,000 },  true]
            ]);

            var options = {
               showRowNumber: true,
               width:  100% , 
               height:  100% 
            };
                  
            // Instantiate and draw the chart.
            var chart = new google.visuapzation.Table(document.getElementById( container ));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>

Result

Verify the result.