How Can I Standardize the Size of Bubble a Chart?

[Laura Johnson]

Hi All,

I am building a bubble chart and have it working properly except for the size.  I want the height of the Y axis to remain the same as the length of the X axis regardless of the number of bubbles.

What I'm seeing is that fewer bubbles results in a smaller table, as shown in the attached screenshot. (Ignore the gradient thing, please...my overlay issues are another thread!)

I've tried to set height and min-height on the chart CSS class to no avail.

Any thoughts?

Laura

[Sergey Grabkovsky]

Hi Laura,

The size of the table shouldn't affect your chart area. My guess (as that's all I can do without any actual code to look at) is that you're setting the chartArea.height option and are doing so in an odd way. I'm afraid I don't have any more advice for you without any code to look at.

--
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 google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

[Laura Johnson]

Sergey,

I'm assuming you'd need me to provide the CSS and HTML, correct? Or the whole page?

Laura

On Wednesday, February 25, 2015 at 2:23:17 PM UTC-5, Sergey wrote:

Hi Laura,

The size of the table shouldn't affect your chart area. My guess (as that's all I can do without any actual code to look at) is that you're setting the chartArea.height option and are doing so in an odd way. I'm afraid I don't have any more advice for you without any code to look at.

On Wed, Feb 25, 2015 at 2:11 PM Laura Johnson <brewb...@gmail.com> wrote:

Hi All,

I am building a bubble chart and have it working properly except for the size.  I want the height of the Y axis to remain the same as the length of the X axis regardless of the number of bubbles.

What I'm seeing is that fewer bubbles results in a smaller table, as shown in the attached screenshot. (Ignore the gradient thing, please...my overlay issues are another thread!)

I've tried to set height and min-height on the chart CSS class to no avail.

Any thoughts?

Laura

--
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 google-visualization-api+unsub...@googlegroups.com.

[Sergey Grabkovsky]

The most important bit is your JavaScript, but a fully working example (where a chart is drawn and demonstrates your issue) is far preferable.

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.

[Laura Johnson]

Sergey,

I'm sorry - but the data is behind a firewall so I can't provide a working copy.

I have attached a .txt file with the html, .js, and .css. Maybe this will help?

L.

On Wednesday, February 25, 2015 at 2:49:09 PM UTC-5, Sergey wrote:

The most important bit is your JavaScript, but a fully working example (where a chart is drawn and demonstrates your issue) is far preferable.

On Wed, Feb 25, 2015 at 2:33 PM Laura Johnson <brewb...@gmail.com> wrote:

Sergey,

I'm assuming you'd need me to provide the CSS and HTML, correct? Or the whole page?

Laura

On Wednesday, February 25, 2015 at 2:23:17 PM UTC-5, Sergey wrote:

Hi Laura,

The size of the table shouldn't affect your chart area. My guess (as that's all I can do without any actual code to look at) is that you're setting the chartArea.height option and are doing so in an odd way. I'm afraid I don't have any more advice for you without any code to look at.

On Wed, Feb 25, 2015 at 2:11 PM Laura Johnson <brewb...@gmail.com> wrote:

Hi All,

I am building a bubble chart and have it working properly except for the size.  I want the height of the Y axis to remain the same as the length of the X axis regardless of the number of bubbles.

What I'm seeing is that fewer bubbles results in a smaller table, as shown in the attached screenshot. (Ignore the gradient thing, please...my overlay issues are another thread!)

I've tried to set height and min-height on the chart CSS class to no avail.

Any thoughts?

Laura

--
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 google-visualization-api+unsubscr...@googlegroups.com.

[Sergey Grabkovsky]

It looks like you have some interesting CSS there that does weird things with the positioning of the chart, and it also looks like there's no height specified for the chart. If your intention is that the chart will be a consistent width/height, and simply want your chart area to be square, you can just set the chartArea.width/height options to be the values that you want, because the chart will never give you a square chart area by default.

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.

[Laura Johnson]

Sergey,

I took your comments about the CSS to heart and removed all sizing from the critical divs. and sized down the text overlays for now.

Here's my code now:

  <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({!MatrixData});

      var options = {
       
        chartArea:  {
            width: '900px',
            height: '900px',
            },
         
           title: 'Visualization',
        hAxis: {
            title: 'System Score',
            baseline: 0,
            maxValue: 4,
            ticks: [2,4]
        },
        vAxis: {
            title: 'Financial Score',
            baseline: 0,
            maxValue: 4,
            ticks: [2,4]
        },
       
        bubble: {
            textStyle: {fontSize: 11},
            opacity: .6
                },
         
           series: {'High': {color: 'red'},
                'Medium': {color: 'yellow'},
                 'Low': {color: 'green'}                          
                },
         
        sizeAxis: {
              minValue: 3.5,
              maxValue: 25,
                  },

        backgroundColor: 'transparent',
                
     };

      var chart = new google.visualization.BubbleChart(document.getElementById('series_chart_div'));
      chart.draw(data, options);
    }
    </script>
      <style>
          #series_chart_div
          {
          }
         
     .chartWithOverlay {
           position: relative;

                }
   
     .overlay {
          position: absolute;
           top: 40px;   /* chartArea top  */
           left: 90px; /* chartArea left */

              }
         
     #trad, #private, #outsourced, #commercial
     {
         height:50px;
          width: 100px;
          margin:0;
          font-size: 14px;
          text-align:center;
      
          }
         
      </style>
    
  </head>
  <body> 
      <div class="chartWithOverlay">

          <div id="series_chart_div" >
           </div>
          <div class="overlay">
              <div >
<div id="private" style="margin-top:0px; margin-left:0px; float:left;">Private</div> 
          <div id="commercial" style="margin-top:0px; margin-left:301px;">Commercial</div>       
              </div>
              <div >
                <div id="trad" style="margin-top:0px; margin-left:0px;">Traditional</div> 
                   <div id="outsourced" style="margin-top:0px; margin-left:5px;">Outsourced</div>
              </div>
          </div>
      </div>
       </body>
</html>

Note that I added the chartArea sizing with no results. Your thoughts? Am I moving in the right direction at least (although I don't see much movement in any direction, right now!)?

Laura

[Sergey Grabkovsky]

Hi Laura,

There are a few problems with your code that are preventing you from getting it working. The first is that you specified your chartArea options as strings, when they should be numbers. Our options are not like CSS, and do not support different units. Everything for us is measured in pixels.

The other thing is that you want to set your chart area to be 900x900 pixels, which is bigger than the chart itself. My strong advice would be to specify the chart width and height options explicitly in the options (those should also just be numbers). You should get something like this if you did everything right: http://jsfiddle.net/g079sdqv/

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.