<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!doctype html>
<head>
<meta charset = "utf-8" />
<meta http-equiv = "x-ua-compatible" content = "ie = edge" />
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0" />
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/responsive/responsive.min.js"></script>
<title>Accordion</title>
</head>
<body>
<!-- Chart container resizing controls -->
<div id="controls">
<div id="dims">800x500px</div>
Width<br />
<input type="button" value="-" onclick="resize('w', -50);" />
<input type="button" value="+" onclick="resize('w', 50);" /><br /><br />
Height<br />
<input type="button" value="-" onclick="resize('h', -50);" />
<input type="button" value="+" onclick="resize('h', 50);" /><br /><br />
Horizontal<br />
<input type="button" value="800x500" onclick="resize('d', 800, 500);" /><br />
<input type="button" value="800x300" onclick="resize('d', 800, 300);" /><br />
<input type="button" value="800x200" onclick="resize('d', 800, 200);" /><br />
<input type="button" value="800x100" onclick="resize('d', 800, 100);" /><br /><br />
Vertical<br />
<input type="button" value="350x500" onclick="resize('d', 350, 500);" /><br />
<input type="button" value="200x500" onclick="resize('d', 200, 500);" /><br />
<input type="button" value="100x500" onclick="resize('d', 100, 500);" /><br /><br />
Micro<br />
<input type="button" value="100x30" onclick="resize('d', 100, 30);" /><br />
<input type="button" value="30x100" onclick="resize('d', 30, 100);" /><br /><br />
<span href="https://www.amcharts.com/tutorials/making-charts-responsive/" target="_blank" class="copy">© amCharts</span>
<a href="https://www.amcharts.com/tutorials/making-charts-responsive/" target="_blank" class="copy">More info</a>
</div>
<!-- Chart container (wrapped in another resizable container) -->
<div class="resizable">
<div id="chartdiv"></div>
</div>
<script>
/**
* Set up the chart
*/
var chartData = [{
"year": 2000,
"cars": 1587,
"motorcycles": 650,
"bicycles": 121
}, {
"year": 1995,
"cars": 1567,
"motorcycles": 683,
"bicycles": 146
}, {
"year": 1996,
"cars": 1617,
"motorcycles": 691,
"bicycles": 138
}, {
"year": 1997,
"cars": 1630,
"motorcycles": 642,
"bicycles": 127
}, {
"year": 1998,
"cars": 1660,
"motorcycles": 699,
"bicycles": 105
}, {
"year": 1999,
"cars": 1683,
"motorcycles": 721,
"bicycles": 109
}, {
"year": 2000,
"cars": 1691,
"motorcycles": 737,
"bicycles": 112
}, {
"year": 2001,
"cars": 1298,
"motorcycles": 680,
"bicycles": 101
}, {
"year": 2002,
"cars": 1275,
"motorcycles": 664,
"bicycles": 97
}, {
"year": 2003,
"cars": 1246,
"motorcycles": 648,
"bicycles": 93
}, {
"year": 2004,
"cars": 1218,
"motorcycles": 637,
"bicycles": 101
}, {
"year": 2005,
"cars": 1213,
"motorcycles": 633,
"bicycles": 87
}, {
"year": 2006,
"cars": 1199,
"motorcycles": 621,
"bicycles": 79
}, {
"year": 2007,
"cars": 1110,
"motorcycles": 210,
"bicycles": 81
}, {
"year": 2008,
"cars": 1165,
"motorcycles": 232,
"bicycles": 75
}, {
"year": 2009,
"cars": 1145,
"motorcycles": 219,
"bicycles": 88
}, {
"year": 2010,
"cars": 1163,
"motorcycles": 201,
"bicycles": 82
}, {
"year": 2011,
"cars": 1180,
"motorcycles": 285,
"bicycles": 87
}, {
"year": 2012,
"cars": 1159,
"motorcycles": 277,
"bicycles": 71
}];
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"dataProvider": chartData,
"rotate": false,
"marginTop": 10,
"categoryField": "year",
"categoryAxis": {
"gridAlpha": 0.07,
"axisColor": "#DADADA",
"startOnAxis": false,
"title": "Year",
"guides": [{
"category": "2001",
"lineColor": "#CC0000",
"lineAlpha": 1,
"dashLength": 2,
"inside": true,
"labelRotation": 90,
"label": "fines for speeding increased"
}, {
"category": "2007",
"lineColor": "#CC0000",
"lineAlpha": 1,
"dashLength": 2,
"inside": true,
"labelRotation": 90,
"label": "motorcycle fee introduced"
}]
},
"valueAxes": [{
"stackType": "regular",
"gridAlpha": 0.07,
"title": "Traffic incidents"
}],
"graphs": [{
"id": "g1",
"type": "column",
"title": "Cars",
"valueField": "cars",
"bullet": "round",
"lineAlpha": 0,
"fillAlphas": 0.6,
"balloonText": "<img src='https://www.amcharts.com/lib/3/images/car.png' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>[[value]]</b></span>"
}, {
"id": "g2",
"type": "column",
"title": "Motorcycles",
"valueField": "motorcycles",
"lineAlpha": 0,
"fillAlphas": 0.6,
"balloonText": "<img src='https://www.amcharts.com/lib/3/images/motorcycle.png' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>[[value]]</b></span>"
}, {
"id": "g3",
"type": "column",
"title": "Bicycles",
"valueField": "bicycles",
"lineAlpha": 0,
"fillAlphas": 0.6,
"balloonText": "<img src='https://www.amcharts.com/lib/3/images/bicycle.png' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>[[value]]</b></span>"
}],
"legend": {
"position": "bottom",
"valueText": "[[value]]",
"valueWidth": 100,
"valueAlign": "left",
"equalWidths": false,
"periodValueText": "total: [[value.sum]]"
},
"chartCursor": {
"cursorAlpha": 0
},
"chartScrollbar": {
"color": "FFFFFF"
},
"responsive": {
"enabled": true
}
});
/**
* Set up demo controls
* These are for this particular demo purposes only. You don't need this
* for actual responsive charts
*/
$( function () {
$( ".resizable" ).resizable( {
animate: true,
animateEasing: 'swing',
animateDuration: 250,
resize: function( event, ui ) {
$( '#dims' ).html( ui.size.width + 'x' + ui.size.height + 'px' );
},
stop: function( event, ui ) {
setTimeout(function () { chart.invalidateSize() }, 251 );
}
} );
} );
function resize( dim, dir, h ) {
/**
* Set appropriate container size
*/
var container = $('.resizable');
if ( 'd' == dim )
container.css( { 'width': dir, 'height': h });
else if ( 'w' == dim )
container.css( { 'width': container.width() + dir } );
else
container.css( { 'height': container.height() + dir } );
$( '#dims' ).html( Math.round( container.width() ) + 'x' + Math.round( container.height() ) + 'px' );
/**
* Normally the charts will watch for window resize / orientation chang
* events to automatically resize themselves.
*
* Since we're manipulating the container size manually, we need to
* trigger chart resize event as well.
*
* Normally you won't have to do this.
*/
chart.invalidateSize();
}
</script>
</script>
</body>
</html>
/**
* Chart-related CSS
*/
#chartdiv {
width: 100%;
height: 100%;
}
/**
* CSS related to this demo - resizable container
*/
body {
font-family: Verdana;
font-size: 12px;
color: #333;
}
.ui-resizable-helper {
border: 1px dotted gray;
}
.resizable {
display: block;
width: 800px;
height: 500px;
padding: 0;
margin: 0 20px 20px 170px;
float: left;
border: 2px dashed #ddd;
overflow: hidden;
position: relative;
}
#controls {
text-align: center;
background: #dedede;
color: #333;
padding: 5px;
font-size: 14px;
font-weight: bold;
font-family: Verdana;
margin-right: 10px;
min-height: 500px;
max-width: 140px;
position: absolute;
}
#controls input {
margin: 2px 0;
}
#controls .copy {
font-size: 11px;
font-weight: normal;
}
#dims {
background: #fff;
color: #222;
padding: 5px 8px;
font-size: 14px;
font-family: Verdana;
text-align: center;
margin-bottom: 10px;
min-width: 120px;
}
