title: Google Chart Background
body: <p>I have this 2 googlecharts in my program: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);
  
  
    var matrix = [];
    for(var i=0; i&lt;50; i++) {
    matrix[i] = new Array(2);
    }
    var j=0;
  $.getJSON("x.json",function(data){
    $.each(data, function(key, val){
     matrix[j][0]=(val.y);
     matrix[j][1]=(val.z);
     j++;
    }); 
   });
  
  // Draw the chart and set the chart values
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
    ['a', 'b'],
    [matrix[0][0], matrix[0][1]],
    [matrix[1][0], matrix[1][1]],
    [matrix[2][0], matrix[2][1]],
    [matrix[3][0], matrix[3][1]],
    [matrix[4][0], matrix[4][1]]
  ]);
  // Set chart options
        var options = {'title':'h',
                       'width':900,
                       'height':400,
        is3D: true,
        
        };
  
    // Display the chart inside the &lt;div&gt; element with id="piechart"
    var chart = new google.visualization.PieChart(document.getElementById('piechart'));
    chart.draw(data, options);
  }
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;
      google.charts.load("current", {packages:['corechart']});
      google.charts.setOnLoadCallback(drawChart);
    var matrix = [];
    for(var i=0; i&lt;50; i++) {
    matrix[i] = new Array(2);
    }
    var j=0;
    
    
  $.getJSON("x.json",function(data){
    $.each(data, function(key, val){
     matrix[j][0]=(val.y);
     matrix[j][1]=(val.z);
     j++;
    }); 
   });
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ["Element", "Density", { role: "style" } ],
          [matrix[0][0], matrix[0][1], "red"],
          [matrix[1][0], matrix[1][1], "yellow"],
          [matrix[2][0], matrix[2][1], "green"],
          [matrix[3][0], matrix[3][1], "grey"]
    
        ]);
  
        var view = new google.visualization.DataView(data);
        view.setColumns([0, 1,
                         { calc: "stringify",
                           sourceColumn: 1,
                           type: "string",
                           role: "annotation" },
                         2]);
  
        var options = {
          title: "k",
          width: 800,
          height: 300,
          bar: {groupWidth: "95%"},
          legend: { position: "none" }
    
    
  
    
        };
        var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
        chart.draw(view, options);
     &lt;!--options--&gt;
    }
    &lt;/script&gt;
  &lt;div id="columnchart_values" style="width: 900px; height: 800px; display: inline-block;"&gt;&lt;/div&gt;
  
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want to change the background color of both.
  I've tryed some of the solutions for background color change, like adding the background color to the options, adding a chart area and using the chart.draw(data, google.charts.Bar.convertOptions(options)) method. 
  But the chart simple disapears.
  Any solution for this?</p>