"amcharts"
Bootstrap 3.0.0 Snippet by thavaselvam

<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; }

Related: See More


Questions / Comments: