Menu
I am using Google chart. The positioning eludes me. I haven't located that part in the documentation. I simply want to create a Google chart inside a div with the top left corner positioned in (x, y) in the div. Extra points for help with controlling the dimensions.
<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(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
If I look in the html in 'runtime' using a tool like firebug I see:
rect x="161" y="96" width="579" height="309"
But I did not pick any of those values.
656
Click the Embed tab, and click the Publish button. You should now see an embeddable iframe code snippet. Copy this iframe code, and navigate to your website. Paste this code into an HTML/source view, and click save.
What I would do is remove the title from the chart and add a header above the chart which would allow you to center it using CSS. To remove the title from the chart use titlePosition: 'none' . For more info: Google Chart Documentation - Configuration Options. Agree, there is no other option to centre the title.
All you have to do is choose a design, and set a few options about the design style. Give your graph some data—a title and labels, as well as the data that forms the actual graph. Provide some information about labels, and set your font. Preview the graph to make sure you don't need to make any changes.
For example to position the chart at (0,0) within the DIV, add to the chart options :
var options = {
...,
chartArea:{left:0,top:0,width:"50%",height:"50%"}
}
and adjust the width and height as you want; the full options are here.
119
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
