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>
--
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/c790358a-bdbc-4cdb-86c5-840a9765484d%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
