Google Visualization Table custom formatting not working

73 views
Skip to first unread message
Noel G.

unread,
Mar 14, 2019, 3:00:54 PM3/14/19
to Google Visualization API
Hello Everyone,

I've tried to re-format the Google Chart Table to no avail. Could someone please take a look at my code and advise what I'm missing?

Thank you,

Noel
<!DOCTYPE html>
<html>
  <head>

    <link href="//fonts.googleapis.com/css?family=Roboto:300,400,400italic,500,500italic,700,700italic|Roboto+Mono:400,700|Material+Icons"
          rel="stylesheet">
    <link rel="stylesheet"
          href="https://google-developers.appspot.com/_static/7bb14d2951/css/devsite-cyan.css">
    
    <script src="https://google-developers.appspot.com/_static/7bb14d2951/js/prettify-bundle.js"></script>
  

    <meta name="robots" content="noindex">
    <script src="https://google-developers.appspot.com/_static/7bb14d2951/js/jquery-bundle.js"></script>
    <script src="//www.google.com/jsapi?key=AIzaSyCZfHRnq7tigC-COeQRmoa9Cxr0vbrK6xw"></script>
    
    <script src="https://google-developers.appspot.com/_static/7bb14d2951/js/framebox.js"></script>
  </head>
  <body class="devsite-layout-docs devsite-framebox
               ">
    

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<div id="dashboard_div" style="border: 0px solid #ccc; margin-top: 0px">
  <p style="padding-left: 0px"><strong></strong></p>
  <table class="columns">
    <tr>
      <td>
        <div id="slider_div" style="padding-left: 0px"></div>
      </td><td>
        <div id="categoryPicker_div"></div>
      </td>
    </tr><tr>
      <td>
        <div id="chart_div" style="padding-top: 0px, padding-bottom: 0px"></div>
      </td><td>
        <div id="table_div" style="padding-top: 0px, padding-bottom: 0px"></div>
      </td>
    </tr>
  </table>
</div>


<style type='text/css'>
    .bold-green-font {
      font-weight: bold;
      color: green;
    }

    .bold-font {
      font-weight: bold;
    }

    .right-text {
      text-align: right;
    }

    .large-font {
      font-size: 15px;
    }

    .italic-darkblue-font {
      font-style: italic;
      color: darkblue;
    }

    .italic-purple-font {
      font-style: italic;
      color: purple;
    }

    .underline-blue-font {
      text-decoration: underline;
      color: blue;
    }

    .gold-border {
      border: 3px solid gold;
    }

    .deeppink-border {
      border: 3px solid deeppink;
    }

    .orange-background {
      background-color: orange;
    }

    .orchid-background {
      background-color: orchid;
    }

    .beige-background {
      background-color: beige;
    }

  </style>   <style>
.orange-background {
   background-color: orange;
  }

 .orchid-background {
  background-color: orchid;
 }

.beige-background {
 background-color: beige;
  }
</style>  

<script type='text/javascript' src="//www.gstatic.com/charts/loader.js"></script>

  <script type='text/javascript'>
  
  google.charts.load('current', {'packages':['corechart', 'table', 'gauge', 'controls']});
  google.charts.setOnLoadCallback(drawMainDashboard);
  

  function drawMainDashboard() {
    var dashboard = new google.visualization.Dashboard(
        document.getElementById('dashboard_div'));
    var slider = new google.visualization.ControlWrapper({
      'controlType': 'NumberRangeFilter',
      'containerId': 'slider_div',
      'options': {
        'filterColumnIndex': 2,
        'ui': {
          'labelStacking': 'vertical',
          'label': '2018 Initiations Filter:'
        }
      }
    });
    
    
    var categoryPicker = new google.visualization.ControlWrapper({
      'controlType': 'CategoryFilter',
      'containerId': 'categoryPicker_div',
      'options': {
        'filterColumnIndex': 0,
        'ui': {
          'labelStacking': 'vertical',
          'label': 'Select Policy:',
          'allowTyping': false,
          'allowMultiple': false
        }
      }
    });
    

    var pie = new google.visualization.ChartWrapper({
      'chartType': 'PieChart',
      'containerId': 'chart_div',
      'options': {
        'width': 300,
        'height': 300,
        'legend': 'none',
        'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0},
        'pieSliceText': 'label'
      },
      'view': {'columns': [0, 2]}
    });
    

       
     var cssClassNames = {
    'headerRow': 'italic-darkblue-font large-font bold-font',
    'tableRow': '',
    'oddTableRow': 'beige-background',
    'selectedTableRow': 'orange-background large-font',
    'hoverTableRow': '',
    'headerCell': 'gold-border',
    'tableCell': '',
    'rowNumberCell': 'underline-blue-font'};
 

    
    var table = new google.visualization.ChartWrapper({
      'chartType': 'Table',
      'containerId': 'table_div',
      'options':{'showRowNumber': false, 'allowHtml': true, 'cssClassNames': cssClassNames}
    });
    
    var data = google.visualization.arrayToDataTable([
      ['Policy', '2017', '2018'],
      ['Project 1 - Temporary Assignment',24,4,],
      ['Project 2 - Temporary Assignment',20,19],
      ['Project 3 - Temporary Assignment',101,131],
      ['Project 4 - Temporary Assignment',127,169],
      ['Project 5 - Temporary Assignment',80,29],
      ['Project 6 - Temporary Assignment',0,1],
      ['Project 7 - Temporary Assignment',1,5],
      ['Project 8 - Temporary Assignment',40,62],
      ['Project 9 - Temporary Assignment',0,6]


    ]);
    
    dashboard.bind([slider, categoryPicker], [pie, table]);
    dashboard.draw(data);
  }
</script>
</body>
</html>
Noel G.

unread,
Mar 19, 2019, 10:46:48 AM3/19/19
to Google Visualization API
HI Everyone, I've continued to research this and still haven't figured out the issue. Can anyone help?
Thanks,