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