serial1.html 4.9 KB

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