Set the selected row css properties for a Google Visualization Table Chart - Javascript Google Chart

Javascript examples for Google Chart:Chart Configuration

  1. HOME
  2. Javascript
  3. Google Chart
  4. Chart Configuration

Description

Set the selected row css properties for a Google Visualization Table Chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Table Chart Example</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <style id="compiled-css" type="text/css">

.selectedTableRow {//from   w  ww  .j a  v a2s. c om
   font-style: italic;
   color: purple;
   font-size:15px;
   text-decoration: underline;
   border: 3px solid gold;
   background-color: beige !important;
}


      </style> 
   </head> 
   <body> 
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
      <div id="table_div"></div>
       bac 
      <script type="text/javascript">
      google.charts.load('current', {'packages':['table']});
      google.charts.setOnLoadCallback(drawTable);
      function drawTable() {
        var data = new google.visualization.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],
          ['Alice', {v: 12500, f: '$12,500'}, true],
          ['Bob',   {v: 7000,  f: '$7,000'},  true]
        ]);
        var cssClassNames = {
           'selectedTableRow': 'selectedTableRow'};
            var options = {'showRowNumber': true, 'allowHtml': true, 'cssClassNames': cssClassNames};
        var table = new google.visualization.Table(document.getElementById('table_div'));
        table.draw(data, options);
      }

      </script>  
   </body>
</html>

Related Tutorials