1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2<html> 3 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 7 <title>amCharts Responsive Example</title> 8 <script src="http://www.amcharts.com/lib/3/amcharts.js"></script> 9 <script src="http://www.amcharts.com/lib/3/serial.js"></script> 10 <script src="../responsive.min.js"></script> 11 <style> 12 body, html { 13 height: 100%; 14 padding: 0; 15 margin: 0; 16 } 17 </style> 18 <script> 19 var chartData = [{ 20 "year": 2000, 21 "cars": 1587, 22 "motorcycles": 650, 23 "bicycles": 121 24 }, { 25 "year": 1995, 26 "cars": 1567, 27 "motorcycles": 683, 28 "bicycles": 146 29 }, { 30 "year": 1996, 31 "cars": 1617, 32 "motorcycles": 691, 33 "bicycles": 138 34 }, { 35 "year": 1997, 36 "cars": 1630, 37 "motorcycles": 642, 38 "bicycles": 127 39 }, { 40 "year": 1998, 41 "cars": 1660, 42 "motorcycles": 699, 43 "bicycles": 105 44 }, { 45 "year": 1999, 46 "cars": 1683, 47 "motorcycles": 721, 48 "bicycles": 109 49 }, { 50 "year": 2000, 51 "cars": 1691, 52 "motorcycles": 737, 53 "bicycles": 112 54 }, { 55 "year": 2001, 56 "cars": 1298, 57 "motorcycles": 680, 58 "bicycles": 101 59 }, { 60 "year": 2002, 61 "cars": 1275, 62 "motorcycles": 664, 63 "bicycles": 97 64 }, { 65 "year": 2003, 66 "cars": 1246, 67 "motorcycles": 648, 68 "bicycles": 93 69 }, { 70 "year": 2004, 71 "cars": 1218, 72 "motorcycles": 637, 73 "bicycles": 101 74 }, { 75 "year": 2005, 76 "cars": 1213, 77 "motorcycles": 633, 78 "bicycles": 87 79 }, { 80 "year": 2006, 81 "cars": 1199, 82 "motorcycles": 621, 83 "bicycles": 79 84 }, { 85 "year": 2007, 86 "cars": 1110, 87 "motorcycles": 210, 88 "bicycles": 81 89 }, { 90 "year": 2008, 91 "cars": 1165, 92 "motorcycles": 232, 93 "bicycles": 75 94 }, { 95 "year": 2009, 96 "cars": 1145, 97 "motorcycles": 219, 98 "bicycles": 88 99 }, { 100 "year": 2010, 101 "cars": 1163, 102 "motorcycles": 201, 103 "bicycles": 82 104 }, { 105 "year": 2011, 106 "cars": 1180, 107 "motorcycles": 285, 108 "bicycles": 87 109 }, { 110 "year": 2012, 111 "cars": 1159, 112 "motorcycles": 277, 113 "bicycles": 71 114 }]; 115 116 AmCharts.makeChart("chartdiv", { 117 "type": "serial", 118 "dataProvider": chartData, 119 "rotate": false, 120 "marginTop": 10, 121 "categoryField": "year", 122 "categoryAxis": { 123 "gridAlpha": 0.07, 124 "axisColor": "#DADADA", 125 "startOnAxis": true, 126 "title": "Year", 127 "guides": [{ 128 "category": "2001", 129 "lineColor": "#CC0000", 130 "lineAlpha": 1, 131 "dashLength": 2, 132 "inside": true, 133 "labelRotation": 90, 134 "label": "fines for speeding increased" 135 }, { 136 "category": "2007", 137 "lineColor": "#CC0000", 138 "lineAlpha": 1, 139 "dashLength": 2, 140 "inside": true, 141 "labelRotation": 90, 142 "label": "motorcycle fee introduced" 143 }] 144 }, 145 "valueAxes": [{ 146 "stackType": "regular", 147 "gridAlpha": 0.07, 148 "title": "Traffic incidents" 149 }], 150 "graphs": [{ 151 "id": "g1", 152 "type": "column", 153 "title": "Cars", 154 "valueField": "cars", 155 "bullet": "round", 156 "lineAlpha": 0, 157 "fillAlphas": 0.6, 158 "balloonText": "<img src='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>" 159 }, { 160 "id": "g2", 161 "type": "column", 162 "title": "Motorcycles", 163 "valueField": "motorcycles", 164 "lineAlpha": 0, 165 "fillAlphas": 0.6, 166 "balloonText": "<img src='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>" 167 }, { 168 "id": "g3", 169 "type": "column", 170 "title": "Bicycles", 171 "valueField": "bicycles", 172 "lineAlpha": 0, 173 "fillAlphas": 0.6, 174 "balloonText": "<img src='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>" 175 }], 176 "legend": { 177 "position": "bottom", 178 "valueText": "[[value]]", 179 "valueWidth": 100, 180 "valueAlign": "left", 181 "equalWidths": false, 182 "periodValueText": "total: [[value.sum]]" 183 }, 184 "chartCursor": { 185 "cursorAlpha": 0 186 }, 187 "chartScrollbar": { 188 "color": "FFFFFF" 189 }, 190 "responsive": { 191 "enabled": true 192 } 193 194 }); 195 196 </script> 197 </head> 198 199 <body> 200 <div id="chartdiv" style="width: 100%; height: 100%;"></div> 201 </body> 202 203</html>