I'm currently developing a mobile app that includes both Pie and Bar Charts. I am looking for a way to position a fixed size DIV in the center of the browser window. Ideally, I would like the DIV to adjust its position if the browser is resized.
<div id="output" ><canvas id="cvs" width="350" height="350" >[No canvas support]</canvas></div>
<script>
$(document).ready(function ()
{
var pie = new RGraph.Pie('cvs', [45,20,25,10])
.set('colors', ['#F00', '#F00','#666','#ccc'])
.set('events.click', myEventListener)
.set('events.mousemove', function (e, piechart) {e.target.style.cursor = 'pointer';})
.set('title.y', 30)
.set('key', ['sunday','monday','tuesday','wednesday'])
.set('key.colors', ['#f00', '#f00','#666','#ccc'])
.set('key.interactive', true)
.set('key.position', 'gutter')
.set('gutter.left', 45)
.set('key.position.y', 315)
.set('key.rounded', false)
.set('radius', 100)
.set('linewidth', 1)
.draw();
})
</script>
<style>
#output {
width: 350px;
height: 350px;
background-color: none;
position: absolute;
top:0;
bottom: 40%;
left: 0;
right: 0;
margin: auto;
}
</style>