CODEWITHSUNDEEP
javascriptphphtmlgoogle-api
Nick Quattrociocchi
Nick Quattrociocchi

Reputation: 19

How to change the background color for google chart API, what am i doing wrong

here's is my code, what's wrong with it as far the chart background color goes ...

i know everything else works, but i cannot 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>

Upvotes: 0

Views: 944

Answers (1)

user94559
user94559

Reputation: 60143

Use this:

chart.draw(data, google.charts.Bar.convertOptions(options));

Instead of this:

chart.draw(data, options);

From https://developers.google.com/chart/interactive/docs/gallery/barchart:

The Material Charts are in beta. The appearance and interactivity are largely final, but many of the options available in Classic Charts are not yet available in them. You can find a list of options that are not yet supported in this issue.

Also, the way options are declared is not finalized, so you must convert your options by replacing this line:

chart.draw(data, options);

...with this:

chart.draw(data, google.charts.Bar.convertOptions(options));

Upvotes: 0

Related Questions