HI Everyone, I've continued to research this and still haven't figured out the issue. Can anyone help? Thanks, Noel
On Thursday, March 14, 2019 at 3:00:54 PM UTC-4, Noel G. wrote: > > 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 > > <http://fonts.googleapis.com/css?family=Roboto:300,400,400italic,500,500italic,700,700italic%7CRoboto+Mono:400,700%7CMaterial+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> > > > > -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at https://groups.google.com/group/google-visualization-api. To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/3eadf8e2-6f9b-4e22-9f45-37ffe040bd7e%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
