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 <[email protected]
> <javascript:>> 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 <[email protected]>
>>> 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 [email protected].
>>>>
>>> To post to this group, send email to [email protected].
>>>
>>>
>>>> Visit this group at http://groups.google.com/
>>>> group/google-visualization-api.
>>>> For more options, visit https://groups.google.com/d/optout.
>>>>
>>> --
>> 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 [email protected]
>> <javascript:>.
>> To post to this group, send email to [email protected]
>> <javascript:>.
>> Visit this group at
>> http://groups.google.com/group/google-visualization-api.
>> For more options, visit https://groups.google.com/d/optout.
>>
>
--
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 [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.
<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 = {
title: 'OPNAV 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
{
/*background: #ff120a; /* Old browsers */
background: -moz-linear-gradient(31deg, #ff120a 0%, #f8fc02 47%, #4bd31d
100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top,
color-stop(0%,#ff120a), color-stop(47%,#f8fc02), color-stop(100%,#4bd31d)); /*
Chrome,Safari4+ */
background: -webkit-linear-gradient(31deg, #ff120a 0%,#f8fc02 47%,#4bd31d
100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(31deg, #ff120a 0%,#f8fc02 47%,#4bd31d 100%); /*
Opera 11.10+ */
background: -ms-linear-gradient(31deg, #ff120a 0%,#f8fc02 47%,#4bd31d 100%);
/* IE10+ */
background: linear-gradient(31deg, #ff120a 0%,#f8fc02 47%,#4bd31d 100%); /*
W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff120a',
endColorstr='#4bd31d',GradientType=1 ); /* IE6-9 fallback on horizontal
gradient */
background-size: 493px 310px;
background-repeat: no-repeat;
background-position: 154px 96px;*/
height: 800px;
width: 800px;
/* position: relative;*/
}
div.class
{
font-weight: bold;
/*position: absolute;
top:500;
left:300;*/
}
.chartWithOverlay {
position: relative;
width: 800px;
}
.overlay {
position: absolute;
top: 40px; /* chartArea top */
left: 90px; /* chartArea left */
width: 620px;
}
#trad, #private, #outsourced, #commercial
{
height:250px;
width: 300px;
margin:0;
font-size: 14px;
text-align:center;
}
</style>
</head>
<body>
<div class="chartWithOverlay">
<div id="series_chart_div" >
</div>
<div class="overlay">
<div style="width:602px;">
<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 style="width:602px;">
<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>
