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
On Wednesday, February 25, 2015 at 3:15:42 PM UTC-5, Sergey wrote:
>
> 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.
>
> On Wed, Feb 25, 2015 at 2:54 PM Laura Johnson <[email protected]
> <javascript:>> wrote:
>
>> 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]>
>>> 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 google-visualization-api+unsub
>>>>>> [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].
>>>> 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.
