Bubbles chart: how to avoid bubbles being cut off?

[Max]

Hi

I need to create a simple bubble chart, all the bubbles should be of the same size and color (product requirement), be numbered 1...N and represent (X, Y)

I see some bubbles being cut by the axes (see attached).

I am using 

viewWindowMode: 'pretty'

for both hAxis adn vAxis

Is there any way to prevent this behavior, better than manual calculation of the min/max for each axis?

Thanks for any hint.

Max

[asgallant]

"pretty" should be the default unless the viewWindow option is not null, and it works for everything I've seen.  If you post your code or a link to the page I'll take a look and see what might be going on.  

[Max]

Hi,

This is my code.

Thanks for your kindly support.

Max

function(data)

           {

           

        var datatable = new google.visualization.DataTable(data.datatable);

       

        var mycolors = (data.colors).split(",");

       

        var chart = new google.visualization.BubbleChart(document.getElementById('product-performance-chart'));

       

       chart.draw(datatable, {

         

           title : data.title,

           colors: mycolors,            

           hAxis: {viewWindowMode: 'pretty', title: '1-year performance', titleTextStyle: {fontSize: 14}},

           vAxis: {viewWindowMode: 'pretty', title: 'INBEST Rate', titleTextStyle: {fontSize: 14}},

           titleTextStyle: {fontSize: 14},

           height: 600,

           fontSize: 20,

           legend:{position: 'none'},

           backgroundColor: '${chartBackgroundColor}'

        });

[asgallant]

This seems to be an odd coincidence that only occurs when the values used for the data elements on the outer "edges" of the chart fall within certain parameters.  The API attempts to draw the axes such that gridlines will fall on "clean" values, and it just so happens that with the particular values in your chart, the API determined that one of the clean boundaries needed to be exactly the same as one of the data points (this actually happened twice in your chart, once for each axis).  If you change the number of gridlines, you change the formula for determining the clean values, and can avoid the problem.  Try setting the gridlines.count sub-option for both hAxis and vAxis to something other than 5.

[Max]

Hi

Thanks a lot for the advise.

This specific chart looks OK with 6 lines in the grid.

However, different charts look bad (just like I showed) with numbers different than 5.

See attached example of the same chart with 8 grid lines.

Is there any workaround applicable, without adjusting number of lines to the specific data?

Thanks

Max

[asgallant]

What you probably need is a function that picks gets the min/max values from your data and sets the min/max values for the chart axes based on those.  This will group your data to get the values you need:

var minmax = google.visualization.data.group(data, [{
    column: 0,
    type: 'number',
    modifier: function () {
        // return the same value for all rows
        return 0;
    }
}], [{
    column: 1,
    type: 'number',
    label: 'X min',
    aggregation: google.visualization.data.min
}, {
    column: 1,
    type: 'number',
    label: 'X max',
    aggregation: google.visualization.data.max
}, {
    column: 2,
    type: 'number',
    label: 'Y min',
    aggregation: google.visualization.data.min
}, {
    column: 2,
    type: 'number',
    label: 'Y max',
    aggregation: google.visualization.data.max
}]);

// get the values from min/max and modify (make mins smaller and maxes larger) to fit the data in your chart

[Max]

Thanks a lot.

Just need a hint how the resulting 'minmax' can be used i.e. what the "structure" of the result...

Max

[asgallant]

You would need to make some sort of determination as to what the buffer space should be around the outside, add that to these values, and set the hAxis/vAxis viewWindow min/max values:

hAxis: {
    viewWindow: {
        min: minmax.getValue(0, 1) - hAxisBuffer,
        min: minmax.getValue(0, 2) + hAxisBuffer
    }
},
vAxis: {
    viewWindow: {
        min: minmax.getValue(0, 3) - vAxisBuffer,
        min: minmax.getValue(0, 4) + vAxisBuffer

[asgallant]

You have problems with your chart options.  You have both hAxis.viewWindow and vAxis.viewWindow twice, the second one being empty in each case, which is either causing the code to throw an error or overwriting the viewWindow options with empty objects.  There are a couple other things in there as well, but nothing that is likely to break anything.

var options = {
    sizeAxis: {
        maxSize: '8' // <--- this should be a number, not a string
    },
    title: 'Response Rate vs Size',
    hAxis: {
        viewWindow: {
            min: minmax.getValue(0, 3) - 10,
            max: minmax.getValue(0, 4) + 10
        },
        viewWindow: {}, // <--- get rid of this
        title: 'Sample Size'
    },
    vAxis: {
        viewWindow: {

            min: minmax.getValue(0, 1) - 10000,
            max: minmax.getValue(0, 2) + 10000
        },
        viewWindow: {}, // <--- and this
        title: 'Response Rate'
    },
    bubble: {
        textStyle: {
            fontSize: 8
        }
    },
    chartArea: {
        padding: "50%" // <--- there is no chartArea.padding option
    }
};

On Tuesday, October 16, 2012 6:15:01 PM UTC-4, joti chand wrote:

Hi,
I am having the same problem as above, I am trying the same code provided in this forum, but it is not owrking for me.
Can someone tell me what I am doing wrong:

<script type="text/javascript">

      function drawVisitorsChart(rows_str) {
       var rows = eval(rows_str);
      // alert(rows);

     
        var data = new google.visualization.DataTable();
          data.addColumn('string', 'Week');
         data.addColumn('number', 'Data');
        data.addColumn('number', 'Data1');
       
        data.addRows( rows);

        alert(minmax.getValue(0, 2)+10000);
         
       
            var options = {
                  sizeAxis:{maxSize:'8'},
                  title: 'Response Rate vs Size',
                  hAxis: { viewWindow: {
        min: minmax.getValue(0, 3) - 10,
        max: minmax.getValue(0, 4) + 10
    },viewWindow: {},title: 'Sample Size'},
                  vAxis: {viewWindow: {
       
         min: minmax.getValue(0, 1) - 10000,
        max: minmax.getValue(0, 2) + 10000
    },viewWindow: {},title: 'Response Rate'},
                  bubble: {textStyle: {fontSize: 8}},
                  chartArea:{padding:"50%"}
                };
         if (document.getElementById('graph1').checked)
        {
            var options = {
                  sizeAxis:{maxSize:'8'},
                  title: 'Cost vs Size',
                  vAxis: {viewWindowMode: 'pretty',title: 'Cost'},
                  hAxis: {viewWindowMode: 'pretty',title: 'Sample size'},
                  bubble: {textStyle: {fontSize: 8}}
                };
        }
        if (document.getElementById('graph2').checked)
        {
            var options = {
                  sizeAxis:{maxSize:'8'},
                  title: 'Response Rate vs Cost',
                  hAxis: {viewWindowMode: 'pretty',title: 'Response Rate'},
                  vAxis: {viewWindowMode: 'pretty',title: 'Cost'},
                  bubble: {textStyle: {fontSize: 8}}
                };
        }
       


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

 link: https://secure.zeald.com/cbg/Members/Compare%20Surveys?_z_liveedit=1&mv_pc=95

[Robin gupta]

+1

I am facing the same issue.

[Allen Chuang]

use baseline to make it up or right

e.g

vAxis: {title: 'Total Interactive', baseline: -1000 ,format: 'decimal'},