Resizing the chart dynamically
HTML
<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<input type="button" value="Resize chart container" onclick="resize();" id="button" />
<div id="chartdiv"></div>
CSS
body {
font-family: Verdana;
font-size: 12px;
padding: 10px;
}
#chartdiv {
width : 200px;
height : 200px;
font-size : 11px;
}
#button {
position: absolute;
top: 50px;
right: 20px;
font-size: 15px;
padding: 10px;
}
}
JavaScript
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "none",
"dataProvider": [{
"country": "USA",
"visits": 3025,
"color": "#FF0F00"
}, {
"country": "China",
"visits": 1882,
"color": "#FF6600"
}, {
"country": "Japan",
"visits": 1809,
"color": "#FF9E01"
}, {
"country": "Germany",
"visits": 1322,
"color": "#FCD202"
}, {
"country": "UK",
"visits": 1122,
"color": "#F8FF01"
}, {
"country": "France",
"visits": 1114,
"color": "#B0DE09"
}, {
"country": "India",
"visits": 984,
"color": "#04D215"
}, {
"country": "Spain",
"visits": 711,
"color": "#0D8ECF"
}, {
"country": "Netherlands",
"visits": 665,
"color": "#0D52D1"
}, {
"country": "Russia",
"visits": 580,
"color": "#2A0CD0"
}, {
"country": "South Korea",
"visits": 443,
"color": "#8A0CCF"
}, {
"country": "Canada",
"visits": 441,
"color": "#CD0D74"
}],
"valueAxes": [{
"axisAlpha": 0,
"position": "left",
"labelsEnabled": false
}],
"startDuration": 1,
"graphs": [{
"balloonText": "<b>[[category]]: [[value]]</b>",
"colorField": "color",
"fillAlphas": 1000,
"lineAlpha": 20000,
"type": "column",
"valueField": "visits"
}],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "country",
"categoryAxis": {
"gridPosition": "start",
"labelsEnabled": false
}
});
function resize () {
var w = Math.random() * 300 + 100;
var h = Math.random() * 300 + 100;
document.getElementById('chartdiv').style.width = w + 'px';
...