Ajnasz/google-chart-padding-example.html

## google-chart-padding-example.html
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>A</title>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
</head>
<body>
    <button type="button" id="ChangeSize">Change Size</button>
    <div id="ChartTest" style="width:1000px;"></div>
     <script type="text/javascript">
            window.onload = function () {
                function renderChart(size) {
                    google.load("visualization", "1", {
                        packages: ["corechart"],
                        callback: function () {
                            var dataTable = new google.visualization.DataTable();
                            var data = [14,2,3,4,4,9,90,3,4,8,0,99,33,3,2,32,99,3,1,23,45];
                            dataTable.addColumn('number', 'index');
                            dataTable.addColumn('number', 'value');
                            data.forEach(function (item, index) {
                                dataTable.addRow([index, item]);
                            });
                            var chart = new google.visualization.BarChart(document.getElementById('ChartTest'));
                            var options = {
                                height: data.length * size // change 60 to 10 or 120 to see the differences
                            }
                            chart.draw(dataTable, options);
                        }
                    });
                }
                var currentSize = 10;
                document.getElementById('ChangeSize').onclick = function () {
                    var text;
                    switch (currentSize) {
                        case 10:
                            currentSize = 30;
                            text = 'getting bigger';
                            break;
                        case 30:
                            currentSize = 60;
                            text = 'getting even bigger';
                            break;
                        case 60:
                            currentSize = 90;
                            text = 'pretty big';
                            break;
                        case 90:
                            currentSize = 120;
                            text = 'it\'s huge!';
                            break;
                        case 120:
                            text = 'it\'s ok now!';
                            currentSize = 10;
                            break;
                    }
                    renderChart(currentSize);
                    this.innerHTML = text;
                }
                renderChart(currentSize);
            }
     </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>A</title>
	<script type="text/javascript" src="https://www.google.com/jsapi"></script>
	</head>
	<body>
	<button type="button" id="ChangeSize">Change Size</button>
	<div id="ChartTest" style="width:1000px;"></div>
	<script type="text/javascript">
	window.onload = function () {
	function renderChart(size) {
	google.load("visualization", "1", {
	packages: ["corechart"],
	callback: function () {
	var dataTable = new google.visualization.DataTable();
	var data = [14,2,3,4,4,9,90,3,4,8,0,99,33,3,2,32,99,3,1,23,45];
	dataTable.addColumn('number', 'index');
	dataTable.addColumn('number', 'value');
	data.forEach(function (item, index) {
	dataTable.addRow([index, item]);
	});
	var chart = new google.visualization.BarChart(document.getElementById('ChartTest'));
	var options = {
	height: data.length * size // change 60 to 10 or 120 to see the differences
	}
	chart.draw(dataTable, options);
	}
	});
	}
	var currentSize = 10;
	document.getElementById('ChangeSize').onclick = function () {
	var text;
	switch (currentSize) {
	case 10:
	currentSize = 30;
	text = 'getting bigger';
	break;
	case 30:
	currentSize = 60;
	text = 'getting even bigger';
	break;
	case 60:
	currentSize = 90;
	text = 'pretty big';
	break;
	case 90:
	currentSize = 120;
	text = 'it\'s huge!';
	break;
	case 120:
	text = 'it\'s ok now!';
	currentSize = 10;
	break;
	}
	renderChart(currentSize);
	this.innerHTML = text;
	}
	renderChart(currentSize);
	}
	</script>
	</body>
	</html>