here's is my code, what's wrong with it as far the chart background color goes ...
i know everything else works, but i caot change the background color whatsoever.and i keep looking at the documentation and i keep coming to the same conclusion... Nothing.
the code itself retrieves all of the specified variables, builds the chart and changes the **HTML background, but fails to receive the chart background color change
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<?php echo "<style> body, div {background-color: #".$_GET['color']."} </style>"?>
<script type="text/javascript">
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawStuff);
var goal = <?php echo $_GET['goal']; ?>;
var complete = <?php echo $_GET['complete']; ?>;
var dmr = <?php echo $_GET['dmr']; ?>;
var wysb = <?php echo $_GET['wysb']; ?>;
function drawStuff() {
var data = new google.visualization.arrayToDataTable([
['Type', 'Quantity:'],
["Goal", goal],
["Complete", complete],
["DMR", dmr],
["W.Y.S.B.", wysb],
]);
var options = {
title: 'Productivity Monitor',
width: 900,
legend: { position: 'none' },
chart: { title: 'Productivity Monitor',
subtitle: 'Comparative Chart with color indicator background' },
bars: 'horizontal', // Required for Material Bar Charts.
backgroundColor :{fill : '<?php echo "#".$_GET["color"]; ?>' },
axes: {
x: {
0: { side: 'top', label: 'Percentage'} // Top x-axis.
}
},
bar: { groupWidth: "90%" }
};
var chart = new google.charts.Bar(document.getElementById('top_x_div'));
chart.draw(data, options);
};
</script>
</head>
<body>
<div id="top_x_div" style="width: 900px; height: 500px;"></div>
</body>
</html>