serial1.html 5.2 KB

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