Bubble Chart Zoom Issue

[asingular]

Hello all,

I am using the first example on this page: https://developers.google.com/chart/interactive/docs/gallery/bubblechart#overview and it looks good. But I have one issue. I am using the following code to zoom.

explorer: { actions: ['dragToZoom', 'rightClickToReset'] } 

The zoom function works as expected, but the bubble on the far right gets cut off on the top right side. That doesn't happen if I take out explorer: { actions: ['dragToZoom', 'rightClickToReset'] } . 

Anyone know how I can fix it without hAxis.maxValue and vAxis.maxValue? That is not an option since the data is too dynamic.

thanks,

Joe

[Daniel LaLiberte]

Hi Joe,

That is a bit of a surprise to us, and we'll look into it.  Thanks.

As a workaround, you can determine the min and max values from the data using datatable.getColumnRange(n), where n is 1 and 2.    Then add a fraction of (max - min) to ensure there is a margin around the data.  Hope that helps.

--
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 https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/3ee4f1a6-b67c-4191-a9be-c59446e077db%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte

dlaliberte@Google.com   5CC, Cambridge MA

[asingular]

Hi Daniel,

Thanks, but I am a little unsure of how to go about doing that. Could you perhaps give me an example?

all the best,

Joe

[Daniel LaLiberte]

OK, this seems to work:  https://jsfiddle.net/dlaliberte/99qd9pn2/

--

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 https://groups.google.com/group/google-visualization-api.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/8be1725f-102a-46de-a3ad-6e813b458bb9%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[asingular]

You are THE MAN! Thanks so much, that works perfectly.

On Tuesday, March 8, 2016 at 7:33:30 PM UTC-5, asingular wrote:

[Patrick Beaudan]

Hi Dan,

Is there a way to ensure the bubble chart boundaries don't cut off the bubbles? I attach a chart example as a png.

My code is as follows. Thanks very much!

 google.load("visualization", "1", {packages:["corechart"]});

 google.setOnLoadCallback(drawChart);

 function drawChart() {

var jsonData = $.ajax({          

 url: "../../charts/chart_handler.php?chart=chart_bondRisk",          

 dataType:"json",          

 async: false          

}).responseText;  

var data = new google.visualization.DataTable(JSON.parse(jsonData));  // Create our data table out of JSON data loaded from server.           

var options = {

 hAxis: {title: 'Current allocation to bonds', minValue:-10},

 vAxis: {title: 'Loss', maxValue:2},

 chartArea: {top:10, left:100},

 legend: {textStyle: {fontSize: 11}},

 tooltip: {textStyle: {color: '#000000', fontSize: 11, fontName: "Trebuchet MS"}},

 sizeAxis: {minSize:15, maxSize:30},

 bubble: {textStyle: {fontSize: 11, fontName: "Trebuchet MS"}}

};

 

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

chart.draw(data, options);

// track user selection

google.visualization.events.addListener(chart, 'select', selectHandler);

function selectHandler() {

 var selection = chart.getSelection();   // only 1 item selected at a time with bubble charts

  //   strategy = '{row:' + selection[0].row + '}';

 strategy = data.getValue(selection[0].row,3); // return symbol from chart data table

  //   alert('Selected ' + strategy + ' as your champion portfolio?');

 window.location.href = "chart_bondRisk.php?strategy=" + strategy;  // transfer to processing page

}

 }

[Daniel LaLiberte]

There is no automatic way other than what I suggested as a work around in https://jsfiddle.net/dlaliberte/99qd9pn2/.  We need to make a change so something like this is done internally, but we have bigger plans for BubbleChart so this change will probably have to wait.

--

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 https://groups.google.com/group/google-visualization-api.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/48be10d6-f80a-409c-85c2-07817d2490fa%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.