change background color in chart area for a bubble chart

Dustin Böttger

unread,

Oct 23, 2014, 4:33:00 AM10/23/14

to google-visua...@googlegroups.com

Hello together,

i am new to the Google Charts Api and i want to use them in my Filemaker database via webviewer. The bubble chart works fine for me, i have just one problem. I want to change the background color in the chart area because the white color does not look so good in my database.

Hope someone can help me!!!

This is my code:

"data:text/html," & "
<html>
<head>
    <script type=\"text/javascript\" src=\"https://www.google.com/jsapi\"></script>
    <script type=\"text/javascript\">
    google.load(\"visualization\", \"1\", {packages:[\"corechart\"]});
    google.setOnLoadCallback(drawSeriesChart);

    function drawSeriesChart() {

      var data = google.visualization.arrayToDataTable([
        ['ID', 'Attributrating','Fertility Rate', 'Region',     'Population'],
        ['" & Spieler::Name & "', " & Spieler::Attributrating Punkt & ",   3,   'Spieler', 0],
        ['" & Clubs::Clubname & "', " & Spieler::Durchschnitt Attributrating Club Punkt & ", 2,    'Club',         0],
        ['" & Clubs::Liga & "'," & Spieler::Durchschnitt Attributrating Liga Punkt & ",   1,   'Liga', 0]
      ]);

      var options = {
        title: 'Wertevergleich Attributrating Spieler/Club/Liga',
        hAxis: {title: 'Attributrating'},
        vAxis: {title: ''},
        bubble: {textStyle: {fontSize: 8},
   }
      };

      var chart = new google.visualization.BubbleChart(document.getElementById('series_chart_div'));
      chart.draw(data, options);
   }

    function drawGradientColorChart() {
      var data = google.visualization.arrayToDataTable([
        ['ID', 'X', 'Y', 'Temperature'],
        ['',   80, 167,      120],
        ['',   79, 136,      130],
        ['',   78, 184,      50],
        ['',   72, 278,      230],
        ['',   81, 200,      210],
        ['',   72, 170,      100],
        ['',   68, 477,      80]
      ]);

      var options = {
        colorAxis: {colors: ['yellow', 'red'],
       }
      };

      var chart = new google.visualization.BubbleChart(document.getElementById('gradient_chart_div'));
      chart.draw(data, options);
    }
</script>
</head>
<body bgcolor=#5E5C5C>
    <div id=\"series_chart_div\" style=\"width: 400px; height: 270px;\"></div>
</body>
</html>"

Andrew Gallant

unread,

Oct 23, 2014, 8:39:05 AM10/23/14

to google-visua...@googlegroups.com

Set the backgroundColor option:

var options = {
    colorAxis: {colors: ['yellow', 'red'],


    backgroundColor: '#453391'
};

Message has been deleted

Dustin Böttger

unread,

Oct 23, 2014, 8:58:49 AM10/23/14

to google-visua...@googlegroups.com

Am Donnerstag, 23. Oktober 2014 14:39:05 UTC+2 schrieb Andrew Gallant:

Set the backgroundColor option:

var options = { colorAxis: {colors: ['yellow', 'red'], backgroundColor: '#453391' };

Unfortunately, it does not work for me.

chart still looks like this

Andrew Gallant

unread,

Oct 23, 2014, 7:40:00 PM10/23/14

to google-visua...@googlegroups.com

The "colorAxis" option is missing the closing "}", but with such a syntax error, the chart should fail to draw, so I assume you have it correct in your code. Make sure that backgroundColor is its own option, and not a sub-option of colorAxis, eg:

correct:

var options = {
    colorAxis: {
        colors: ['yellow', 'red']
    },
    backgroundColor: '#453391'
};

incorrect:

var options = {
    colorAxis: {
        colors: ['yellow', 'red'],
        backgroundColor: '#453391'
    }
};

Dustin Böttger

unread,

Oct 24, 2014, 4:56:28 AM10/24/14

to google-visua...@googlegroups.com

Thanks for your help. I copied your code but it is still not working. The chart stays white.
This is the whole code with your backgroundcolor option. Maybe you can have a quick look and tell what is wrong with it.

   var options = {
    colorAxis: {
        colors: ['yellow', 'red']
    },
    backgroundColor: '#453391'
};

      var chart = new google.visualization.BubbleChart(document.getElementById('gradient_chart_div'));
      chart.draw(data, options);
    }
</script>
</head>
<body bgcolor=#5E5C5C>
    <div id=\"series_chart_div\" style=\"width: 400px; height: 270px;\"></div>
</body>
</html>"

Andrew Gallant

unread,

Oct 24, 2014, 8:18:21 PM10/24/14

to google-visua...@googlegroups.com

It works fine for me: http://jsfiddle.net/asgallant/p8aaaw26/

Dustin Böttger

unread,

Oct 25, 2014, 3:54:57 AM10/25/14

to google-visua...@googlegroups.com

Finally i have made it!!! Thanks for your help!!!

Reply all

Reply to author

Forward